Business website for a unique cafe experience in Denver, CO

THE CLIENT: Hello Coffee is a local, woman-owned coffee shop in Lakewood, CO outside of Denver

THE PROBLEM: Due to budget constraints, Hello Coffee has a limited digital presence on Facebook, and is losing out on business from customers who utilize other socials, or look for a website before visiting a business.

THE SOLUTION: Create a simple and low-maintenance website for the business so that non-Facebook users can find Hello Coffee online and become customers, and the business will not have to invest much time to keep the site up to date.

MY ROLE: UX/UI Designer

PROJECT DURATION: 80 hours

Now that I can context for the project, it was time for user interviews. Post interview synthesis of affinity mapping revealed salient points which again justified Hello Coffee’s need to develop a business webiste. These were:

  • People’s feelings about their experiences at coffee shops greatly impacts whether they return. 100% of participants shared specific stories of cafes where they are either repeat customers because they enjoy their experience or where they no longer go because they were dissatisfied

  • Though some do it more frequently than others, 100% of participants will look for an open a business website to verify that a coffee shop is “real” when visiting cafes they have never been to before

  • Specific details sought on sites included: business hours (100%), pictures of the space to get a feel for the ‘vibe’ (66%), whether non-coffee drinks are offered (66%), and whether it’s locally owned (33%)

User Interview Script, User Interviews Debrief, Affinity Map

01 RESEARCH & DISCOVERY

A Competetive Analysis was conducted to see what other cafes were displaying on their websites and to uncover Hello Coffee’s niche in the cafe market to be able to highlight it on their site. I compared two other local Denver cafes (Launch and Bean Fosters) and Starbucks to observe common site elements, and determine the strengths and weaknesses of each business.

The analysis legitimized the need for a wider digital presense with a business website, and revealed the following opportunities to inlcude on the business website. Though the other businesses offer online ordering, Hello Coffee has exlicitly stated they do not have the resources to manage this feature at this time, and do not want a site they will have to maintain and update regularly.

  1. An online menu with pricing, ideally with photos of food and drinks

  2. Emphasize Hello Coffee as a local, women-owned business

  3. Highlight Hello Coffee as the only cafe in a 5 mile radius in the suburban community of Lakewood, CO

Secondary Research was also conducted to give insight into the coffee shop and cafe market. The research showed that 52% of a cafe’s success was not based on thier coffee product, but on the atmosphere they create in their space.

Knowing that Hello Coffee already has a unique space, special consideration will need to be given to the personality of the business and how it is incorporated on the site. Showcasing the atmosphere of Hello Coffee on the website is likely to attract new customers to visit for the first time and convert to repeat cutomers

02 DEFINE

Perhaps the main take away from affinity mapping the user interviews was that 100% of users open business websites just to know whether a business is real or still operating. The existence of a website can be THE deciding factor in whether someone visits a new business they haven’t been to before. I created a story map to illustrate this message, and ground my designs in this purpose.

After determining the business constraints and user needs for the website, I was drafted a simple sitemap requiring only four pages for the website: home, menu, contact, and calendar.

The stiemap guided my sketches of my low-fidelty wireframes, and allowed me to visually feel out if four pages could succinctly fit the needed information desired by users (below).

03 DESIGN & DEVELOP

After defining the basic structure and information architecture of Hello Coffee’s site pages, it was time to digitize my sketchbook wireframes. I love mid-fidelity wireframes because the project finally comes alive now that it’s digitized.

Digitizing the design allows me to spacially orient the main components of the pages. This is a crucial step especially when working on a responsive design project as with Hello Coffee, and needing a consistent experience in both mobile and desktop formats. I experiemented with repeatable elements that I could easily apply to both devices until I found a balanced and appealing layout.

The branding for Hello Coffeew’s site was inspired after visiting the business in person. Hello Coffee is fun, vibrant, funky—and very comfortable and welcoming. There was a deep purple accent wall, some teal accents and fun coffee decorations and local art everywhere. The featured drink drawing was on display at the counter as well as a small sandwich board displaying the current playlist. These small details made me feel as if I knew the staff ever so slightly, and inspired me to create the staff cards on the homepage—a way of welcoming new customers and introducing them to their baristas.

That purple wall inspired the purple palette, accented by coffee browns in the site. The header typography was a fun script that matched the Hello Coffee logo. The text font was round enough to be fun, yet highly readable. I intentionally chose a serif to add a bit of movement to the block text. View the desktop and mobile high-fidelity iterations here

04 TEST & DELIVER

When I arrived at the testing stage, I questioned whether testing was truly necessary for such a simple site. I was advised to proceed with usability testing-and I was glad I did! I gathered five participants and interviewed them remotely while they viewed the mobile prototype on their phone. I was surprised at the wealth of suggestions and observations obtained in these interviews. View the Usability Testing Plan here

I enjoyed creating this product for my client and helping them to better succeed as a small business, my favorite part in this whole process was implementing the feedback I’d gathered from Usability Testing! I am always fascinated by what other people observe in designs and products- and love seeing what I’ve missed and what will take the product to the next level. My participants had additions as simple as “add iced drink options and specify the alternative milks” and as complex as “I love knowing that this is a local women-owned business. I’m curious about their story and want to see an ‘About Us’ page”. View Usability Testing Synthesis here

The steps of my interview synthesis were 1) notate all participant comments , and (2) organize them into groups to find trends in their observations. (above) After organizing 3) I consolidated similar items into a single note, 4) prioritized all suggestions into an effort/impact matrix, and 5) finally listed the matrix results into priority groups to order what would be implemented when.

The Effort/Impact Matrix was so helpful in deciding what to prioritize. Defining the nuance of impact vs effort for each suggestion allowed us to allocate resources in a way that provides the greatest benefit to the users while continuing to operate within the constraints of the business.

05 Conclusion

This responsive design project for Hello Coffee surprised me in a few ways. Though I thought this would be a visual design heavy project that wouldn’t involve much in terms of problem solving, I found that simple projects have their own challenges—especially in keeping it simple! Regardless of the scope, the designer always has to come back to the brief (that is, the original ask) and make sure their work continues to be in alignment throughtout the process and that their creativity isn’t taking them astray from the client’s needs. 

Though I was able to keep a simple site structure that fit within Hello Coffee’s constraints and met the minimum needs for what users want on sites, I wanted to futher express the personality of the business in the website. A future feature is to add an “About Us” page which would share the story of the business and its owner, yet I wanted to be able to include more images of the space. Adding more photos would have detracted from the simple design of the pages and I learned that personality can be expressed in branding and not only in images. The purples, the fonts, and the other details all make suggestion to the imagination about what Hello Coffee is like.

I was surprised with how informative usability testing proved to be in this “simple” project and found that users always have insights to share that greatly enhance your product, even if they are small suggestions. In this project I learned what creating an experience really is, and began to connect the psychology of UX to the user. If iced drinks aren’t listed, am I disappointed? If you don’t indicate if parking will be a breeze, will I even dare to try to stop by? If you don’t have socials listed on your site, are you really a REAL business? These are just some of the items that came out of usability testing. 

While I have submitted my final wireframes and prototype to the business, you can see additional iterations are planned for the future including an ‘About Us’ page, and more images on the menu. I love the iterative nature of UX that is a continual process of improvement. Hello Coffee will benefit from having a live website users can find, and it can change just as the business will.

I hope that the results of this design bring Hello Coffee much success!