Team: 3 UX / UI Designers
Role: PM, UX / UI Designer
Timeline: 3 weeks
Slow Down Coffee Co is a cafe in Des Moines, Iowa that specializes in specialty coffee, vegan pastries, and more, from local vendors. The shop attracts a lot of visitors via local news writeups and reviews due to its high-quality, local sourcing, and community-oriented nature. My team and I wanted to turn their website into another funnel to stir customer interest by clearly communicating what users can expect to find there.
Problem: The website does not display cafe offerings, such as the menu, seating, and merchandise sold from local vendors.
Solution: Build excitement for future customers through an improved site that -
My team and I began by writing out an interview plan and interviewing the owners of Slow Down Coffee Co. We wanted to understand their brand, their customers, what they felt was working (and what wasn’t), their competitors, as well as their site goals and expectations. I felt this was important to begin with to not only understand the business I’d be working with, but also to ensure that I knew what the stakeholders anticipated.
Slow Down Coffee Co storefront.
Business goals:
Customers:
Brand:
Website maintenance:
We then split up the analysis of competitors the stakeholders named to understand where Slow Down fits in among them.
Horizon Line:
Daisy Chain:
Mars:
We saw that Slow Down fits somewhere in the middle as a very community-oriented place that welcomes customers of any background. They are a place that encourages people to sit down and hang out. It also quickly became clear that Slow Down’s site did not stand out compared to its competitors. This made us confident we had to give the site a closer look.
We then completed a mix of user interviews and surveying to understand what users were looking for when they visited the Slow Down Coffee Co website. We ensured that our target audience matched the demographic of customers typical to the shop.
User Interviews
Users Surveyed
Key learning: Most site visitors weren't interested / had not been to the shop.
Users would go to a shop website to understand ‘the feel’ of a shop they haven’t been to. They would do this by looking at photos of the space and what was on the menu and might look for additional information, such as where they get their coffee from, hours and location, and their mission statement.
How did the shop do in helping users answer these questions? The shop had its hours and address (fantastic for a user!). They were, however, missing out on a lot of important information users needed when deciding whether or not to visit a coffee shop. This meant that the website was not doing its job to convert visitors to customers.
Key learning: The site wasn’t helping users answer their questions and missing out on potential new customers.
Screenshots of the Slow Down Coffee Co homepage.
My team and I split up user testing of 6 users to understand how users felt about the current website. When they were immediately greeted on the homepage by a call to action asking them to ‘pay it forward’ to buy a coffee for someone who can’t afford it, some users were actually unclear if they were in the right place! While an online charitable campaign can be effective with a user already familiar with their brand, with new users this can lead to confusion, especially without additional context clues like a menu or photos that confirm they have landed in the right place.
Key learning: Users were looking for the following on the Slow Down Coffee Co website -
I worked with my two teammates to collate the interview and survey data into an empathy map, and finally a typical customer - Kind Kate. Kate thrives on coffee and as a teacher, is purposeful in supporting local businesses in her community. When picking a new place to spend time, like a coffee shop, she wants to make sure it’s worth the trip by checking out the website first. Can she bring a friend or do work here? Should she come hungry or eat first?
If Kate is going to bring a friend to a new place, she wants to look it up first.
Key learning: Our user wants to ‘know before they go.’
With Kate in mind, I encouraged my teammates to iterate on a problem statement separately before crafting a statement together. This took a few iterations to get right!
Problem Statement drafting.
A Des Moines metro local needs a welcoming, cozy space where they can get coffee, do work, or meet with people. How might we showcase on the website what the Slow Down Coffee Co has to offer its customers when they visit?
Key learning: Slow Down Coffee needs to use their website to showcase in-person offerings at the shop.
With the vision in mind that Slow Down needed to showcase what it offers its customers when they visit, I led the team through brainstorming, on how we might achieve this, as well as through feature prioritization. We landed on focusing on the following features -
To better understand how a user might move through the site with these features added, we storyboarded together through the eyes of Kind Kate. Together, we imagined she had a friend coming into town to meet up with and heard about the Slow Down via the news (according to the owners, customers frequently hear about them this way). Kate will look up the site to see if the shop is worth visiting - particularly looking at the photos and the menu. Kate would spot the vegan options and be excited to know her vegan friend can get a snack there and tell her friend to meet her there. Later that week, she meets up with her friend and has a great time connecting over coffee and treats.
Stranger than fiction? Our storyboard later came to life!
We were delighted to discover later during testing that this storyboard would become a true story for a future user. A site tester remembered they heard about Slow Down on the news, and after reviewing the site, decided they would take their niece who was in town to visit later that week. This gave my team and me confidence how the user would move through the site.
Key learning: A user will look at the shop site to validate what they learn from other sources and use this information to decide whether or not to visit the shop.
Then, I collaborated with the team on the style guide. Our survey of the original site noted how much stark, white space was on the website. We took inspiration from the brick and wood floor in the actual space (for me - only seen through photos from Instagram!) and decided to add in some warm browns and lots of photos. Even the black font was changed to a deep brown and the menu background to a creamier white, to reduce the intense contrast on the site. The Poppins typeface found throughout the site was selected to convey the friendly, welcoming atmosphere that can be found in the shop. For the display font, I was especially passionate about bringing in Teko as a typeface to bring in an industrial touch from the shop’s previous history as a hardware store and the boxier typeface style already present in the logo.
Our style guide was inspired by pictures fromthe shop itself - warm hues, but with a modern typeface given the space's industrial history.
We split up prototyping, each focusing on a different area. I worked especially on the ‘About’ and ‘Menu’ pages in both mobile and desktop formats.
First, we plotted out content placement in low-fidelity. On the Homepage, we aimed to remove confusion on the site purpose by adding a clear title 'Slow Down Coffee Co' and a photo carousel to the bottom of the page. On the 'Menu,' we played around with several ideas for how to best display what was available. We landed on simplifying the categories and utilizing photos in the hero and background so the page didn’t become overwhelming with options. We also added pricing for all non-rotating menu items. For the 'About' page, I focused on combining the content all on one page (it was originally split into several pages) and adding further information about the coffee, other products sold, and bringing in the shop’s beautiful mural onto the website to warm it up and communicate the sense of community implicitly.
We then added photos and styling as users noted this was highly important in the baseline testing of the site and ensure our testing would lead to new insights. I then worked with my team to test 3 tasks on typical user pathways with 6 users. I tested both the mobile and desktop viewports.
Key learning: We made some improvements, but there was more work to do.
Users loved -
Users did not love -
We incorporated the feedback into our high-fidelity mockups. For the Homepage, we switched the hero layout - removing the ‘pay it forward program’ reference (especially given it came up in two different rounds of testing!) in favor of photos pulled from their Instagram displaying the drinks and the space, as well as changing the sizing so the ability to scroll was clear. We also switched the mobile menu layout to a tab format to reduce scrolling in favor of progressive disclosure, and added a price range for rotating menu items. Finally, we switched the display text to a filled, Teko typeface to improve legibility. We retested the site again with the same tasks for another 6 users.
Key learning: Clarity allows for connection.
Users loved -
Feedback for future iterations -
We were thrilled to find positive responses to the changes we made. One user, as alluded to earlier, even decided to go to the shop after testing. When users understood the feel of the shop and what was available in store, they were able to connect with the shop’s inviting atmosphere and learn its commitment to the community through the wide array of local offerings available in store. We took note of the additional suggestions for future iterations with the stakeholder.
For me, this project was another fun discovery in how design makes a huge impact on the everyday. Something that seems as simple as a drink menu can be surprisingly challenging to lay out information effectively, especially when there are multiple categories of pricing on a small screen! This gave me a new level of appreciation for businesses selling food, beverages and services.
I find with every project there will be at least one assumption I test out where users will prove me wrong and this site was no different. I call this a key learning, but truly it is a key mantra!
Key learning (mantra): Users know best.
Key learning: Get a baseline first.
I love the owners' commitment to creating a community space through their coffee shop and it was so special to be able to contribute to that mission through the website! It was not hard to stay motivated when working with a passionate stakeholder (and a fantastic team of designers). I’m excited to continue working with my teammates to implement our designs into the shop’s Squarespace site.
POST-DESIGN IMPLEMENTATION UPDATE: 2 months after implementing the site design changes, I was able to track how our designs impacted the website. I was thrilled with the results!
Decrease in Bounce Rate
Page Views
The decrease in bounce rate confirmed that users had a better understanding of the site when they landed on it and were more willing to explore the site. In addition, the 'Menu' page's jump to the second-most viewed page on the website confirmed user interest in this information. Users spent an average of 1 min and 22 seconds on the Menu, second to the About page, where users spent the most time (2 minutes!).
