Refreshing a café's brand identity to increase foot traffic

Overview

The Hidden Cafe is a locals’ favorite located in Berkeley, California. As a local cafe well involved in the Berkeley community, The Hidden Cafe offers not only artisan drinks and baked goods but live music and many community activities to bring new and old locals together.

My co-designer and I volunteered our time to redesign the website because we believe there was more potential in the café's online presence.

Team

Jacqueline Ma, Vincent Alojado

Problem

We thought to ourselves, what are the users getting out of the cafe’s website? Is it just to order food and drinks? 

The simple answer is no. The Hidden Cafe is more than just a cafe, the place brings together the community and has more to offer than just food and drinks.

Identifying the problem statement: How might we increase users to utilize The Hidden Café's website.

Goal

We wanted to make sure the redesign not only creates a smooth and informed experience for visitors but to refresh the cafe’s brand identity by using updated images, consistent typography, creating call to action buttons where necessary and condensing the existing Information Architecture. 

Research

After researching several eatery websites in the San Francisco area, we decided the following features were important to incorporate and adjust:

• Friendly headings in each section to grab users attention and increase engagement 
• Welcoming images (preferably personal images of the cafe’s culture)
• Condense existing copy and layout ( easier for users to digest)
• Consistency! 

The following banners bring a strong presence to the company's digital brand:

‍

‍

The following images give users a powerful sense of the rich culture behind the products they are selling:

Design

So let's back up real quick.

Yes, visuals are important! But other than visuals, what do users do when they are overwhelmed by the information they see on a website?

They leave.

One of the first thing my co-designer and I noticed when landing on the main page is the overwhelming navigation bar:

‍

The information architecture needed to be condensed in a way that users are able to navigate in an organized fashion. Instead of presenting all the different pages available on the site, we grouped in categories and refreshed the lingo to be user friendly and to avoid user confusion.

Another important section we paid attention to was the "welcome home." header- not only was the font inconsistent with the other typography in the top navigation bar but it also does not contribute to the café's culture and brand identity.

To have a consistent color palette, we also adjusted the original black notification bubble to the café's brand's green

‍

‍

Visuals, visuals, visuals!

As mentioned earlier during our research phase, while doing our competitive analysis, we realized images and heading banners play a big role in grabbing users' attention.

‍

‍

For consistency, we made sure all pages (with client's approval) would have a hi-res image banners provided by the client (the client provided a library of hi-res images of the café for my co-designer and I to choose from).

‍

‍

Short and sweet

The Hidden Café website not only functions as an ecommerce site but also to inform the Berkeley community of events and activities that take place in their establishment.

In the original "The Hidden Concert" page, the copy is presented in a way where there is no flow. Users may see a bunch of text and lose interest in reading everything. We decided to condense the copy, take the 2 main links and turn them into call to action buttons.

We had to ask ourselves-

What is this copy trying to say?

How can we clarify a bunch of text?

What do we want the users to get out of this copy?

‍

‍

Takeaway

It was really interesting to be able to apply our ux/ ui skills to this project. We learned the following:

• Less is more
• A picture is worth a thousand words
• Condense information presented to users will allow users to focus on more important items
• Consistency is always important when building a brand identity
• Visually pleasing hi-res images are welcoming and emit strong online presence
• A brand's identity should reflect a company's culture

Check out the live website!

‍