Cafe Hey Website

Project Type

Responsive Web Design

Duration

4 weeks

Scope of Work

UX/UI Design, UX Research, & Copywriting

Project Background

Cafe Hey serves sandwiches, coffees and teas to diverse clientele in the downtown Tampa Heights area.  They foster a tight knit community and have many regulars after being in business serving vegan friendly fresh breakfast and lunch options since 2007.

They’ve mainly been using their instagram to communicate with their customers, and did not have a valuable website of their own at the time of us coming on to design for them.  

Their customers needed an easy way to access their menu online to better order on the go, as well as learn about the cafe’s events.  

The business wanted to capture email subscriptions and increase phone and online ordering sales.

Empathize through Research

UX Research Goals

We wanted to know who Cafe Hey’s customers were, how their peers and small business restaurant competitors offered to their customers, and what the cafe’s current web presence conveyed to their users.

Methods

Go in depth with the process...

We wanted to explore as much as we could in UX Research before starting the design process, take a look at the steps we made to best understand the cafe’s users and their needs below!

Before ideating on solutions, got to know Cafe Hey’s users (customers) in interviews at the cafe itself.  

We talked to four people to dive deeper into:

  • What their values were
  • What their processes for choosing where to eat were like
  • Their overall thoughts about Cafe Hey and what makes them be a patron
  • Their experiences online with Cafe Hey or similar businesses 
  • What their pain points were with the cafe or similar businesses or in person or online

We also wanted to take a look at what other food businesses did to solve similar problems, and peer reviewed 5 similar businesses to see what design patterns they were using.

Key Takeaways

We uncovered that having professional photos, a full menu and prominent online ordering calls to action were a must on a cafe business website.

Using social media and social proof like Google reviews was common.

We learned what important info to provide, like hours of operation, contact info and email subscription forms.

Most importantly, we learned that many competitors outsourced their online ordering to third party apps like UberEats.

 

After getting to know our users and competitors, we turned our lens on Cafe Hey’s web presence.  We took a look at their existing website, their instagram page and their UberEats and GrubHub pages.

 


Their one page website is built using Square Site, and is lacking information, a menu or professional photos. They include an email mailing list sign up, but don’t inform users of what they’re signing up for.

 


Their instagram had good photos of their products on their page, and informed users of special events before they occurred. This was their strongest representation online.

 


This is the only place online where you can find most of the Cafe Hey menu. There was more of their menu offered on UberEats. I chose to focus on promoting UberEats in my design since it contained a more complete menu.

What we learned...

Users values

Customers choose Cafe Hey because they’re frequently on the go and value vegan friendly options and supporting local art and small businesses.

Pain points we could ideate solutions for

Our users had needs like being able to access an online menu, fast online ordering and learn about events.

Features our peers were using

Professional photos, a full menu and prominent online ordering calls to action and social proofs like Google reviews were a must on a cafe business website

Using third party apps was common

Competitors outsourced their online ordering to third party apps like UberEats and GrubHub often.

The business needed a viable website

Their website needed a complete redesign to make it valuable to their customers and their business combined.

Engage their customers

A mailing list sign up and social media presence would be important in communicating with the customers

Defining Needs

Clearly defining our users' needs

With our research conducted, we knew we needed to design a responsive website that featured a menu, event information, mailing list subscription and CTAs to place online and phone orders.

Site Map

We set out developing a site map to build Cafe Hey a web page that contained all the information their users needed.

User Flows

Some user flows showed processes users might take navigating the menu page to eventually order food, and how they might find more information on events. 

Time to pivot! We learned shortly after this phase, that the business owners were not likely to update their information page, so we adjusted our design to simply advertise the events instead of house a calendar, linking to social media pages so users could learn more about the events.

Once we had all the pieces that needed to be included in the website and a good idea of who our users were, we started designing solutions.

From Ideas to Wireframes

Wireframes

We created a few different iterations of wire frames to determine the best hierarchy and placement of the web elements. We made sure to create frames for both mobile and desktop experiences.

Copywriting

We wrote copy to inform users about Cafe Hey during their web experience.  It put the cafe’s unique business value front and center to appeal to both new customers and regulars.  It was inviting, and encouraged users to learn about the Cafe’s specials and events via an email subscription.  We made sure to translate their entire menu into an accessible text based menu page.  

Color Palette and UI Elements

We knew the colors were important to our client, but knew their brand needed a refreshment, too!

A bright red and yellow finally caught our eye after iterations with more conservative color choices.  We stayed true to Cafe Hey’s colors of choice while embracing the “Ketchup and Mustard” theory of color combinations – a calming yellow and a more impulsive, hunger inducing red.

Final choice

Designing a Prototype

The wireframes underwent development by injecting colors and UI elements from our style tile into the design.

We sought feedback from a team of peers and mentors to better refine the prototypes before concluding they were ready to test with our users.

Test, Iterate, Repeat

Usability Testing

Our task-based in person usability tests set out to test our prototype’s success in the menu, events and mailing list subscription designs. 

We determined the pass/fail of the tasks based on time over 30s and errors over 1.  Errors were characterized by the number of deviations within expected flow of the task.

Results

Task 1

Find ingredients in a food item.

PASS

Task 2

Identify 2 events happening this month

PASS

Task 3

Locate a specified drink item.

FAIL

Task 4

Locate the mailing list sign up form.

FAIL

Insights

We knew our food menu and event designs were working well.

The drink menu needed revision since users took too much time to locate the drink item, and found themselves confused and overwhelmed while using it.

The mailing list sign up hierarchy needed to be elevated to get more user engagement. 

Finalizing the Design

Iterations

We re-arranged the drinks menu so most-ordered drinks appeared before more niche, specialty drinks.

We added a modal pop up to incentivize email subscriptions and make sure users didn’t miss that CTA.

Further Recommendations

Before moving into the development phase of the cafe’s responsive site, we wanted to recommend the business considering some further changes.

The drinks menu could be condensed down, eliminating Hot and Cold drink options and instead showing only one option with hot and cold options in the description of all drinks.  This would reduce a lot of confusion and overwhelm while the user reads through all the other great drink options. 

I’d also recommend the cafe have more professional photos taken of their menu options to share with their audience, since photographic evidence was great to incentivize users to order and eat delicious looking food.  

I think these changes would greatly enhance their users’ experience of their business online as well as in person, and lead to more sales.

Final Thoughts

  • We kept the business brand and customer needs in forefront of redesign to create a responsive, mobile friendly website that would leave the user feeling confident in choosing cafe hey as the best option to grab a bite

 

  • I was challenged with the constraints of having a website that could exist without much maintenance from the business owners, leading to a simplified, but effective events page.

 

  • I was reminded of the importance of hierarchy in creating a design that would balance user and business needs.

 

  • We worked on this project intermittently during the winter holidays, and were challenged to stay on schedule!  We were proud to deliver the design in the appropriate allotment of 4 weeks time, and are excited to work with the business further in web development.