Hello Coffee

Capturing lost business by increasing digital presence through responsive web design.

THE CLIENT: Hello Coffee is a local, women-owned coffee shop in the Denver area.

THE PROBLEM: Hello Coffee’s digital presence is limited to a Facebook business site. I hypothecized that they were losing business from customers don’t use Facebook and from those who wish to review a website before visiting a business.

THE SOLUTION: Validate whether the hypothesis is correct. If so, create a simple, low-maintenance website for the business so non-Facebook users can find Hello Coffee online and become customers.

MY ROLE: sole UX/UI Designer & Researcher

PROJECT DURATION: 4 weeks

USER INTERVIEWS validated the need for a business website, and defined what information needed to be included.

  • 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

  • Information sought on cafe sites to include for Hello Coffee:

    • business hours (100%)

    • pictures of the space to get a feel for the ‘vibe’ (66%),

    • if non-coffee drinks are offered (66%)

    • whether it’s locally owned (33%)

DISCOVER & DEFINE

COMPETETIVE ANALYSIS provided market understanding and familiarity with what other local cafes included on their sites.

SECONDARY 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. Hello Coffee’s unique space and personality had to be felt on the site.

After defining the site needs during primary and secondary research steps, I was able to begin planning the layout of information in the SITEMAP. Keeping things as simple as possible, I limited myself to only four pages:

  • home

  • menu

  • contact

  • events calendar

DESIGN & DELIVER

MID-FIDELITY WIREFRAMES

During mid-fi design, I designed a header with navigation and a footer with location and contact info. Remembering that I wanted to emphacise the personality of the cafe and it’s brand, I placed photos of the physical space near the top of the home page, and the featured drink above the menu.

My site visit allowed be to bring life to the high-fidelity wireframes.

The purple wall inspired the purple palette, accented by coffee browns in the site. Header typography was chosen to be a fun script matching the Hello Coffee logo, paried with round, fun and highly readable text. I intentionally chose a serif to add a bit of movement to the block text.

With sitemap in hand, I sketched my low-fidelity wireframes to get a feel for the general look and navigation of the site.

SITE VISIT FOR UI INSPO

I visited the brick and mortar Hello Coffee shop to get a better sense of their personality. It was fun, funky, and vibrant while all being very comfortable and welcoming. There was a purple accent wall, teal accents, fun coffee decorationas and loads of local art on the walls. A “Featured Drink” display was on the counter with a sandwich board displaying the current playlist.

TEST & REFINE

Five participants were interviewed remotely while interacting with the mobile prototype. Though this was a relatively simple website, I was surprised at the wealth of suggestions and observations obtained in these interviews.

From “add iced drink options and specify the alternative milks” to “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”, my usability testing excellent feedback to refine my high-fidelity designs.

After completing the AFFINITY MAPPING for the usability test results, I prioritized all suggestions into an effort/impact matrix, and then listed the matrix results into priority groups of implemented. Knowing your “easy wins” allows product improvement without overly impacting your development team. Understanding what is too much effort for minimal impact help you focus on satisfying users and the business.

KEY TAKEAWAYS

  • This “simple” responsive design project for Hello Coffee surprised me in a few ways. Though I thought this project would be heavy in visual design and no require much problem solving, I found that simple projects have their own challenges—including keeping it simple! The designer must always return to the brief and constrain themself to stay in scope, and make sure their work is in alignment with the original ask throughtout the process. As creatives, this can be challenging but must be managed in order to provide the most value.

  • I was able to create a simple site structure that fit Hello Coffee’s constraints and user desires, but wanted to futher express the personality of the business in the site. I wanted to include more images of the space so users could get a sense of the space, but adding more photos would have detracted from the simple design of the pages. I realized that good branding can express personality even better than images. The purples, the fonts, and the other details all make suggestions to the imagination about what Hello Coffee is like.

  • I was surprised 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 if you ask the right questions! In this project I learned more about creating an experience than just a design, 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 that parking will be a breeze, will I even try to stop by? If you don’t have socials listed on your site, are you even a REAL business? These are just some of the items that came out of usability testing.