![](https://images.squarespace-cdn.com/content/v1/5b69d632cc8fede2babd89ad/1557167920027-VLWVNQ2O67AMDWE1D33R/fremont-coffee-mockup2.jpg)
Fremont Coffee Co.
Responsive Website Design
![fremont-coffee-mockup2.jpg](https://images.squarespace-cdn.com/content/v1/5b69d632cc8fede2babd89ad/1557167920027-VLWVNQ2O67AMDWE1D33R/fremont-coffee-mockup2.jpg)
Fremont Coffee Co.
RESPONSIVE WEBSITE DESIGN
Client: Fremont Coffee Co.
Timeline: 2 weeks (March 2019)
Scope: User Research, Strategy, UI Design, Branding, Desktop Prototype, Interaction Design and Usability Testing
Role: UX/UI Designer
Team: Self-directed, with feedback from mentor and peers
Tools: Sketch, Illustrator, InVision
The Challenge:
Fremont Coffee Company maintains the original coffeehouse feel while creating organic and fair trade coffee in the Fremont neighborhood of Seattle. They roast all their beans in house and serve delightfully handcrafted latte art drinks.
They want to expand their online presence to show why organic and fair trade coffee is important to support farmers and their communities and protect the environment. They also want to begin selling their coffee online to individual and wholesale customers.
This is a speculative project and I’m not affiliated with Fremont Coffee Co.
The Objectives:
To expand the coffee shop’s online presence by showcasing their organic and fair trade coffee
To create a way for users to shop for their coffee online
To develop a new logo and brand style that better represents the coffee shop
![Letter Copy 3.png](https://images.squarespace-cdn.com/content/v1/5b69d632cc8fede2babd89ad/1556744455604-XR3ACU93CRNCNKUDBVIO/Letter+Copy+3.png)
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.
Overview
Interviewed 5 participants
4 of them lived in Seattle, WA and 1 was visiting the area
2 were female & 3 were male
Ages ranged from 25-55yrs
Goals
Understand why users go to local coffee shops
Understand how users find a coffee shop to go to
Understand how users shop for coffee
Understand users coffee drinking habits
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.
![Wireframes.png](https://images.squarespace-cdn.com/content/v1/5b69d632cc8fede2babd89ad/1555701260094-R825Z1Y9Y1CGO921OFVY/Wireframes.png)
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.
Testing
Tested with 6 Participants
Ages from 25-35yrs
3 Male and 3 Female
Recording the screen as they spoke out loud to complete their tasks
Goals
Discover if users can navigate throughout the site
Identify any pain points the user encounter while using the site
User Tasks
How would you determine if this coffee shop has a comfortable environment for you to work in?
Determine if Fremont Coffee Company offers Oat Milk as a milk substitute
Find their “Bone Shaker House Blend” in whole beans.
Purchase the “Bone Shaker House Blend” in whole beans to have delivered to your house
Learn how Fremont Coffee Co roasts their coffee beans.
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.
High Fidelity Wireframes & Revisions
Lastly, I created high fidelity wireframes with the updated branding in order to have a complete mock up of the site design that is ready to be handed off for development. I used these wireframes to create a final desktop prototype which you can view with the link below.
Reflection
This project I wanted to focus not only on building a responsive site but also on developing my visual design and graphic design skills. I challenged myself by creating an icon set for the menu page and developing a brand for Fremont Coffee Co. that represents their homey atmosphere.
Next Steps
Ready to handoff to the development team for build out.
Continue organizing design deliverables for handoff.
Fremont Coffee Co. will need to make sure they have their supply inventory and shipping procedures ready to implement the online purchasing feature.