Many restaurants have been affected by the pandemic. Reaching their customers in different ways has been a top priority during this time. Increasing their online presence will help continue to operate their business while serving their customers safely.

The Challenge

Highlight Coffee is a small local coffee shop that opened its doors 6 years ago. During COVID-19, many food and beverage shop shut their doors down. Those without a good online presence were affected greatly. This included Highlight Coffee. Highlight Coffee wants a new kind of service to offer their customers in order to continue serving them safely. They want a new kind of service to offer their customers in order to continue serving them safely.

Business Opportunity

Highlight Coffee has the opportunity to expand their service, reach more customers, and continue serving safely amidst an unprecedented time.

THE SOLUTION

Transform Highlight Coffee’s website to a functional and responsive website that allows customers to order ahead of time

Starting the Research

Putting everything in place

Going into the research phase, I had the assumption that customers would want an option to order online. This was based on my brief analysis of different competitor websites that are out there. As I began my research, I flushed out this process by creating a research plan. I wanted to guide my research by identifying my assumptions, questions, and goals.

After crafting my research plan, I decided to conduct a secondary research in order to solidify my understanding of the current state and future projections of the coffee industry.

Riding waves in the coffee industry

The current state of the coffee industry is at its peak due to many waves in the market. The first and second wave put coffee on the map of customers. However, the third wave coffee movement put craft coffee on coffee consumers’ radar.

But you may ask, what is craft coffee? Craft coffee is coffee that is made from high quality beans, which means flavor profiles (fruity, floral etc.) are more enhanced when brewed.

Coffee is no longer seen as a "beverage" but seen as an educational tool.

The Third Wave Coffee movement created a whole new experience for the coffee consumer. It highlighted every step of the process from farming, roasting, how the coffee is made by the barista, and to the customer consuming it.
‍
With this boom in the coffee market, there is a projected growth in the next few years.

Drivers of the coffee market growth

This current growth in the third wave coffee market is driven by Millennials and Gen-Z’s. Having this knowledge, this gave me the confidence to recruit Highlight Coffee customers within this generation for user interviews.
‍
From this phase, I’ve also found that online ordering is an expectation from customers. It’s no longer a nice-to-have feature.

Learning from the coffee community

From looking at competitor websites, I’ve learned many insights that I can take with me throughout the design process. Many websites were visually appealing, discoverability of information is key, and online ordering is always an option.
‍
There were some struggles as well such as non-intuitive placement of information and information overload for the user.

Learning from Highlight Coffee customers

Remembering what drove the growth of the coffee industry, I recruited 5 local coffee consumers. At this point, I crafted an interview guide to guide my interviews and listened to their coffee experiences.

To synthesize my findings, I used an empathy map to help me uncover patterns that lead me to the user’s true need.

Audrey the coffee afficionado

Audrey's persona helped me create a representation of all user needs, motivations, frustration, and goals. When making design decisions, I referenced this persona to make sure I'm designing for the user.

Defining the Problem

Framing the problem

To define the problem, I crafted point-of-view statements and HMW questions to have clear and actionable problem statements. This helped me move forward with brainstorming for solutions.

Opposites do attract

Thinking of the opposite made it easier to come up with ideas while using mind mapping. Instead of thinking what will help Audrey, I thought of what would not help her.

So for my second round of brainstorming, I turned all the HMW questions into “How Might we Not” Questions. From there, a lot of solid ideas came to fruition.

Seeing both sides - business and the user

To be successful in this project, I needed to align the business goals and user goals together. Since this was a speculative project, it was hard to get the true goals of the business. To identify some of them, I read articles and interviews from Highlight Coffee’s business owner.
‍
With both business and user goals defined, it was a challenge to align specific individual needs together. Looking at the overarching themes helped with identifying that discoverability is important.

List of solutions but what to work on first?

After brainstorming, I had a list of features I wanted to include. To prioritize the features and to know what to work on first, I created a product feature roadmap. This way, I know what features are under my P1 list and what features would be most important to build a MVP.

Understanding the interaction

I started this process by analyzing the information architecture from what I’ve gathered during competitive analysis. Since coffee shop websites are fairly similar, I had a hypothesis that how the content was currently organized aligns with the mental model of users.
‍
I conducted an open card sorting exercise to validate my thinking. As a result of the exercise, the existing information architecture of the other local coffee shops aligned to the users’ thinking. From this, I was confident to move forward with creating the site map.

Using a task flow allowed me to see what the user can achieve while navigating the site. This also further flushed out the content needed to be able to complete the tasks.

Expanding on the task flow, I created a user flow to see a more in depth pathway of what pages, actions, and decisions a user can take while completing the tasks. This allowed me to see and anticipate other use cases that could potentially occur.

Creating Design Solutions

Designing with the user in mind

Sketching many different ideas out allowed me to get as many possible wireframes as I could.
‍
Sketching also gave me the time to play with where to put breakpoints and think about how the experience would be for mobile and tablet. From these sketches, I chose the best version that I changed to a mid fidelity version.

Seamless experience from desktop to mobile

Customers will be able to view the menu and order ahead from the comfort of their homes to when they’re on the go. They will be able to access the website across multiple devices.

Putting it to the Test

How usable is it?

Testing early was important so I can assess whether the current state of the prototype is usable. Before transforming the mid fidelity prototype into a high fidelity version, I wanted to figure out what can be improved.

I recruited some testers and outlined my testing goals using my usability test plan.

Before testing, the checkout process was a 3-step process and the user would have to go through multiple pages. During testing, I've found that users value their time and efficiency. Making the checkout process under one page made the process shorter and faster.

Branding

This was another obstacle that I encountered throughout this project. Being unable to communicate with the business, I wasn’t able to identify how they branded themselves. However, from their social media channels, I was able to gather information on how their customers view them.

I chose brand attributes to begin defining the UI part of the project. I created a mood board for inspiration and finalized the branding elements using a

Putting It All Together

Taking what I learned from research to testing, I wanted to make sure that the experience for the user was seamless. Ensuring the consistency of the website, not only the design but the experience, was key when creating the final mockups.

View prototype

Reflection

Data-driven research leads to confident design decisions
‍
When I iterated my designs, I felt confidence in doing so, most especially when these changes were backed up by my research and findings. This was one major area of improvement for me (and proud of!) because I wanted to improve on how to defend my design choices, iterate confidently, and to discuss them with other collaborators.

If I had more time with this project, I would test the checkout process again to see if it was a more efficient process for the user.