<

Bassett Street Bruch Club

Personal Project

Bassett Street Brunch Club

Responsive websites redesign

  • Background
                • The Basics
                              • Challenges
                                            • Discover
                                                          • Define
                                                                        • Design
                                                                                      • Test
                                                                                                    • Next Step

                                                                                                                  Background

                                                                                                                  This is an independent project from DesignLab, which is for a local business called Bassett Street Brunch Club.
                                                                                                                  Bassett Street Brunch Club is a local brunch restaurant at downtown Madison, WI that offers all-day brunch and extensive donut selections. Besides offering brunch menu items, they also provide donut ordering and catering service, which require their website to have features for both functions.
                                                                                                                  As a popular destination for modern-American style cuisine with the target of a variety of customers: college students, business people, visitors, local families and friends, it has a goal to provide “fun and familiar” food that is both traditional and creative, with a selection of local produces, coffees and beers.

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

                                                                                                                  The Basics

                                                                                                                  Client

                                                                                                                  Bassett Street Brunch Club

                                                                                                                  Time

                                                                                                                  12/2018 - 01/2019

                                                                                                                  My role

                                                                                                                  UX Researcher, UX Designer

                                                                                                                  Tool

                                                                                                                  Sketch, Invision

                                                                                                                  Prototype

                                                                                                                  https://invis.io/P8PSE02RKXA

                                                                                                                  Goals

                                                                                                                  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:

                                                                                                                  2.  Findings from secondary research are listed below:

                                                                                                                  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]
                                                                                                                  ( 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.

                                                                                                                  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. 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.

                                                                                                                  All Screens

                                                                                                                  Checkout the prototype here:

                                                                                                                  https://invis.io/P8PSE02RKXA