RoleUX Designer
TimelineJune - August 2025
ToolsFigma, Figjam, Google Meet, Google Sheets
ALittle Tea CO is a family-owned bubble tea shop in Colorado Springs that specializes in authentic Fuzhou-style tea. The owners source tea leaves directly from Fuzhou, China and use real jasmine flowers instead of artificial fragrances. Despite their commitment to quality and authentic family recipes, their online presence didn't reflect the care and authenticity of their in-store experience.
Health-conscious customers seeking authentic local businesses couldn't assess ALittle Tea CO's family values and quality commitment because their website had three critical issues: inconsistent branding, no storytelling about their family heritage, and missing dietary information. This led to uncertainty about authenticity and reduced likelihood of choosing ALittle Tea CO over established chains.
Design a fully responsive website that communicates ALittle Tea CO's authentic family story, aligns the digital brand with their physical presence, and provides clear dietary information—all while ensuring a seamless mobile-first experience for customers who discover local businesses through social media.
I conducted mixed-methods research to understand both customer needs and competitive landscape:
The research revealed that 80% of discovery happens on mobile through social media, with customers heavily influenced by visual content and personal recommendations. Participants consistently valued dietary transparency, authentic local business stories, and consistent branding across touchpoints.
Finding
"My top priority is whether they offer dairy-free options"
— Carrena
"I trust businesses that align with my values, such as being woman-owned or run by a small family"
— Yoojin
Brand inconsistency: orange website vs. blue physical cups/signage
Design Implication
Prominent dietary labels and milk alternative information
Dedicated About section showcasing family story and heritage
Align digital branding with physical blue color palette
A key part of this project was working directly with John, the owner of ALittle Tea CO. I met with him to present my mid-fidelity wireframes and style tile, gather feedback on the design direction, and learn the authentic story behind the business. This conversation was invaluable—John shared details about his family's tea-making heritage in Fuzhou, their commitment to using real jasmine flowers instead of artificial fragrances, and why the blue color (which I was aligning to) was meaningful to the brand. His input directly shaped the About section content and validated that the design direction resonated with the business's values.
I analyzed four local competitors—Teapioca Lounge, Coffee & Tea Zone, Mochi Thai'm Donuts & Boba, and Yellow Mountain Tea House—to understand how established tea shops present themselves online. This revealed opportunities for ALittle Tea CO: most competitors had generic, corporate-feeling websites that didn't communicate their story or values. None prominently featured dietary information or milk alternatives on their menus. ALittle Tea CO could differentiate by leading with their authentic family story and making health-conscious customization immediately visible.
In-Depth Competitive Analysis using SWOT
To make sense of the qualitative data from interviews, I used three synthesis methods that each revealed different dimensions of the user experience:
Affinity Map
I organized interview quotes and observations into thematic clusters, revealing patterns around discovery behaviors, trust factors, dietary concerns, and brand expectations. This helped identify that mobile-first discovery and dietary transparency were consistently top priorities across all participants.
Empathy Map
The empathy map helped me step into the user's perspective—what they say, think, feel, and do when choosing a local tea shop. This revealed a gap between what users say they want ("I support local businesses") and what they actually do (default to familiar chains when local options feel uncertain or untrustworthy online).
Customer Journey Map
I mapped the end-to-end journey from discovery to repeat visit, identifying key touchpoints and emotional highs and lows. The biggest pain point occurred during the online research phase—users felt uncertain about ALittle Tea CO's quality and authenticity due to the inconsistent branding and lack of storytelling, often leading them to choose competitors instead.
Full Customer Journey Map on Figjam
Based on interview synthesis, I created two personas representing ALittle Tea CO's target customers:
Maya — The Health-Conscious Explorer
A 28-year-old professional who values natural ingredients and supporting local businesses. She's lactose intolerant and frustrated by menus that don't clearly label dairy-free options. Maya discovers new places through Instagram and trusts businesses that are transparent about their ingredients and sourcing.
Lina — The Authenticity Seeker
A 32-year-old who grew up drinking traditional tea and seeks authentic flavors over trendy chains. She values family-owned businesses and wants to know the story behind where she spends her money. Lina is skeptical of places that feel generic or corporate.
I mapped two primary user flows: an Online Ordering flow for customers placing pickup orders, and a First-Time Visitor Research flow for users evaluating the business before visiting. Both flows were designed to minimize friction and support mobile users.
Working directly with the owner, I established a cohesive visual direction based on brand keywords: Cozy, Natural, Friendly, Fresh. The color palette centered on the signature blue from their physical cups and store signage, creating consistency between online and offline experiences.
Typography
Poppins (headers) — modern, approachable, friendly curves
Open Sans (body) — excellent readability, warm and neutral
Color Palette
Primary blue aligned with physical branding, warm neutrals, natural accent colors
Brand Voice
Warm, welcoming, authentic — reflecting family ownership and Fuzhou heritage
I started the design phase with low-fidelity wireframes to quickly explore layout options and establish the basic structure before investing time in visual details. These rough sketches helped me test different arrangements for the homepage hero, menu card layouts, and About section organization.
I then developed mid-fidelity wireframes to establish information hierarchy and test the responsive layouts across desktop, tablet, and mobile. At this stage, I conducted my first round of usability testing to validate the navigation structure and content organization before moving to visual design.
Mid Fidelity Figma Prototype
The final designs brought together research insights, stakeholder feedback, and visual direction into a cohesive responsive system. Key design decisions included card-based menu layouts with visible dietary labels, a storytelling About section split into Our Story, Our Ingredients, and Fuzhou Tea Culture, and prominent CTA buttons optimized for mobile tap targets.
Homepage
The homepage establishes brand identity immediately with the signature blue palette and features a hero section introducing the family story. Featured drinks showcase popular items with pricing and customization options visible.
Menu
The menu uses a card-based layout that displays drink name, brief description, price, and dietary icons at a glance. Categories include Classic Teas, Fruit Teas, Milk Teas, and Coffee & More. Each drink card links to customization options including milk alternatives (oat, almond, coconut).
About Section
The About section is organized into three distinct parts: Our Story (family journey from Fuzhou to Colorado Springs), Our Ingredients (tea sourcing and natural preparation methods), and Fuzhou Tea Culture (educational content about jasmine tea heritage). Content was written in collaboration with the owner to ensure authenticity.
I built a component library to ensure consistency across all screens and make the design system scalable. The kit includes buttons (primary, secondary, and text styles), form inputs, navigation elements, menu cards with dietary icons, and responsive spacing tokens. All components were designed with mobile touch targets in mind (minimum 44px) and tested for accessibility.
I conducted two rounds of usability testing to validate the design at different stages of fidelity:
Mid-Fi Testing
The first round focused on information architecture and navigation. I tested whether users could find store hours, locate milk alternatives, and learn about the family—all using wireframes with placeholder content. This validated that the structure was intuitive before I invested in visual design.
Hi-Fi Testing
The second round tested the complete visual design and interactive prototype. I focused on whether the visual hierarchy guided users effectively, if the brand felt trustworthy and authentic, and whether the mobile experience met expectations.
Test Setup
Key Findings
What Worked
Clear, intuitive navigation — all users found target pages easily
Card-based menu layout praised for displaying key info upfront
Menu customization options (milk alternatives) clearly understood
Overall flow described as "straightforward" and "well-structured"
Iterations Made
Moved featured drinks section higher on homepage
Standardized font sizes to 16px minimum for readability
Enlarged CTA buttons for better mobile tap targets
Added storefront photos to location page
This project reinforced the importance of stakeholder collaboration—working directly with the owner to understand their story and brand values resulted in more authentic content than I could have created alone. I also learned to balance user needs with technical constraints, as the existing QMenu ordering system integration required careful consideration in the design process.
If I had more time, I would have conducted additional testing with actual ALittle Tea CO customers rather than general tea shop customers. I would also explore more deeply how the website could integrate with their social media presence, given that 80% of discovery happens through Instagram and Facebook.
I'm most proud of how this project bridged research and real-world business needs. The owner's authentic story about bringing Fuzhou tea culture to Colorado Springs became the heart of the design, and seeing that story reflected consistently from the website to their blue cups creates a cohesive brand experience. This project showed me how UX design can genuinely help small businesses compete with larger chains by highlighting what makes them unique.
