Cafe Orr - UX Design, UI Design, User Research

Project Details

Problem

Cafe Orr needs a responsive website and rebranding in order to provide a more thorough connection with current and potential customers.

Process

Research
The research phase included gaining an understanding of the current coffee market to get a more thorough understanding of the landscape and where the client fits in the field. This was achieved by looking into market and the customer, as well as identifying challenges and trends.

Goal:
To research the coffee shop market and gain an understanding of the user
Deliverables:
Market Research | Competitive Analysis | Provisional Personas | User Interviews

Market Research

Research was first conducted on the existing statistics, demographics and trends within the industry by examining resources online.

Statistics of Coffee Drinkers

• 72% of Canadians consume coffee each day

• 77% of Canadians visit a coffee shop at least once a month

• Canada is 3rd highest consumer of coffee per capita in the world

• 6.3% of total consumption penetration is at specialty coffee shops

Demographics of Coffee Drinkers

• Men consume an average of 3 cups of coffee per day / women drink 2.4 cups

• 40 percent of people aged 18-to-24 years drink coffee daily

• 54 percent of people aged 25-to-39 years drink coffee daily

• Millennials make up the largest group of coffee consumers, consuming 44% of coffee in the US

Challenges

• Large chains make up the majority of coffee shop business, creating much competition for smaller establishments

• A saturated market makes it harder for coffee shops to stand out from the crowded field

• Lack of a website makes it more difficult for customers do discover the cafe and find important information about its offerings

Trends

• The fastest growing group of coffee drinkers are those aged 13-16 (Generation Y)

• Customers are looking for a full experience at a coffee shop, so use of space and service are increasingly important

• The purchase of specialty coffee drinks is on the rise, especially for female customers

• Sustainability of coffee being offered is increasingly important to customers

Competitive Analysis

Competitive Analysis was conducted to examine strengths, weaknesses and strategies. Direct competitors were established by either a similar business model or close proximity to the client while indirect competitors were large, international chains.

Provisional Personas

Based on the market research, provisional personas were created by generalizing assumptions about demographic groups of existing users. Based on the ages of coffee drinkers as well as the types of customers who visit coffee shops, these personas captured who I believed I would encounter in further research.

User Interviews

Primary research was conducted in the form of 1-on-1 interviews which would provide insight based on real experiences and build empathy with the user. A script of open-ended questions was utilized in order to not lead the participants and to solicit personal responses about their interaction with the client and cafes in general. See the full interview guide here.

• 7 interview participants

• 3 males / 4 females

• Age range from 23 - 43 years

• All first-time or repeat Cafe Orr customers

Empathy Map

Each behavior, experience and comment made by the participants of the interviews were recorded and then grouped by similar traits. First they were grouped by patterns of their experience, then by general underlying themes. These patterns created groups that illustrated commonalities, which informed a list of insights. Based on these insights, user needs were established.

Insights:

• Users like cafes that fit their preferences for ambience

• Users like to learn about a cafe from their online presence

• The location of a cafe is important to customers

Needs:

• Users need a sense of the cafe’s ambience to be provided to them

• Users need a cafe’s site to give them detailed information about offerings

• Users need clear locational/navigational information available

Persona

The research data was further synthesized to create a user persona that was based on observations and patterns established in the interviews. Émilie was created to be the archetypal user and would be the “person” I would look to throughout the remainder of the design to ensure it always stayed user-focused.

POV Statements & HMW Questions

With some insight into the user, I needed to concretely establish the problem. POV statements were created based on insights and needs discovered during primary research and used to provide meaningful and actionable problem statements. To ensure I was solving the problem from the user’s perspective, HMW questions were established in order to spark idea-generation in the upcoming ideate phase.

Brainstorming

To begin generating as many ideas as possible to address the HMQ questions, I conducted a brainstorming exercise that allowed me to come up with a lot of ideas in a short period of time. It didn’t matter if they were the best solutions or even solutions I could realistically consider as the goal was to come up with quantity and hope that some quality came from it.

Goals Venn Diagram

A Venn diagram was created to better understand the goals of the business and user and, most importantly, where they overlap. By establishing these shared goals, I could ensure that I was designing within their intersection going forward, which would truly maximize the value of the product. Technological considerations were also included in order to understand how they would affect the project. See Venn diagram here.

