Design Process

Empathize

Research

Through market research, competitive analysis, and user interviews, I set out gain a deeper understanding of the market and Manoa’s customers.

Research Goals

In preparation to dive into my research, I first set some clear goals and created a research plan that would guide my research process.

• Understand the market trends of the Bakery/Cafe industry

• Identify Manoa’s target market

• Identify Manoa’s competitors and evaluate strengths and weaknesses

• Understand how people discover new, local businesses

• Understand the experiences people have online and offline

• Discover pain points that people encounter online and offline

Market Research

I started with market research to understand the general market, consumer, and business trends in order to gain a fuller understanding of the market Manoa is part of.

Competitive Analysis

Following my market research, I started to research Manoa Bakery’s competitors so I could evaluate their strengths and weaknesses. The insights gained here provided key information in terms of the strengths we want to build upon and the weaknesses we want to avoid while keeping Manoa’s specific goals in mind.

Provisional Personas

Using the insights gained from secondary research, I created provisional personas to quickly identify Manoa’s potential users. These provisional personas helped set the criteria for my interview participants and would be validated through user interviews.

User Interviews

Now, it was time to validate these provisional personas through user interviews with Manoa’s customers. During these interviews, I asked open-ended questions to learn as much as I could about their experiences and identify what the user’s needs truly are.

I conducted interviews with 5 people, about 15-20 minutes each.

Some questions asked during the interview:

• How often do you visit bakery cafes?

• Tell me about how you typically discover new local food businesses.

• What motivates you to try a new local food business?

• Why do you visit bakery cafes?

• What factors influence your decision on which bakery cafe to visit?

• Tell me about your most recent experience at a bakery cafe.

After conducting these one-on-one sessions with the participants, I wanted to take all this new information gained and synthesize it to better understand who the users are.

Empathy Map

Using an empathy map, I synthesized all the information I gathered during the user interviews to uncover key insights that led to identifying Manoa’s target user group.

First, I started by categorizing my notes into the categories of Doing, Thinking-Feeling, Seeing, Hearing, Gains, and Pains to get an overall understanding of everything learned during my interviews with the different participants.

This helped me to uncover common patterns that led to key insights which would help me identify what our users’ needs truly are.

User Persona

Through my secondary and primary research, I was able to get a clear picture of who Manoa’s target users are and created a persona that would accurately represent them - meet Ashley! This persona continued to guide my decisions moving forward, making sure my design is centered on who our user Ashley is.

Define & IDeate

Defining the Problems

Now that we identified our target user, Ashley, it was time to identify what actual problems we are solving for based on what we have learned about our user.

To help define these problems, I used the insights gained from research and my understanding of Ashley’s needs to create POV Statements to frame the problem from the user’s perspective. I used these POV Statements to identify How Might We questions which would fuel my process to brainstorm solutions.

Brainstorming

Now that I knew what problems we needed to solve for Ashley, I started my brainstorming process to come up with solutions to those problems. I used the HMW questions that I identified and used those to help me brainstorm different ideas through mind mapping.

Strategizing

From brainstorming, I ended up with a lot of different ideas - now I wanted to strategize and determine which solutions we should prioritize to most effectively help Ashley meet her goals.

Project Goals

Before I could make any decisions on what kind of solutions we wanted to implement, I needed to have a clear understanding of the goals we are trying to meet. These goals would help guide the decisions made moving forward to ensure we are moving towards the right direction.

Product Roadmap

Based on the goals I defined, I started making decisions on what solutions we would prioritize and implement in order to successfully and effectively meet those goals.

Information Architecture

Site Map

Focusing on the prioritized solutions, I created a site map to help define the overall structure of the content on Manoa’s website in a way that would be logical and easy to navigate for our user.

Task Flow

Next, I wanted to learn how the users would be interacting with Manoa’s website. I started by identifying the key tasks Ashley would be completing on Manoa’s website, based on her goals, and the key pages and detailed requirements that would help her complete those tasks outlined in a UI Requirements document.

Using these key tasks identified based on Ashley’s goals, I started to explore how Ashley would interact with the website to complete these tasks by creating task flows.

User Flow

In order to empathize with Ashley further, I created user flows in order to better understand her overall journey interacting with the website - taking a step into her thoughts and the different decisions she would make while trying to complete tasks in different scenarios.

Lo-Fi Wireframe Sketches

Taking what I’ve learned throughout my process to this point, I started to make decisions on how the content on Manoa’s website would be organized based on the project goals we want to meet.

Prototype & Test

