Tierra Mia Coffee

Full Website Redesign & Responsive Design

Overview

Tierra Mia Coffee Company is a famous specialty coffee retailer and roaster that operates fifteen retail locations in California. The company roasts all of its coffee bakes all of its pastry offering sold its stores. However, we discovered that Tierra Mia Coffee website lacks enough information and provides an inefficient and unpleasant user experience without any interaction design. 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

Performed all the roles as UX designer and UI designer in a 3-member team.

Timeframes

3 weeks.

Method & Tool

Method: User Research, Heuristic Evaluation, Competitive Analysis, Persona, Storyboard, Site Map,  Wireframing, Hi-Fi                          Prototyping, User testing 

​Tool: Figma, XD, Illustrator, Photoshop, Google Suite, Artboard Studio

EMPATHIZE

Primary Research & Insights

Before we redesigned coffee website, we started to research if there is a need to a great website for local coffee shops. A website is a place where company can maintain customers and expand online business. According to Google, 80% of customers use search engines to look up businesses in their local area, and 50% of them visit a business they've searched within 24 hours. From Forbes' data, 82% of people will consult their smartphones on orders which they are going to make in store. In another word, websites are one of essential methods for customers to search for businesses to determine if they are willing to buy products, and responsive web design on mobile is playing a vital role since a large amount of people like to use smartphones to search. 

In order to gain insightful user thoughts, we conducted both qualitative and quantitative research - interview and survey, to understand what kind of top elements Terrie Mia's website needs to include and the reasons behind it.

 

During the one on one interview process, we collected local users' main pain points where our redesign should focus. The priority is to improve user usability, reorganize information architecture and create visual design. We collected the survey data from 43 countrywide participants, to analyze customers' needs and goals for general coffee shops. 

Liz, 24 year-old virtual assistant

"My work environment is fast-paced and I wanted to find some useful information online before I go to order in store, like menu, hours and reviews. I wish the website is simple to use as well. "

Mark, 30 year-old engineer

" As Engineer, we have opportunities to work remotely. I am tired of working from home, I would like to find a great place which provides food and peaceful ambience to make my work productive." 

Heather, lawyer 43 year-old 

"Taking my kids to school and then going to work is my weekday routine. I hope there is an easy way to order a ready-to-go coffee on Terrie Mia." 

What is the most important for you in a coffee shop?

Almost half of people care about drinks or food at a coffee store, so having the branding with providing high quality food is essential to coffee companies.  ​

Almost half of people care about drinks or food at a coffee store, so having the branding with providing high quality food is essential to coffee companies. 

What information do you look for on a coffee website? 

The 37.9% is menu, followed by locations, hours, but Terria Mia doesn't have either of these included.

The 37.9% is menu, followed by locations, hours, but Terria Mia doesn't

have either of these included.

Survey and Interview Takeaways

  • 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.

  • 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

Heuristic Evaluation

Here is the Heuristic evaluation
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.  

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.  

Usability Testing

We picked Five Second Test as our usability test to see this coffee web pages are effectively communicating their intended message. Thus, we invited 5 people to participate and asked them the same questions below:

  • Can you recall the company or product name? 

  • What was your first impression of the design?  

  • Did the design/brand appear trustworthy? 

Only 1 person accurately recalled the brand name, and the website purpose is not clear.

All of them think the website is not attractive and trustworthy for a coffee website, and the content has too much overwhelming text so that they don't know where to focus.

UX Competitor Analysis

In order to know more strength of Tierra Mia Coffee and make the website more user-friendly, we analyzed Tierra Mia Coffee's competitors in depth. Here are what current pros and cons for Tierra Mia Coffee. 

 

Pros:

  • Famous for its great coffee beans

  • Wide ranges of drinks and pastries

  • A specialty coffee retailer with cozy welcoming environment   

Cons: 

  • Website design not appealing 

  • No branding information 

  • Poor readability 

Here is the Competitor analysis we built

Here is the Competitor analysis we built

DEFINE

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

Here is the our User persona Jacob

User Needs & Problem Statements

Strong aspects and ideas through research were captured on sticky notes, and then we created problem statements:   

People that work remotely looking for quiet spaces with good coffee and environment to be productive. We discovered that people in the city have trouble finding important information like menu, hours and locations at Mierra Mia Coffee's website. 

​ We built our Affinity Diagram
​ We built our Affinity Diagram

We built our Affinity Diagram

IDEATE

Storyboard

Updated Storyboard.jpg

Here is the Moodboard that we made.

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 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 conducted an I like / I wish / What if activity which is a structured way of organizing feedback that is gathered from our testing sessions.

Here is the Feature prioritization

Here is the Feature prioritization

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 & Site Map Redesign

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. In terms of the result of card sorting, site map was finalized and structured with a list of pages of a web site.

​ Above is Card Sorting Process

Above is the Card sorting process

We built the site map to have a clear information structure

We built the Site map to have a clear information structure 

Paper Sketch & Wireframes

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

Here is the Paper sketch we drew

Example of Comments

PROTOTYPING & TESTING

Low Fidelity Prototyping 

This is low fidelity prototyping

This is the low fidelity prototyping that I made

Moodboard

This is the Moodboard that I made

Moobdboard

A/B Testing & User 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 style Tile

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. Below 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. 

UI style Tile

 We wanted to convey the classic and modern style across the whole website, so 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. 

Achromatopsia vision

Achromatopsia vision

Achromatopsia vision

Achromatomaly vision

Tritanopia vision

Tritanopia vision

Responsive Web 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.  

This is the Web Design that I made

This is the Responsive Mobile Design that I made

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

High Fidelity Prototyping 

After incorporating usability testing feedback, I made iteration on hi fi prototyping. 

Desktop Hi fi prototyping

Some examples of desktop Hi fi wireframes

Desktop Hi fi prototyping

The Desktop Hi fi prototyping

Some examples of mobile Hi fi wireframes
Mobile Hi fi prototyping

The mobile Hi fi prototyping

Some examples of the mobile Hi fi wireframes

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 fulture. 

  • 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

  • Take research and analyze if there is need to build Tierra Mia Coffee app.    

Let's get to know each other !
  • LinkedIn
  • White YouTube Icon
  • White Instagram Icon

Designed by Jiani Chen 2020