High-fidelity prototypes for desktop, tablet and mobile phone of its website were designed as the result.
Bassett Street Brunch Club
12/2018 - 01/2019
UX Researcher, UX Designer
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.
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)
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.
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:
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.
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
The function of Carryout and Delivery are provided by 2 different food ordering service:
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.
2 personas were developed for 2 common user types: business trip visitors and local college students.
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.
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.
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.
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.
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.
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.
"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".
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.
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.