Building a Prototype to Test

In order to make sure the design decisions I made in the lo-fi wireframes effectively help reach our project goals, I wanted to get to a point where we could test the design with real users.

Mid-Fidelity Wireframes

Taking the lo-fi wireframe sketches, I digitized them on Sketch and added just enough information for users to be able to navigate through the pages and complete tasks I would present to them during usability testing. These mid-fidelity wireframes would help my focus on what needed to be improved in terms of the functionality of my design. I also created tablet and mobile versions to make sure that the design is responsive and effective across the different device screens that users would be accessing the website on.

Prototype

With the completed mid-fidelity wireframes, I built a limited functionality, desktop prototype on Invision which I would use to help test my design with users.

Usability Testing

With my prototype completed, I started working on a test plan to guide the testing that would be conducted. I then recruited participants and conducted usability testing in order to see how users interact with my design and identify where improvements to the design can be made.

Test Objectives

• Test if users can easily complete the tasks

• Observe the different paths users take to complete tasks

• Assess areas of improvement to improve the usability of the design

Tasks

We asked the participants to complete tasks such as:

1. Learn more about Manoa Bakery Cafe’s background.

2. Find out where Manoa Bakery is located.

3. See what kind of desserts Manoa offers.

Summary

We conducted testing with 5 participants to made observations on how they interacted with the prototype and completed the tasks.

• Method: Remote, moderated usability testing (Think Aloud)

• Participants: 5

• Age: 25-30 years

• Average Time: 7 minutes

• Task Completion Rate: 100%

• Error-Free Rate: 99.4%

Affinity Map

To get a better understanding of all the observations from testing, I used an affinity map to synthesize my findings. This helped me to get a better look at the different experiences users had and allowed draw connections and uncover key insights. These insights would help me identify what improvements would need to be made on our design to make sure we are helping our users painlessly meet their goals.

Amongst the patterns I uncovered, I was able to identify common pain points amongst our participants.

Pain Points

• 3/5 wanted to view more pictures on product details page

• 3/5 users scrolled back to the top after browsing to start looking for a specific item

• 2/5 had some confusion on what is clickable or hover-able in the navigation

• 2/5 weren’t clear on what the two circles under product details are

Based on these pain points, I was able to draw key insights which helped me to identify what improvements I should prioritize on the design.

Priority Revisions

Having identified the specific design recommendations, I started making revisions to my design to improve the design:

Clear Navigation

Users had trouble understanding which navigation items were clickable or hoverable. To make this more easier to decipher, I added an icon clearly indicating which items had a dropdown.

More Photos, Breadcrumbs, & Clear Labels

Through testing, users shared that they wanted to be able to view multiple photos of the food. They also were confused on what kind of information to expect on the details page. To improve this, I changed the design to allow more photos and added clear labels to what kind of information they can expect on the product details page.

The users also often scrolled back up to the top of the page when browsing through the menu to check where they were. To help make it easier for them to find out where they are, I added breadcrumbs to the menu pages.

Branding

Branding

Now that we have refined the overall structure of our website based on what we learned from testing, the question now was - what will it look like? Before working on the UI design, I worked on refreshing Manoa’s branding to effectively communicate their unique brand personality through their website.

Mood Board

To begin the branding process, I started by creating a mood board for inspiration and to set the direction that I wanted to take Manoa’s branding. I focused on finding different elements (color, typography, imagery, and logos) that aligned with their brand attributes: tranquil, homey, friendly, and contemporary.

Logo Design

Now that I knew what direction we were headed towards for their branding, I started the logo design process. I first started by brainstorming different ideas related to their keywords, and then starting sketching out different ideas for logos that would align with those attributes.

After sketching out a number of ideas, I chose the two that I thought would best represent Manoa’s brand and digitized them to visualize which one I thought was the more successful version. I decided to move forward with the croissant/moon which I thought was more effective in expressing their brand attributes and more unique.

Style Tile

Now I worked on compiling everything together and defining the specific direction we will be taking for Manoa Bakery Cafe’s branding. Each decision we made for the branding elements were based off of effectively communicating their brand attributes.

UI Kit

Using the style tile as a guide, I applied Manoa’s branding to UI elements on their website to convey their brand personality though their website and created a UI Kit to help with the coherence of the design moving forward.

High Fidelity Wireframes

Incorporating visual elements in line with Manoa’s branding, I worked on the UI design of the website and created high fidelity wireframes.

Final Prototype

After creating my hi-fidelity wireframes, I created a prototype with the final design.