TEAM: Self-directed with feedback from mentor and peers

ROLE: Lead UX+UI Designer (Research, Information Architecture, Visual Design, Interaction Design)

TOOLS: Sketch App, Illustrator, Photoshop, InVision App

CHALLENGE

Wesley Owens Coffee & Cafe is a popular English-American cafe shop located in the rapidly growing town of Monument, Colorado.

Wesley Owens Coffee and Cafe has a social media presence on Facebook where they remain actively engaged with their community, but they currently have no website of their own.

A fresh modern website would give them a competitive advantage over some of their local competitors who also rely only on social media and 3rd parties to advertise and connect with patrons. To accompany the launch of the new website, I will design new branding and refresh their logo.

PROCESS

MARKET RESEARCH

In order to gain a better understanding of the coffeehouse industry I first conducted high level market research and looked for poignant and insightful statistics. Since the client has only one location and is located in a modestly sized town, I narrowed my market research to the United States and then organized the data I gathered into 3 main categories - Industry Overview, Major Players, and Consumption Demographics. Some of my findings included the following:

CONSUMPTION

Daily Coffee Consumption by Age:

• 18 - 24: 41%

• 25 - 39: 59%

• 40 - 59: 69%

• 60+: 76%

Consumption by Race

• 76% of Hispanic-Americans drank coffee yesterday

• 64% of Caucasian-Americans drank coffee yesterday

• 47% of African-Americans drank coffee yesterday

COMPETITIVE ANALYSIS

After gaining a better understanding of the industry, I focused my attention on the local competition in the immediate and surrounding areas. Since Wesley Owens only has one store, not immediately located off a highway or major thoroughfare, their target demographics are most likely to be the surrounding residents of the town of Monument rather than commuters passing through.

While Starbucks does have a presence in Monument, they also have 3 locations within 4 miles of each other, presenting Wesley Owens with the opportunity to differentiate itself from the massive franchise’s diluted presence. In addition, many of the small “mom and pop” competitors in the area are either solely using social media to engage with and garner customers or have unresponsive and dated websites, leaving Wesley Owens an opportunity to stand out from them as well.

PROVISIONAL PERSONAS

After conducting market research and competitive analysis, I drafted several provisional personas based on my findings and on best guesses or assumptions that might cover the widest swathe of customers who patronize coffeehouses and cafes. These provisional personas provide me with a baseline with which to prove or disprove my assumptions once I have conducted my contextual inquiry interviews.

CONTEXTUAL INQUIRY: ONE-ON-ONE INTERVIEWS

In order to better empathize with coffeehouse cafe customers I conducted one-on-one interviews with 5 participants at Wesley Owens’ cafe in order to learn more about their experiences. The interview consisted of determining if they were repeat customers, what sorts of things factor into their decision to patronize one cafe over another, what sorts of experiences they have had at Wesley Owens or other cafes, and their experiences with a cafe’s online presence. I was also trying to ascertain how important it was for patrons of Wesley Owens to be able to place orders online for carryout.

SCREENING CRITERIA

• Adult

• Are a resident in the area or a regular customer

INTERVIEWEES

• Number of Participants: 5

• Gender: 4 males, 1 female

• Age: 19 - 57 years old

EMPATHY MAP

Using the feedback I got from the contextual interviews with Wesley Owens customers, I constructed an empathy map by identifying key takeaways from each interviewee’s answers and converting them into single-sentence observations. I then grouped these observations into categories that would allow me to suss out patterns and identify user insights and needs.

To see the entire Empathy Map, click the Participants image below.

INSIGHTS

1. Quality food and drink is a common determining factor on how a patron spends their money.

2. Convenient interactions are a determining factor in what cafe a customer chooses to patronize.

3. A comfortable atmosphere is of prime importance to patrons at a cafe.

NEEDS

1. Patrons need to feel confident that they are enjoying quality food and drink.

2. Patrons need a cafe that provides convenient interactions.

3. Patrons need a cafe that makes them feel comfortable with their setting.

PERSONA

