coffee break
creating a responsive website design for a community-loved coffee shop
summary and scope
I created a responsive website for a local coffee shop called CoffeeBreak in Bismarck, ND. There was no website prior to this design. This was the second capstone project for Phase 2 of my DesignLab UXA course.
The website was replicated into Squarespace to be used by the business.
overview
my role
UX researcher UX designer
project period
April 2024 to June 2024 (~65 hours)
skills
ux research, affinity mapping, information architecture, wireframing, prototyping, usability testing
design process
define → research → analyze → design → prototype → test → iterate
the problem
lack of a responsive website
With online shopping as a major platform for purchasing products, small businesses need to have accessible websites to showcase what they have to offer. Coffee Break is in need of a responsive website to visualize and organize their menu, products, and information, and to increase usability so customers can more easily find what they are looking for.
better understanding the problem space
First, I needed to identify the problems users face when using small coffee shop websites. To find this information, I conducted user interviews and created a survey to receive responses from actual customers of Coffee Break.
Research also involved analyzing possible competitors to find key opportunities, which included these other local coffee shops: Mighty Missouri Coffe Co., Classic Rock Coffee and Kitchen, and Cappuccino on Collins.
competitor analysis
Competitor analysis allowed me to find opportunities for a platform to fill the gaps of what’s currently available to users, and to utilize what users are already familiar with when they visit coffee shop websites.
I found that the standard for these websites is typically to have a home page, menu, about page, and contact information. Many times, users aren’t looking for more information than this.
what do we want to learn from the interviews?
Determine what motivates users to use coffee shops’ websites and what they hope to accomplish.
Understand why and how often users choose to shop for coffee products online rather than in-store.
Discover what information helps users make decisions about what products they want to buy.
Discern if there are any difficult or frustrating parts of using these types of websites overall.
Determine what draws users to interact with or withdraw from CTAs.
analyzing the results
affinity mapping & survey results
I used affinity mapping to bubble up key insights from the user interviews, and I included data gathered from an online survey for Coffee Break customers.
The most common motivation for users to visit coffee shops is to do work in a cozy and comfortable environment, but other users mentioned motivations to be meeting up with friends, stopping for a quick drink when they are tired, and to break up their errands on a day out.
Users typically visit local over chain coffee shops for the atmosphere, community, and just because they want the business to do well.
key insights from user interviews
On smaller food/drink websites, some common issues are lack of attention to small details, formatting errors, and difficult navigation.
For local shops, users typically don’t seek out online ordering, but it can be a plus to have. Users generally only order online from larger coffee shops.
Once the pain-points were defined, it was time to start brainstorming solutions. I identified “point of view” statements, which I then simplified into “how might we” questions to guide the direction of my brainstorming sessions.
ideation to prioritization
user personas
Next, I developed a persona for the client to showcase his needs as the business owner, as well as a user persona to encompass a typical user of a local coffee shop website.
comparing business vs. user goals
Before developing features, I also compared the business vs. user goals and noted potential technological constraints, which was especially important because of the business owner’s limited abilities to work with websites.
prioritizing features
After the personas and goals were identified, I prioritized which features would be best suited for this website. The features are very basic and simple, so as to not be too complex for the business owner to edit.
information architecture
site mapping
Using information from the competitor analysis and user interviews, I created a sitemap for the website to provide a basic structure. Because coffee shop websites typically don’t have a lot of content, the site map was very simple.
interaction design
user flow
Next, I created a user flow to showcase website navigation, which created an outline for wireframing.
low-fidelity wireframing
After the flow was developed, I sketched low-fidelity wireframes for both web and mobile versions of the screens.
These lo-fi wireframes were helpful at this stage in the design process because they took little time and effort, were easy to change, and provided the guide for higher-fidelity wireframes.
mid-fidelity/digital wireframing
Then, I transferred the sketches into a mid-fidelity digital form, which I used to conduct simple navigation usability tests.
user interface design & branding
moodboard
Before moving on to high-fidelity wireframes & prototypes, I needed to develop a brand. I first identified the brand values, and then created a moodboard that depicted those values.
developing a logo and style tile
Based on the brand values and the moodboard, I sketched up logo possibilities. My final logo is based off an iconic neon sign in the coffee shop’s window, so it is very recognizable to customers. After the logo was complete, I put all UI elements together into a style tile.
After conducting research, making it through mid-fidelity wireframes, and establishing the brand, it was finally time to put everything together in high-fidelity mockups. Once the wireframes were completed, I created prototypes to follow the user tasks that were decided early on in the design process.
high-fidelity wireframes
Once the prototype was ready to go, it was time to finally put it in front of users. To conduct my usability testing, I used a platform called Maze where users could complete the given tasks, as well as answer some questions throughout and after the process.
planning for usability testing
through testing, I wanted to accomplish this goal: →
“To find if users can easily complete the given tasks and find the information they are looking for on a coffee shop website; additionally, to ensure the 5 usability principles are met.”
the given tasks were very simple:
Website tasks:
The user wants to place an order by calling ahead.
The user wants to find important information to know about the shop.
Mobile site tasks:
The user wants to see the menu and order ahead.
The user wants to read the most recent news/articles related to the shop.
analyzing & prioritizing test results
Redesign Menu page- most likely, this will be done through Canva as originally planned, with extra care to make sure it scales correctly.
Possibly cut down the menu size in general- with client approval, remove the Specialty Lattes, and only include some Best-Sellers or Favorites
Change Community tab to “News”, or move it entirely to the About page
Consider an ordering CTA on the home page
This may not be the best option, though, because an overwhelming number of calls may be difficult for the client, who is the only employee at his shop.
actionable recommendations
new menu design
final high-fidelity screens
In this project, I worked directly with a client who wasn’t tech savvy, so that was a challenge. I learned ways to be flexible, and I got a lot of practice trying to balance what is useful for users vs what is attainable to create based on client needs. I was able to practice client communications to a certain degree- based on just in-person interactions, since the client didn’t want to communicate over email or phone.
I really enjoyed the UI/visual design and branding aspects of this project. I also enjoyed being able to work on desktop screens vs just mobile screens, even though in the workplace it will likely be a lot of working on apps.
Also, my client was very flexible which was nice, but it was also difficult because I was somewhat left without a sense of direction, which left me questioning many decisions. He had very limited tech skills, so that limited what I was able to include on the website.
overall takeaways
The users’ needs and goals were fairly similar to the client’s, but because of his need to not have to maintain/update the website, I was not able to include online ordering or showcase the in-store products. In the end, the website accomplishes the main goal of showing the atmosphere of the shop, as well as giving guests an opportunity to view the menu ahead of time.
One major takeaway I learned in this project is that during usability testing, especially if it is unmoderated, I need to be a bit more clear how I explain the tasks. One task was difficult for users to complete simply because the wording was misleading, so I will pay closer attention to those sorts of details.