Café Blanc is a Korean inspired coffee shop located in Coquitlam, British Columbia.

Overview

Café Blanc has a charming ambience, a majority student customer base, and once upon a time— a horrible website. During my time there, I worked on branding and social media, while revamping their outdated website. The one I inherited struggled to make digital conversions without relevant copy, engaging visuals, and even order links. My goal was to redesign it in order to increase revenue, and help the café thrive in a menacing pandemic.

Discovering the Problem

When I first looked at data, almost all of the café’s sales were made from walk-in customers, who could no longer be relied on as the sole source of revenue. During the pandemic, overall sales fell and limited online traffic meant losing ground to similar stores with stronger web presences.

The cafe's sole strong funnel of visitors were Instagram campaigns, which accounted for 58% of visitors.

However, of the website visitors, few were ordering— dismal statistics cited an annual bounce rate over 83%.

Section 2 // Defining the scope

Figure 2. Café Blanc vs it's competitors (found by searching for Café Blanc's location + keywords on Google)

Competitive Analysis

To see how Café Blanc could differentiate themselves, I evaluated the existing websites of several local competitors and identified that its focus was on specialty drinks and mini-cakes. Café Blanc's menu is mid to high-priced for the area while uniquely consisting of comforting fare made with quality ingredients.

I recognized that the brand identity should thus reflect this with a design centered around quality, simplicity, and refinement.

To better understand how I could drive sales by using the website to acquire new customers, I also organized patterns found in user feedback and my heuristic evaluation into 3 main categories (see below) ↓

HMW Statements

The owner asked to keep the original coffee bean from the logo (see old website to right), but otherwise gave me creative control. My user research cemented the importance of a brand persona and a UVP, so I advocated for a brand refresh and came to two questions relevant towards business metrics and the user experience:

HMW Statement 1

How might we rebrand the café to better align with their products?

HMW Statement 2

How might we capture potential customers and increase orders?

Section 3 // Defining the Solution

Figure 3. Sitemap, created with Figma, Figure 4. User Journey Map, created with FigJam

Information architecture

Due to its proximity to Simon Fraser University, the target demographic of the café is university students. After interviewing a mix of customers and non-customers from the ages of 18-55, I found several commonalities in website content of interest. When asked “In what scenario” and “How often” they visited a café website, most responded they would do so to look for a menu. Seeing that accessible links were a priority, I created a sitemap to make sure sufficient CTAs were present.

I then made a user journey map and created a set of design and brand principles to unify the design system with emotional guidelines; intending for all components to reflect “friendliness,” “purposefulness,” and “comfort.”

Section 4 // Developing the Solution

Figure 5. Re-usable components I created according to the brand refresh

In the process of planning, I discovered the voice of the café— the comforting tone of copy I wanted to write, and the artistic but approachable designs I wanted to make. Higher prices made it necessary to emphasize quality, while playing to the cafe’s unique value proposition as a comfortable place to study. I tried to convey the calm ambience customers described through hand-drawn illustrations and slightly rounded corners. A friendly color palette of warm browns and beige was incorporated into the art and photography, while the copy was written in a similarly approachable tone.

The designs themselves used DM Sans and Roxborough CF, typefaces that appear approachable because of their double story letters and exaggerated circular counters.

Figure 6. "Simple is delicious" usability testing & interview insights (1)

Testing the landing page

The landing page is the first thing visitors see; playing an important role in establishing a brand’s context, aesthetics, and tone. I tested my first prototypes by asking users to rank taglines and complete timed tasks like navigating to order from UberEats. Finally, I would follow up with an Quick-Exposure Memory test, asking them what they remembered from the landing page, and if they could choose 3 adjectives that best described the visual and emotional impression they got:

Figure 7. "Made with kindness" usability testing & interview insights (2)

Figure 8. "Deliciousness" usability testing & interview insights (3)

Figure 9. "made with care" usability testing & interview insights (4)

Both qualitative and quantitative research contributed to my final design; the images from design 2 were organized in a more interesting way, while the text was enclosed in a container so it didn't look decorative. The photography and design system highlight brand keywords and specialties— reflecting the wholesome and local nature of the café with a human touch.

Section 5// Making changes based on insights

Figure 10. V1 of my CTA page

Some of the older interviewees found design 2 and 3 slightly distracting, preferring a minimal design with one picture, tagline, and order buttons. However, I chose not to include CTAs on the hero image because they are already accessible on the Google page and Instagram (our primary source of referrals); meaning that users chose to click in and ignore them to seek more information on the business. Instead, I had a fixed navigation bar with the order links, and provided them farther in where more trust is established. Every other page integrates CTAs in an appealing way rather than forcing them on the user early and leaving a bad impression. My early iterations of the CTA page were problematic because of color choice, poor information hierarchy, and undifferentiated content.

Figure 11. V2 of the CTA page- I added visual hints like borders and order icons that suggested the polaroids afforded clicking

Design goal: Aesthetically pleasing but not extraneous

Figure 12. The expanded hamburger menu on mobile

FInal design

CTAs on Mobile

The new CTA page (above) better employs hierarchy by prefacing the links with text and changing the visual rhythm to move from left to right. The size of the type goes from the heading to the images, drawing a user’s eye to the clickable visual links. Beyond the initial issues with the polaroids, users found them a fun and skeuomorphic way to represent ordering: adding delight and personalization to the experience.

The design rationale behind my mobile menu was Fitt's Law; which states that the time it takes to reach a target area is a function of distance and size to the location. I employed this principle by conveniently placing large order links at the bottom of the screen, closest to the user’s thumbs.

Section 5// Delivering the solution

Figure 13. Before and after my redesign, Figure 13.5, Old Mobile, Figure 14. 404 error page.

Putting it all together

Once a developer was onboard I had to re-evaluate the designs and we didn't ship most of the animations, contact form, or Instagram integration. As much as the time feature that displayed the cafe’s status was well-received by testers, it would invite issues if it wasn’t updated properly or if there was a bug (wrongly suggesting the café was open or closed). Meetings are extremely important, and earlier communication would’ve saved me a lot of time. I learned that continuous dialogue between designers and developers ensures unity and understanding— so go be nice to your dev and buy them a coffee.

As Google Analytics is connected to the domain, I'm currently monitoring metrics like bounce rate, average session duration, and percentage conversions to ordering apps. In a snapshot taken on April 4th at 2:05pm, our bounce rate was down to 61.18% and session duration was at a healthy 1 minute and 2 seconds (considering the limited length of the website).

the end...

My takeaways

Copy is underrated

This project helped me realize how much of a difference nice copy makes, and how challenging it can be to write. Consistency between writing and visuals establishes the “voice” of the brand, making both crucial for a positive digital experience. Good copy can elevate an experience from good to great, and tone should be decided early in the design process (this is how I have been justifying the hours spent on A/B testing). Long story short— hire good copywriters, test your copy, and always make multiple versions of designs and text.

Test often | Fail fast to learn faster

By running usability tests early, I was able to pivot quickly and scrap what wasn't working. Within this, users also had conflicting opinions. While some would hate a design, others would love it. I tested a range of people while keeping the targeted demographic in mind, allowing me to directly apply feedback and build on top of failed iterations. The design process isn't linear, so always prototype, test, and try new things.

☕️ A delightful fix of caffeine

Section 1 // Background Information