From the synthesized research findings derived from my empathy map, “Kevin Morales”, our coffeehouse patron avatar, was born. This persona, which is based off of qualitative data, gives us an ideal representative “customer” who is more in tune with the needs, goals, frustrations, and motivations of the patrons of Wesley Owens. It is with “Kevin” in mind that we will begin to ideate and design our product.

POV STATEMENTS & HMW QUESTIONS

With “Kevin” as our target customer we take the insights and needs from our previous research work and create Point-of-View statements to help frame the challenges we want to address. From these PoV statements we then create How-Might-We questions that give us focus points to brainstorm solutions for.

BUSINESS & USER GOALS VENN DIAGRAM

In order to better understand the relationship between the user’s and business’s goals, while also accounting for potential technical requirements, I created a Venn diagram which would help me to visualize which overlapping goals and objectives they shared with one another. I did this by pulling the user goals from “Kevin”, our persona, and pulling the business goals from the project brief. I then made annotations considering technical requirements and arranged these three perspectives into a Venn Diagram. User goals are identified on the diagram as the Desirability ellipse, business goals are identified as the Viability ellipse, and technical considerations are identified as the Feasibility ellipse.

PRODUCT ROADMAP

Next I created a Product Roadmap with prioritized features, which will give me a set of discrete features to focus my efforts on. I did this by using the How-Might-We questions from the previous design phase and rapidly brainstorming as many ideas as I could for each HMW question within 3 minutes. I then started over and repeated this process to generate more ideas with a shorter time limit. Prioritization was influenced by the desirability, viability, and feasibility considerations from our Venn diagram to ensure our feature choices would have as much impact and value as possible.

SITEMAP

To better visualize how I might structure the content in my design, I generated a sitemap. The sitemap will help provide a high level overview of the information architecture and navigation we want to implement for “Kevin” to be able to use the website intuitively and logically.

USER FLOWS

Creating a User Flow diagram helped me to map out and analyze the flow of two common scenarios determined during the research phase and organize which screens I will need to create to both satisfy the user’s objectives and to produce a functional prototype for testing.

TASK FLOWS

Creating individual Task Flows for Kevin, I was able to examine the series of steps needed for him to complete individual, distinct tasks nested in the user flow scenarios. This helped me identify the information that needed to be presented to Kevin in order for him to accomplish his goals.

SKETCHES

Referencing websites of competitors located both nearby and in more distant cities like Denver, as well as inspirational designs I found on Dribbble, I drafted several versions of sketched wireframes in order to explore possible page layouts. This afforded me the opportunity to consider several different design directions before beginning work on a digitized version.

MID-FIDELITY RESPONSIVE WIREFRAMES

Once I had reviewed the wireframe sketches and determined which design to move forward with, I began digitizing mid-fidelity responsive wireframes in Sketch of key pages informed by “Kevin’s” user and task flows. These early responsive wireframes will serve to illustrate how the design would look on desktop, tablet, or mobile devices.

MID-FIDELITY PROTOTYPE

Before continuing with branding and investing effort into developing high-fidelity wireframes, I wanted to test usability on the mid-fidelity design first, so I created a prototype in InVision based on the the user and task flows defined earlier.

USABILITY TESTING

I conducted one-on-one usability testing with customers at Wesley Owens Cafe using my laptop to validate or disprove any my design decisions made thus far. The results of the testing will be synthesized and used in the iteration phase to improve and refine the design to better serve our persona, “Kevin”. To start, I created a detailed testing plan with defined objectives, a scenario that explains the participants role, and a series of tasks to complete.

OBJECTIVES

• Test overall site design efficiency and user impressions

• Test the overall navigability of the site

• Test how easily a user is able to find information about the coffee at Wesley Owens Coffee & Cafe

• Test how easily a user is able to find the menu

• Test if the user is able to ascertain if there are any gluten-free options are available on the menu

• Test how easily a user is able to find information explaining what the atmosphere is like

• Annotate any point of confusion, frustration, or failure to complete any tasks

• Annotate any noteworthy comments or feedback from the user

