Noble Fat
Noble Fat is a female-owned, family-operated café serving thoughtfully sourced matcha from small farms in Japan and Pan-Asian–inspired dishes made with locally sourced ingredients.
OVERVIEW
I redesigned Noble Fat’s website to improve accessibility, navigation, content information, and the shop experience while highlighting the cafe’s background and matcha sourcing through information hierarchy.
- TIMELINE
- Oct 2025 — April 2026
- ROLE
- Product/Web Designer, UX Researcher
- TOOLS
- Figma, Wix
BACKGROUND
Noble Fat’s website did not effectively support users in accessing essential information, understanding the business’s identity, and completing key actions such as browsing or making purchases. Users encountered accessibility issues with the navigation bar, information hierarchy, and shopping flow, resulting in limited interactions on the site and reduced sales.
RESEARCH QUESTION
How might we help users easily find essential information while communicating the brand's story and values to strengthen engagement?
PROJECT OBJECTIVES
Improving accessibility, navigation, and content information
Ensure users can easily find and access information. The redesigned website should meet accessibility standards (WCAG) through usability testing.
Highlight the cafe’s mission and values
Strengthen brand identity and engage with the community. Currently, Google does not recognize noble fat as a matcha bar because of how the website was created.
Streamline access to practical information
Ensure users can quickly access about hours, locations, and farmers’ markets information.
Enhance the online shop and subscription login experience
Increase engagement and sales, while educating users about matcha and how to remain respectful of how it’s traditionally served
PROCESS
To understand how to design tailored experiences that better serve diverse needs, I segmented a broad user base into distinct user groups. Users interact with the site based on 3 primary intents: visiting, purchasing, and connecting.
Research Goals & Questions
1 of 4 — slide
Uncover usability barriers within the website experience
- What accessibility barriers currently prevent users from fully engaging with the website?
- How do visitors currently navigate to find basic information (hours, location, menu, markets)?
- Is the information presented in a way that is easy to understand?
Usability Testing
Six usability tests were conducted on Noble Fat's website to understand user behaviors and motivations such as learning about what draws participants to cafes and how they choose which ones to visit. The tests explored how and why users engage with cafe websites to identify what information they seek and what content the site should prioritize. Participants completed tasks on the current site to reveal how they interact with it and pain points where the experience falls short.
KEY FINDINGS
Design Iterations
The iterative design process involved low-fidelity sketches, mid-fidelity wireframes, and high-fidelity wireframes, with multiple rounds of user testing to refine the redesign. Guided by usability, accessibility, and storytelling, the final design highlights the business's background, partnerships, events, shop flow, and educational content. Additionally, it is fully responsive across mobile and desktop.
WIREFRAMES
1 of 3 — slide
Sketches
The sketching process began by laying out what items would be on the navigation bar. Each page was guided by the findings to include information that meets users’ needs, as well as ensuring the website reflects the ambiance of the matcha bar and farmer’s market locations.
Iterative User Testing
Usability testing was conducted on the mid and high-fidelity wireframes. Six usability tests were conducted, and the testing involved defining goals, success criteria, gathering insight, and utilizing a defect log to learn about user pain points and areas of improvement.
KEY FINDINGS
FINAL PRODUCT
Since the client's original site was built on Wix, the redesign was implemented on the same platform for easy familiar management. While Figma offered more design flexibility, adapting the design to Wix's constraints opened new opportunities such as templates with timelines, image galleries to present content more effectively. After implementation, another round of iterative user testing was conducted and refinements were made based on feedback.
1 of 5 — screen
Homepage
The redesigned homepage serves as an entry point that communicates Noble Fat’s identity in a clear and engaging way while guiding users to key content and pages. It utilizes strong visuals and color to create a compelling first impression and help users quickly understand the brand, while reflecting the physical space inside the matcha bar.
IMPACT
After the redesign, analytics were tracked over a ~3.5-month period (April 12 – July 24, 2026) to evaluate the impact of the changes, compared against the site's performance in the months leading up to launch.
Engagement increased significantly
- Bounce rate dropped from 55% to 39% (~30% decrease)
- Average session duration rose from 53 seconds to 76 seconds (+43%)
- Daily sessions nearly doubled (+74%)
Sales trended upward
- Average order value nearly doubled (+95%)
- Average daily sales revenue more than doubled (+133%)
REFLECTIONS
It was very fun working with a small business and getting to see how things work from both inside and outside, since I worked at Noble Fat as a Matcharista! I loved engaging with the community and getting to participate in photoshoots with the drinks, food, and products.
