Role: Product Designer

Skills: Branding, Logo, Marketing, User Research, Interaction, Visual Design, Wireframes, Prototyping & Testing

Tools: Figma, Photoshop, Illustrator

Project Duration: 50 Hours

Prototype: Milos

Since 2015, Milos Coffee Roasters has built a loyal following in San Diego by roasting high-quality, ethically sourced beans and creating a warm, welcoming café vibe. As interest in their coffee grew, they realized many fans couldn’t easily get their beans without visiting in person.

I saw three main issues to tackle:

• Fans wanted an easy way to buy Milos beans online, anytime, anywhere.
• The café’s farm-to-cup story and roasting details weren’t available online, making it hard for new customers to connect with the brand.
• First-time buyers needed confidence in Milos quality and ethical sourcing before clicking “buy.”

Key pain points identified

• No easy way to buy online: Fans love Milos beans but can’t shop unless they visit the café in person.

• Missing brand story: The farm-to-cup journey and roasting details live only in the shop—online visitors don’t get that connection.

• Unclear product information: Without roast levels, flavor notes, or origin filters, it’s hard to find the right coffee.

• Competitive disadvantage: In a crowded coffee market, not having an e-commerce site makes Milos look behind the times.

My goal was to bring Milos’s friendly, community-focused spirit into a straightforward online shop. I needed to balance inviting storytelling with clear product information, so visitors could learn about each roast, filter by their preferences and feel good about every purchase.

To design an online shop that truly feels as welcoming and intuitive as walking into the Milos café, I leaned on both in-person chats and stakeholder insights. Here’s a closer look at the four key customer groups I focused on:

To ensure Milos’s e-commerce site stands out and meets real customer needs, I combined stakeholder info with competitor analysis. Here’s what I found:

Competitor & Market Analysis

Direct Competitors

• Dark Horse Coffee Roasters: Clean product pages, clear origin details, and strong subscription options.

• Bird Rock Coffee: Emphasizes local San Diego roots with rich storytelling and high-quality imagery.

• Jaunt Coffee Roasters: Focuses on educational content—brewing guides and farmer spotlights.

Indirect Competitors

• Starbucks: Best-in-class mobile app with quick “order again” and loyalty rewards.

• Dunkin’ Donuts: Simple, speedy checkout and frequent promotions/subscription tiers.

Opportunity for Milos

• Bring together the storytelling depth of direct competitors with the seamless reordering and loyalty features of big chains.

• Lean into Milos’s local café community vibe to differentiate from national brands.

Key Insights

Subscription + Discounts

• A must-have for busy pros and enthusiasts alike.

Deep Transparency

• Roast dates, origin stories, and farmer profiles build trust.

"Quick Add" option from Home and Products Page

• “Quick Add” option so users can add products to their shopping carts without opening the product page.

Rich Visual Storytelling

• Photos of the café, beans, and roasting process deepen the brand connection.

Mobile Checkout

• Since most customers shop on their phones, once the desktop flow is finalized I’ll adapt it into a streamlined, mobile-first checkout. This means a single-page layout, minimal taps and fast loading so users can complete their purchase quickly and effortlessly.

With clear insights in hand, I moved into sketching and wireframing to map out the core user flows:

The goal of Milos Coffee Roasters homepage design is to produce an engaging online experience that instantly reflects the company’s love of craftsmanship and quality. The main goal is to build trust and engagement by guiding users smoothly from brand introduction to product discovery.

I structured the homepage with a strong visual hierarchy. To guarantee instant engagement, the hero section features a full-width, high-resolution image together with a clear tagline, a short description and a noticeable call to action. Users can easily find product specifications, our story, coffee subscriptions, coffee-related products and a footer with relevant links and a subscriber form. A consistent experience is guaranteed on all devices thanks to the responsive design, and accessibility was carefully considered with the use of suitable color contrasts and legible typography.

Key Decisions

• Emphasized storytelling to connect users emotionally with the brand.
• Integrated clear and direct navigation to reduce friction.
• Chose warm, inviting colors that reflect the artisanal nature of our coffee.

Objectives & Approach

• Purpose: Assess the website’s ease of use, navigation, clarity of product information, and the checkout process.
• Method: Five participants, representing a mix of ages and tech skills, performed six task-based scenarios (navigating to product categories, finding a specific product, returning to the homepage, completing a purchase, and locating support information) and provided overall impressions via post-test surveys.

Key Findings

• Navigation: Participants successfully located key sections (e.g., “All Coffee” category and product pages) with a 100% success rate. Confusion arose due to ambiguous menu labels, users often misinterpreted “Menu” and “Our Cafes” when trying to locate product categories.
• Product Discovery & Homepage Navigation: Finding specific products (like “Midnight Roast”) was quick and efficient. Returning to the homepage was straightforward, primarily via clicking on the logo.
• Checkout Process: The checkout was efficient (100% success rate with an average completion time of 15 seconds). A notable issue was that users became frustrated when they encountered an extra product in the shopping bag that they could not remove.
• Support/Contact Information: Locating customer support details was generally easy, though one participant suggested a more prominent contact link in the main menu.
• Overall Satisfaction: The site received high satisfaction ratings (average score of 9.4/10), with users praising its clean design and intuitive layout.

Navigation Enhancements

• Renamed menu items for clarity, changing “Shop Coffee” to “Our Coffee” and “Our Cafes” to “Locations.”
• Added sub-menu items like “Menu” and “Order Ahead” to logically group purchase-related links.
• Included a clear “Contact” link in the main menu to make support information more accessible.

Checkout Process Adjustments

• Clean Prototypes: Ensured that prototypes start with an empty shopping bag to avoid user confusion and frustration from unintended extra items.
• Avoiding Negative Patterns: Addressed the issue of the undeletable extra product, which was perceived as a potential “dark pattern” that could harm user trust.

Overall Impact

The usability testing confirmed the website’s strong foundation in terms of design and functionality. However, targeted changes, especially in navigation structure and the checkout process, were recommended to further enhance the user experience and minimize any friction during the customer journey. These insights and improvements were integrated into the next iteration of the website design to ensure a more intuitive and satisfying user experience.

Final Design: Figma Prototype

Branding & Brief: Final Report PDF

Wireframe: Figma (Web&Mobile)