• Annotate any unexpected and outlier observations

SCENARIO

You and your significant other (or friend) plan on getting breakfast and coffee from a local cafe this coming weekend, but are unsure where to go yet. A friend on social media recently recommended a place called Wesley Owens Coffee & Cafe located here in town. After checking out Wesley Owen’s Facebook page, you go to their website to learn more.

USER TASKS

1. From the homepage navigate to where you think you can find more information about the coffee at Wesley Owens.

2. From any point in the design, find the menu and while browsing the items, determine if Wesley Owens offers any gluten-free options.

3. From any point in the design, navigate to where you think you should be able to find information about the cafe’s atmosphere and describe what sorts of info you expect to find there.

4. From any point in the design, navigate to where events are listed and add an event to your calendar.

SUMMARY OF TEST

A total of 3 adult women and 2 adult men participated in the usability test at Wesley Owens Coffee and Cafe. All participants were able to successfully complete all 4 tasks given them.

• Number of Participants: 5 (3 women, 2 men)

• Average Task Completion Rate: 100%

• Average Error-Free Rate: 80%

AFFINITY MAP

To synthesize my Usability Test findings I created an Affinity map, with which to identify points of frustrations, failures, and positive or negative feedback with the Mid-Fidelity Prototype. From this synthesized information I derived new insights to inform priority revisions to the design. One of the most useful findings was discovering that some participants had trouble knowing there was more content below the fold and therefore needed more visual indicators to continue scrolling down the page.

BRANDING

To begin I created a mood board to focus the design to refresh the Wesley Owens Coffee & Cafe brand. I then compiled imagery, typography, color palette, and an updated logo into a Style Guide. I wanted to maintain a connection to Wesley Owens’ English-American roots and so kept the Union Jack and American Flag coffee cup in the logo and adopted a red, white, and blue color palette that would both accomplish this and make the site stand out from its competitors with non-standard cafe colors.

HIGH-FIDELITY WIREFRAMES & PROTOTYPE

With a discrete branding schema in place and my mid-fidelity wireframes as a foundation, I created new high-fidelity wireframes while incorporating changes that would address my findings from the usability testing I conducted earlier.

If you would like to review the interactive prototype for the high-fidelity Wesley Owens Coffee & Cafe prototype you may follow the link here or click the button at the top of the case study.

CONCLUSION

REFLECTION

While this project was fairly straightforward in principle, I found that the greatest challenge was in creating a cafe website that both stood out from the competition, but was also simple enough to meet the needs of the user. It needed to be modern and attractive, but also not inundated with superfluous features or gimmicks that would cause friction for their patrons. I found after conducting contextual interviews I had to reassess the product roadmap due to early design assumptions being disproven during research and testing. For example, initially I had assumed that there would be high demand for a mobile ordering option for customers to pick up orders to go. However, throughout the course of my time spent at the cafe and interviewing its patrons, I discovered that customers were most interested in the cafe for quality products, convenient service, and a comfortable atmosphere - with little to no interest in mobile ordering. This resulted in moving the mobile ordering feature off the priority list for design; perhaps to be re-explored in a later iteration. 

Wesley Owens patrons were less interested in getting in and out fast and more interested in gathering there and spending time at the cafe itself. This sentiment was also reflected in the type of atmosphere that the owner, Fabian, was trying to foster. He wanted a cafe that served ethically sourced coffee and was very community focused. While spending a portion of my time at the cafe for research, I ordered food and coffee as well and was able to immerse myself in the user experience where I saw first hand how many people enjoyed conversing with the owner and enjoying the cafe together with friends, family, and colleagues. I attempted to reflect these values in the webcopy used on the design in order to differentiate them from franchises like Starbucks, but also created a brand and design that stood apart from the more common cafe design choices used by local competitors in the area.

NEXT STEPS

• Hand-off design specs and UI Kit to developers and stakeholders

• Continue to iterate upon the design based on feedback from further usability testing

• Design mobile and tablet prototypes and conduct testing for each

• Design and prototype lower priority or new features based on needs