Product Roadmap

Based on the previously-established HMW Questions and taking the business and user goals into consideration, I created a list of features to be included with the goal of answering each question. Organized by priority, this would guide what would need to be included in the design and would could potentially come later should there be limited resources.

Site Map

In order to ensure the design would be able to include the features laid out to solve the established problems, I created a sitemap. This would show all the pages that would need to be created and their relationship to one another.

Task Flow

In order to get a better visual understanding of how the user will proceed through the pages on the site, I came up with three tasks all based on the previously established user goals and diagrammed the pages the user would encounter and the actions they would take to complete the tasks.

User Flow

For a more thorough look at the various flows a user would take to accomplish particular tasks, I created three scenarios and a diagram of users completing various tasks within the scenario. This allowed me to think about the non-linear ways users would navigate the site and take into consideration the choices they would be making along the way.

Low-Fidelity Wireframe Sketches

Sketches of low-fidelity wireframes were created using existing design patterns as a foundation. Various layouts and UI elements were considered in an effort to discover the solution that would work best in the meeting both business and user goals. See complete low-fi wireframes here.

Mid-Fidelity Wireframes

Using the low-fidelity wireframes as a reference, I created responsive mid-fidelity wireframes in Sketch. These would address visual hierarchy, layout and UI elements in an effort to be both easy to navigate and solve previously-established problems. These mid-fidelity wireframes would be used to prototype the design and then as a base for high-fidelity wireframes.

Mid-Fidelity Prototype

In order to get user feedback and identify areas of opportunity, I created a clickable prototype using the InVision app that incorporated mid-fidelity wireframes of all pages that would be needed to complete the tasks included in usability testing.

Usability Testing

I conducted moderated usability testing with random participants in order to get real user feedback and identify any pain points and causes of hesitation. I created a usability testing plan to outline and plan methodologies, subjects and script prior to conducting the tests. See full test planning document here.

Objectives:
1) Test how effectively users can navigate the site
2) Test how users find out if the cafe carries a specific drink
3) Test how users find out what movie is playing on a specific date
4) Test how users discover if the cafe is a suitable place to spend time doing work
5) Identify any areas of hesitation, confusion or difficulty

Results:
Conducting the usability test with 6 participants, I recorded the screen as well as audio while they completed the tasks given to them and thought out loud while they did so. This provided valuable insights that would allow me to make further iterations based on their experiences with the design. See full usability test findings here.

Affinity Map

An affinity map was created in order to synthesize the data collected during usability tests into actionable recommendations to the UI. This was done by recording all actions taken, observations and comments made during the usability tests and grouping them by patterns of commonality. These groups then provided three major insights based on pain points and hesitations which were used to create recommendations to updates prioritized by the frequency of the action and the ease of implementation of the recommendation.

View the full affinity map here

Branding

A visual language for the brand was developed to meet the brand attributes by creating a style tile. This would serve as the building blocks for the high-fidelity wireframes by incorporating a color scheme, typography, logo and imagery that reflects the brand. With this established, I could create a cohesive and consistent visual representation.

UI Kit

To ensure consistency in design in the future and ease the handoff process, a UI kit was created that included all relevant UI elements that would be included in the high-fidelity wireframes. This document serves as a guide to anyone updating the design in the future to maintain consistency and clarity.

High-Fidelity Wireframes and Final Prototype

High-fidelity wireframes were created by incorporating visual elements and branding from the style tile and UI kit into the layouts previously established in the mid-fidelity wireframes. Additionally, all recommendations that resulted from the affinity map were incorporated in the updated wireframes. This included cutting back on text, focusing on imagery of the interior space and adding a filter option to the movies list. The high-fidelity wireframes were then used to create an updated prototype that could be shared with the client and iterated upon further.

See high-fidelity prototype here.

Reflection

In creating a responsive website for a local business, I was able to provide both the client and user with a platform that would meet their goals. Having the ability to connect with current and potential customers through more than social media allows the client to present not only the kinds of information users have come to expect, but express the important differentiators that set them apart from their competitors.

Next Steps

• Prototype the high-fidelity wireframes

• Conduct further usability testing to identify recommendations for improvement

• Design the responsive high-fidelity wireframes

• Update design deliverables for developer handoff