Fremont Coffee Co.

RESPONSIVE WEBSITE DESIGN

Research & Empathize

Market Research  | Competitive Analysis  | Heuristic Evaluation |  User Interviews | Empathy Map

Market Research

My first priority of my research process was to gain an understanding of the coffee industry and who are the target demographics. I began by searching online for specific data collected within the last few years. I search specifically for information about the industry, coffee drinker demographics, coffee consumption, and fair trade coffee.

Competitive Analysis

I researched local coffee shops located nearby Fremont Coffee Co. as well as one indirect competitor, a brewery also located in the area. I identified strengths and weakness of their sites to better understand industry trends.

Heuristic Evaluation

To quickly identify strengths and weakness with the current site I conducted a heuristic evaluation. I evaluated the usability based on Jakob Neilson's Heuristics as well as important elements/principles of design.

User Interviews

To better understand the users, I conducted a contextual inquiry with 5 participants who were visiting Fremont Coffee Co. This helped me learn more about users coffee habits and how they select the coffee shop they go to.

Empathy Map

To synthesize my user interview findings, I wrote out each observation from each interview onto sticky notes color code by participant. I then organized the stickies into categories based on how they "think/feel", "doing", "pains", "gains", and "hear/see". Then I identified patterns and pulled three insights. These insights helped me learn the user needs which will be used in the persona.

Define

Persona | POV Statements & HMW Questions

Persona

After synthesizing the user research with an empathy map, I identified demographics based on the users I interviewed and built out a representation of a user from the patterns I identified. This persona will help me reference the user research while designing. This way I can focus on designing for the users needs, goals, motivations, & frustrations

POV Statements & HMW Questions

I put together point of view statements and how might we questions to create a problem statement and a question that we can answer with a solution. First I pulled over my insights and needs from the empathy map and put together the POV statements and HMW Questions in correspondence with each insight and need.

Ideate

Brainstorm | Project Goals | Product Roadmap | Site Map | UI Requirements | User Flow

Brainstorm

Next I brainstormed potential solutions that answer the problem asked in each HMW question. I did two rounds of brainstorming each question for 3-5 mins each to allow my ideas to flow without debating on the solutions.

Project Goals

To compare the user goals and business goals for the site, I pulled the user goals directly from the persona I developed and looked back at my user research. Then I pulled the business goals that were identified in the project brief. I placed both goals into a venn diagram to identify the mutual goals that I will move forward with in designing.

Product Roadmap

Use the the HMW questions that frame the problem and listed out the top three solutions that I identified through brainstorming to solve each problem. Then list out metrics on how these can be measured.

Site Map

To create the site map, I reviewed the competitive analysis and looked back at sites that I identified as having a good navigation. I then looked back at the product road map and the mutual goals to identify the necessary pages for the site. I used these resources to help me build out the site map to show the structure of the site before I start designing pages.

UI Requirements

After developing the site structure, I was able to identify three tasks the users would want to complete on the site based off my user research. I used these tasks to help me identify which pages of the site would be necessary to build out. Then I identified the required design elements that will need to be on each page.

User Tasks

• Purchase coffee online in order to enjoy quality coffee at home

• Find a cozy work environment in order to be productive while working

• Explore the menu in order to know if they carry your favorite milk alternative

User Flow

Next I created the user flow and task flow diagrams below to identify key pages for the site and develop a better understanding on how pages will interact with each other. The user flow shows three paths based on each task identified in the UI Requirements document. The diagram shows a variety of ways a user would flow through the site to complete each task.

Design

Sketches | Wireframes | Brand Identity | UI Kit

Sketches

To ideate layouts for each page, I sketched quickly looking into different design patterns while referencing the UI requirements document. Once I narrowed down the desired layout, I created these low fidelity sketches.

Wireframes

Next, I built these mid fidelity wireframes from the sketches above. Here I can clearly establish design patterns and prepare wireframes that I will use to create the mid fidelity prototype. Next, I created a responsive layout for each page. I included desktop, tablet and mobile screen widths for each page and reduced the grid size from 12 to 6 to 2 columns.

Prototype

Mid Fidelity Prototype

Mid Fidelity Prototype

Once the wireframes were completed in Sketch, I uploaded the files into InVision to create a clickable prototype to use to conduct the usability test.

Test & Refine

Usability Testing | Affinity Map | Brand Identity | UI Kit | High Fidelity Wireframes & Revisions

Usability Test

To test the site design with users and identify any pains points, I went to a coffee shop and offered a free coffee incentive in exchange for testing my prototype.

Affinity Map

To synthesize my findings from the usability tests, I created an affinity map by writing out observations from each participant on individual sticky notes. I then organized them based on patterns then organized those groups into patterns, successes, pains and comments. These patterns help me identify insights which lead me to develop recommendations to make to the design

Brand Identity

To get inspiration for developing the brand and designing the user interface of the site, I created a mood board focusing on the brand attributes; cozy, homey, creative and friendly. The mood board helps me narrow down a creative direction to make final decisions for the branding which is shown in the style tile below.

UI Kit

To keep a cohesive document of the UI patterns used on the site, I pulled the elements from the style tile and wireframes together. This includes any additional elements that will be used on the high fidelity wireframes.