WhatCoffee
Web Design & Project Leadership
Bringing WhatCoffee's in-store warmth online.
WhatCoffee is a specialty café near Santa Clara University with a warm, artful identity and a loyal local following. To help that experience reach beyond the storefront, I led an eight-person design and development team in creating a responsive website for discovering the brand, browsing its offerings, and beginning a catering inquiry.
I joined the project as a designer, became Lead Designer, and ultimately stepped into the Project Manager role. That progression gave me responsibility for the design direction, stakeholder communication, team reviews, and final delivery.
Audience growth
25%
growth in WhatCoffee's social media following, supported in part by the early website release.
Site traffic
↑
the early website release increased traffic and helped validate market interest.
Usability validation
15
students evaluated the mid-fidelity redesign before final handoff.
Delivery
On time
the early version launched on schedule, while the final redesign was delivered for future implementation.
Research
What makes a coffee shop worth the trip?
WhatCoffee already had a memorable in-store identity, but none of it existed online. Through short interviews with a small group of Santa Clara University students, we explored how they discover new coffee shops and what they look for before deciding to visit.
Three things students wanted to know.
Discovery
Turning what we heard into a plan.
The research gave the team three priorities for the experience.
Make discovery immediate.
Help visitors understand what WhatCoffee is and what makes it different without requiring them to search across other platforms.
Make the decision easier.
Bring the menu, atmosphere, and essential visit information together so customers can decide whether the café fits their needs.
Give interest somewhere to go.
Create obvious paths to visit, get in touch, explore catering, or continue to the existing online shop.
Web & Navigation Content
We translated the research priorities into a sitemap that separated everyday browsing, brand education, and higher-intent actions while keeping the existing online shop as an external destination.
Sitemap
Menu & Catering Experience
We reviewed one nearby competitor and three established specialty-coffee brands to see how each balanced personality, products, and practical information.
| Brand | Strongest focus | Direction for WhatCoffee |
|---|---|---|
| Voyager Craft Coffee | Local experience and catering | Keep visit details easy to find. |
| Verve Coffee Roasters | Craft and product storytelling | Let photography signal quality. |
| Alfred Coffee | Bold branding and ordering | Pair personality with clear actions. |
| Bird Rock Coffee Roasters | Coffee education and café information | Keep deeper content layered and scannable. |
Competitive analysis
Extending what already worked beyond the café walls.
WhatCoffee did not need a new personality. It needed a digital experience capable of expressing the one customers already encountered in person.
How Might We
Make discovering WhatCoffee feel as warm, clear, and considered as stepping inside the café?
Ideation
Translating a café's personality into a system.
The visual direction started with the founder's own words, then moved through references, existing assets, and a shared system eight people could design against.
Visual & Content Branding
I began by asking WhatCoffee's founder to describe the brand before we discussed visual references. Three words became the filter for every design decision.
Warm, polished, and a little playful.
The mood board combined dark coffee tones, creamy neutrals, energetic orange, bold typography, and artful product imagery. It created enough restraint to feel elevated while leaving room for the personality already present in WhatCoffee's logo and packaging.
Mood board
The brand was already there.
Photography of the café, drinks, packaging, and physical space revealed a visual identity worth amplifying rather than replacing. The orange cup, playful logo, and carefully presented products became the foundation for the site.
Existing identity
Making eight people design as one team.
I consolidated the site's foundational styles and reusable interface elements into one shared system. This gave the team a common visual reference while individual pages moved from wireframes into high fidelity, and made the final package easier for a future development partner to implement.
Design system
Giving every page one clear role.
The low-fidelity wireframes explored how much space each page should give to storytelling versus direct utility. Instead of forcing every screen to do both equally, we used hierarchy to let one purpose lead and the other support it. These sketches established the foundation before the designs moved into mid fidelity and user testing.
Wireframes — introduce, explain, explore, inquire
Testing & Iteration
How we tested the website before high fidelity.
We tested the mid-fidelity website with 15 students, asking each participant to complete a short series of tasks while moving through the prototype. Drag a frame to move between versions.
Task-Based Walkthrough
Students located menu information and navigated to catering and contact.
Think-Aloud Feedback
Students shared their expectations and reactions as they explored.
Page Comprehension
Students explained each page's purpose and what they would do next.
From testing to a stronger system.
Across the usability sessions and stakeholder reviews, three areas continued to surface: the homepage needed a stronger entry point, the menu needed less visual noise, and the supporting pages needed to feel like parts of the same experience.
Let the homepage make an entrance.
The first homepage compressed the hero and gave each section nearly equal weight. Enlarging and recentering the opening, replacing plain category cards with full-bleed panels, and surfacing popular products in a visual carousel gave the brand a clearer first word.
Give the menu room to breathe.
Long descriptions, calorie details, and a three-column grid made the first menu feel dense and uneven. Reducing each card to image, name, and price, then moving to a consistent four-column rhythm, made the page easier to scan.
Let every page speak the same language.
The original story page introduced a flat text hero, heavy circular icons, and a sparse contact section that felt disconnected from the rest of the site. Reusing the split image-and-copy rhythm, lighter icons, and a structured closing call to action brought the page back into the shared system.
Final Delivery
Bringing the café to the screen.
After refining the page structures with students, the founder, and our internal team, we completed the high-fidelity experience and transferred the full design package to WhatCoffee. The handoff included the sitemap, responsive screens, interactive prototype, design system, and supporting documentation needed for a future development partner to build the website.
Final screens
Homepage
Letting the brand lead.
Make an entrance
[Copy needed]
Surface favorites
[Copy needed]
Open the journey
[Copy needed]
Our Story
Bringing the story beyond the storefront.
Explain the why
[Copy needed]
Make values visible
[Copy needed]
Show the craft
[Copy needed]
Menu
Turning scrolling into choosing.
Organize the offering
[Copy needed]
Keep products visual
[Copy needed]
Lighten the decision
[Copy needed]
Catering
Making special requests feel straightforward.
Set expectations
[Copy needed]
Support consideration
[Copy needed]
Invite the next step
[Copy needed]
Knowledge
[Knowledge-page headline to be completed]
Gallery & Contact
Making the experience visible and reachable.
Show the atmosphere
[Copy needed]
Keep contact simple
[Copy needed]
Next Steps
From a complete design package to a working website.
We ended the engagement by transferring the complete design system, sitemap, prototype, final screens, and supporting documentation. Implementation is now a separate phase the client can begin when the right development partner and resources are in place.
Reflections & Takeaways
Leading meant creating clarity.
Give reviews a target.
[Copy needed]
Translate stakeholder input.
[Copy needed]
Prioritize what moves the system.
[Copy needed]
Thank You
Thank you for reading.
I'm incredibly grateful to the WhatCoffee team for trusting us with this project, and especially to Rain for providing clear feedback and support throughout. Thank you as well to the ACM at UCLA design and development team — their ideas, care, and collaboration made this experience both rewarding and memorable.
Next case study