Background

High-fidelity prototypes for desktop, tablet and mobile phone of its website were designed as the result.

The Basics

Prototype

https://invis.io/P8PSE02RKXA

Goals

• Redesign the responsive website of the Bassett Street Brunch Club with more organized visual hierarchy.
• Extend current branding (which features vintage robot toys) that aligns with the shop’s clientele and customer experience.
• Redesign the donut-ordering feature with more simplicity and legibility, while keeping the food delivery option from another app.
• Update the visual design to fit the modern and fun branding of the business.

Discover

In order to have a clear idea about the possible redesign goals, including the current issue and target branding, I conducted my own market and user research through online reports, reviews and in-person interviews.

Marketing research

The marketing research includes 3 parts: business background research, secondary research about current food website UX trends, and competitive analysis of some food websites that meet target goals.

1.  Business background research was based on information from their original website and online interview reports, findings were:

• Offering "fun and familiar mod-American cuisine"
• Featuring "donuts and old-fashioned toy robots"

2.  Findings from secondary research are listed below:

• Colors
• • Match branding colors

• Photo-centric
• • “55% spent fewer than 15 seconds actively on a page” --- need to grab attention
  • High quality
  • Relevant
  • Food, interior, exterior, people working

• Clear Call-to-action
• • Specific function

• Simple menu
• • Brief description, portion sizes, nutrition facts

• Clear typography
• • Easy to read

• Orient new customers by recommending top sellers

• Giving away free samples for new customers
• • One trick for newsletter  

3.  Findings from competitive analysis are listed below: (click on image to see more)

User research

1.  To find out the potential customer demographics and current brand impression, I did online review forum analysis with major food review platform Yelp and TripAdvisor, using the method of keyword searching in customer reviews.

( Review customer profile [TripAdvisor] )

( Atmosphere keywords search [Yelp] )

2.  To identify problems of the old website, I conducted short user interview and usability testing with potential business and website visitors with guerrilla interview.
Problems found were listed below:

Information overloading

Text-heavy pages with overly complicated instructions for donut-ordering process.
Address, map, hours, emails and hotel parking services are stacked together, making it hard to read and find specific information.
Visual representations are lacked, aka photos / illustrations.

(Ordering instruction)

(Contact page with location & hours)

Hard to find Ordering CTA

Locate in the lower right corner of the page, as a floating window.
   Lack of contrast with the background;
   Too many CTAs in one box;  
   Block users’ view;
   Locate at the blind spot on the screen that brings less attention

(Carryout window)

(Delivery window, opened in a separate page)

Inconsistent ordering method

The function of Carryout and Delivery are provided by 2 different food ordering service:

Ignored CTAs on homepage

Categories are lack of hierarchy, and CTAs are not clear to be seen

3.  To find out logical hierarchy for website content, I did mixed card sorting online.

📝 See detailed report on User research debrief, Marketing research findings

Define

2 personas were developed for 2 common user types: business trip visitors and local college students.

Design

Mid-fidelity wireframe

Main screens of the website were made with mid-fidelity wireframes. Laptop, tablet and mobile phone size were all made, and a prototype was created to test this initial structure before starting designing UI.

UI design

I used their original logo, and tried to create new color palette that matches their old branding while also could bring in some fresh style.

According to background, donut and robot will be a unique branding goal for this brunch club, and therefore I created some new illustrations of vintage robots and donuts that also match "fun" and "modern" as stated in research findings.

High-fidelity wireframe - Version 1

Sln. 1:  Easy to find Ordering CTA

CTAs are more obvious and redundancy allows users to access same page in multiple ways.

Eg. Order online can be accessed through hero CTA, icon in bottom page, and top navigation.

Sln. 2: Simplified ordering method

This business accepts donut order directly from their website while needs external delivery service for other dishes.

Therefore 2 options are displayed here.

Donut ordering process is made easier with more visual components to help with selecting.

Sln. 3:  Organized menus

All types of menus are displayed on the same page, while a fixed navigation bar on top allows users to jump to any type easily. An order CTA also allows users to order food after browsing menu.

Test

2 Usability testings were conducted with hi-fi prototype made from InVision. Participants were required to complete 7 tasks based on given scenarios. They were recruited from my network, and tests were conducted both in-person and online through screen sharing.

Refinement 1:  change hero image to better match target branding impression

Test results feedback about website first impression were mostly "fast food" "young", while target goal was to have "modern" "community" and "fun".

Therefore I decided to make the hero image more clean while kept robot illustrations in other part of the page for "fun" impression.

Refinement 2:  change language use of top navigation bar to reduce confusion

"About Us" was changed into "Our Story", and "Contact Us" was changed into "Contact / Find Us", since test found most users confused about "About Us" and "Contact Us".

Refinement 3:  more clear separation between ordering steps

Testing found most users jumped directly to step 2 when ordering donuts and usually ignore the first step. Therefore I decided to add mask over step 2 before users finish 1.

Original

Updated

Refinement 4:  add / move CTAs

CTAs on Reserve page were moved from bottom of page to top of page to bring more attention.

A menu CTA was added on Gallery page to follow user's behavior pattern.

📝 See detailed report on Low-fi usability testing synthesis, Hi-fi usability testing 1 synthesis, Hi-fi usability testing 2 synthesis

All Screens

Checkout the prototype here:

https://invis.io/P8PSE02RKXA