top of page
iMac mockup.png
iPhone x tilted left.png
Silver MacBook in front view (1).png

Tierra Mia Coffee

Designing an Online Order Experience for a Local Cafe Shop

Overview

  • Tierra Mia Coffee Company is a famous specialty coffee retailer and roaster that operates fifteen retail locations in California.

  • We discovered that Tierra Mia Coffee website

    • ​Lacks enough product information

    • Provides an inefficient & unpleasant user experience without any interaction design.

Result

  • In order to increase traffic and build up trust, we redesigned the website with features so that people can place orders, search locations and hours, see reviews and so on.

  • At the same time, we built responsive web design for people who can't access their desktop or tend to use mobile. 

Role

Led UX/UI designer in a 3-member team. Designing

wireframing, user Interfaces, prototyping & interactions/visuals.

Prototype

The Desktop Hi fi prototyping

The mobile Hi fi prototyping

User Research

User Research

Survey and Interview Takeaways

  • Goal: What does user mainly do to a coffee shop website? 

  • 84% of participants regularly go to a cafe.  

  • Almost 1/2 of participants think drinks or food are the most important in a coffee shop.

Mask Group-1.png
Mask Group.png

  • The primary demand for information people look for on coffee website is menu, while Terrie Mia doesn't have menu, even without too much information about their products.

  • Popular apps they use: 

    • ​Maps

    • Yelp 

    • Starbucks 

  • Thoughts from users

    • The website overall is too simple, not welcoming and interesting. It doesn't have branding information and great UI design, so users are hard to be attracted without seeing its voice and tone.  

User Analysis

User Analysis

User Personas

Based on research data, interview observations and online survey, we defined our user persona Jacob to help cultivate the next stage of ideation. 

Here is the our User persona Jacob

Storyboard

Updated Storyboard.jpg

The storyboard is a powerful way to visually present the information. This helps us step into customers shoes and see our product from customer's perspective. 

Feature Prioritization

We conducted an I like / I wish / What if activity which is a structured way of organizing feedback that is gathered from our testing sessions. We picked up the most feasible and impactful features that we would like to incorporate into our website.

We picked up the most feasible and impactful features that we would like to incorporate into our website.

Card Sorting 

​ Above is Card Sorting Process

We used open card sorting exercise to define our categories in navigation, so it can provide options for users to find goal and needs quickly on the website. 

Site Map Redesign

In terms of the result of card sorting, site map was finalized and structured with a list of pages of a web site. From this information architecture, it illustrated the most feasible and impactful features that we would like to incorporate into our website.

We built the site map to have a clear information structure
Wireframe

Wireframe

Paper Sketch & Wireframes

Here is the paper sketch
Here is the paper sketch
Here is the paper sketch
Here is the paper sketch

Low Fidelity Prototyping & Testing

This is low fidelity prototyping
This is the low fidelity prototyping that I made

This is the low fidelity prototyping that I made

Visual Design

Visual Design

Design System

We wanted to convey the classic and modern style across the whole website.  

 

We chose Roboto, Montserrat and Avenir as our main font styles.  We use warm toned photos, modernized illustration and linear icons to convey healthy and clean brand culture. In addition, the original logo is kept into new website as it fits overall the new design style with the same color combination. 

Style Tile (1).jpg
Achromatopsia vision.png
Achromatomaly vision.png
Tritanopia vision.png

Achromatopsia vision

Achromatomaly vision

Tritanopia vision

For the sake of improving website readability, we tested three different color blindness visions to see if the UI style is still accessible for these types of people.

 

This result shows that the button styles can be identified and images are clear enough to be recognized even the color palettes look very different compared to the original one. 

A/B Testing

Based on the low fi wireframes, my teammate and I created two versions of mid fi prototypes. The purpose of this A/B testing is to compare and pick out the better option from the two versions of UI design and collect usability feedback to complete hi fi prototyping.

Testing Results Summary:

  • Version B has clearer images with yellow warm tone background that can make users' eyes more comfortable and be more willing to browse website. 

  • Order Now button Version B is easy to identify, but white text on button is sort of too light. 

  • Both A and B Navigation bar is clear, but user is confused with the difference between Pre-Order and Order Now button. 

  • Both A and B Search Bar can be shortened as an icon to have more space for Sign In button for maintaining royal customers. 

​ Version A


Version A

​ Version B


Version B

UI Design

Based on research, we built responsive web design for smartphone users.

  • We noticed Tierra Mia might need to hire some employees urgently according to its original website, so we wanted to make it noticeable by adding this into navigation with yellow highlight.  

  • Order Now button is catching the eyes of people that they can make an oder right away.

  • Sign In button has been moved to Ads Bar at top to be less crowded with other icons on the right up corner.

  • To solve users' pain points, we created Location (within hours inside with different addresses), Reservation, Review section and About Us section to give more branding introduction for new customers.  

Web Design

This is the Web Design that I made

Responsive Mobile Design

This is the Responsive Mobile Design that I made

Prototype

Usability Testing

After building up hi fi prototyping, I conducted several usability testings and gained insightful user comments. These valuable

feedback would become a huge help into the next stage of prototyping iteration.  

Example of Comments

User feedback

User feedback

Future Steps 

At the end of this Tierra Mia Coffee Redesign project, we reached out to the store owner at Oakland.  He was very excited about our project and wanted to see the final prototypes after Covid-19 pandemic is gone. 

At the same time, here are some directions we might consider to take and polish our project in the future. 

  • A Reward Program to maintain royal customers with providing free coffee and food.

  • Develop Reservation feature on the website and build up Real-Time System which can update available spots instantly. 

  • Analyze the Conversion Rate and Returning Visitors for KPI.  

  • Need to make further research to see if necessary to build Mobile App. 

bottom of page