PERSONAL PROJECT

December 2019

Fuel Coffee Shop

Role: UX/UI Designer & Researcher

Timeline: 4 weeks, 80 hours

Tools: Figma, Sketch, Illustrator, Zeplin

Deliverables: Prototype, Branding

Background

Opened in 2005, the Fuel Coffee shop is located in Seattle, WA. Although the competition is high with other local and large coffee shops in this area, Fuel Coffee shop provides each customer with the highest quality coffee and to redefine the standards of customer service in a unique, friendly, and comfortable atmosphere.

Fuel Coffee has an established presence and customer base. The coffee shop is popular and conveys: friendly, approachable and conscious.

Research

Competitive Analysis

I conducted competitive analysis to identify the top 4 sources of competition for Fuel Coffee and determine their strengths and weaknesses. I chose to evaluate both local and national competitors because both function as a source of direct competition in the coffee industry. To form my conclusions I was fortunate to be able to physically visit all 4 competitors.

User Interviews

I conducted 5 in-person interviews with customers at Fuel Coffee willing to participate. These interviews helped me gain insight into my users’ goals, needs, motivations, and frustrations about their experience with Fuel Coffee as well as their potential digital interactions with it.

While it was challenging to put myself out there in order to get this information, the results led me to understand the users. The interviews were documented so that I could revisit them later.

User Personas

These personas were created to directly represent the research I had just performed. It was a very straightforward decision to create two distinct personas because my research showed two distinct groups of users- those who were 30 and mainly using the cafe as a place to be productive, and those who were over 60 and using the cafe to socialize.

Empathy Map

I created this empathy map using the notes and observations that came from my interviews. This process helped me to organize the results by the patterns I found within them. These patterns led me to several insights, and in turn, the ability to deduce the needs of my users.

Information Architecture

Site Map

Within my define & ideate phase, I also took steps to begin creating the information architecture of this product. I used this sitemap to organize the navigation categories and subpages within this website.

User Flow

This user flow helped me to expand upon the task flow in a less linear way and look more deeply into the various pathways that users may take to complete tasks within this website. I took the tasks and gave them more context and then connected the ways in which my user may need to move through their interactions with this website to accomplish their goals.

Interaction Design

Mid Fidelity Wireframes

Using Sketch, I began to digitally create my wireframes in a desktop size. This gave me the ability to consistently apply paddings and sizing of elements within a grid and also see the visual hierarchy in my design.

Responsive Wireframes

Knowing that a majority of users will access this website from a device other than a desktop, I took special care in how my screens were able to scale. In this process, I used common design patterns and established the sizing & placement of content elements. I focused on keeping consistency across screens & devices.

User Interface Design

Logo Design

Using inspiration from my time spent at Fuel Coffee, as well as the previously defined brand attributes, I began to sketch ideas for a logo. My goal was to create a new, streamlined design that represented the brand in a more approachable way. With each iteration, I narrowed down the options by choosing the strongest design based upon legibility, scalability, usability and overall memorability.

Brand Style Tile & UI Kit

Knowing that a majority of users will access this website from a device other than a desktop, I took special care in how my screens were able to scale. In this process, I used common design patterns and established the sizing & placement of content elements. I focused on keeping consistency across screens & devices.

High Fidelity Prototype

Using the UI Kit and referencing the User Flow, I built a high fidelity prototype in Figma. High-fidelity prototypes may be tested for usability and passed off with redlines and specs for development.

Usability Testing

Synthesizing Results

Through usability testing, I gathered some excellent unbiased results from the 5 test users. My next move was to create an affinity map to help me pull out key insights or pain points and a list of prioritized revisions for another design iteration (and future iterations).

Affinity Map

The key insights (ie: pain points) that arose from the tests informed my top 5 recommendations for the next design iteration. I then worked out the results in an affinity map to identify my priority revisions.

Summary of Findings

After the first round of usability tests, I validated that all users were able to complete the primary task at hand. However, I identified a few key areas that could be improved to clear up any confusion for the user. Further usability testing could occur with the high fidelity mockup prior to hand-off.

Next Steps

As is, this prototype is ready to hand-off to development. My tool of choice would be Zeplin. After shipping, I recommend establishing a regular schedule of user tests to gather more feedback and discover pain points. Design updates and iterations would continue to be prioritized by the impact on usability and ease of implementation.