Biscuit Bitch
Website Redesign Concept
Role
For this concept project I went through the entire UX process. I conducted a competitive and comparative analysis. Using rapid prototyping I created sketches, wireframes in Sketch and eventually a clickable prototype using InVision. I also validated the design with users in usability testing and iterated upon the design based on feedback.
Challenge
Redesign the Biscuit Bitch website in order to better address user needs and improve the online store to make purchasing an item easier and more streamlined.
Duration
2 weeks
Platform
Web
Deliverables
Competitive Analysis, Sketches, Wireframes, Clickable Prototype
Team
Myself
What is Biscuit Bitch?
Biscuit Bitch is a southern restaurant with several locations in downtown Seattle. As the name suggests they’re specialty dish is biscuits and gravy, although they offer several other southern dishes and have an extensive espresso menu. They’re moto is “Trailer park to table.”
Solution
By reorganizing the website, focusing on the content that are users looking for, and by consolidating all the online merchandise onto the main site, we can make it easier for users to navigate and find what they are looking for.
Problem
The organization and navigation of the Biscuit Bitch website prevents the users from finding the information that they are looking for and results in them getting lost.
Initial Research
Persona
As part of this project I was given a Primary Persona, Laura, to work with. I used Laura both to shape my design and to identify features from other sites to include in the redesign.
- Laura is a visual person, likes big images and lots of them.
- She likes clear copy, short sweet and to the point.
- She wants to have a quick and efficient checkout process.
- And she values reviews and wants to be able to submit her own.
Competitive Analysis
In order to identify any industry standards or particularly effective features, I conducted a competitive analysis. I looked at five different southern restaurants in the Seattle area. I found that Fat’s Chicken and Waffle had a lot of features that appealed to my persona Laura, and so I used their site as inspiration during the initial sketching process.
Site Audit
I also went through the original website, looking at it through the eyes of my persona, in order to identify the key issues within the site. Doing so not only allowed me to identify the basic design issues, but also the problems preventing the user from achieving their goals.
- The site had a lot of inconsistent and unclear calls to action.
- The merchandise available for sale was split between two different online retailers, and users must return to the Biscuit Bitch website to view different items from the same retailer.
- Most of the information that the users wanted was difficult to find or was presented in an undesirable way.
Sketches and Wireframes
Sketches
Using rapid prototyping I created multiple low-fidelity sketches of each screen, identifying which designs and elements worked. I focused a lot on the ecommerce aspect of the new site, as this was a new feature I was adding to the site. Then based on these sketches I created a slightly higher fidelity sketch to be used for the initial wireframes.
Wireframes
I used Sketch to create wireframes of key screens of the site, focusing on the information users were looking for, the merchandise and checkout process. I then used InVision to create a clickable prototype of the website with the wireframes. Each time that I iterated on the designs I also upped the fidelity, adding lorem ipsum, content text, and the logo, in order to get a better understanding how much content would fit onto each page.
Usability Testing
Testing
I conducted two rounds of usability testing, the first with three people and the second with four. During the first round I focused on the merchandise aspect of the redesign, having users find and purchase two items. In the second round I tested the solutions I had created after the first round, and had user find the reviews for the restaurant and write one of their own.
Iterations
After each round of usability testing I identified key issues and pain points that users had encountered or expressed and iterated the design in order to address them.
In the 1st version I had included an “Add” button on the catalog that added an item directly to the cart, users expected this to bring them to the product page and were alarmed when the item was added directly to their cart. To fix this I simply removed the button and required users to go to the product page in order to add an item to their cart.
During testing I found that users did not like having the option to email the receipt to yourself at the end of the checkout, as they were concerned that they might miss it and had expected to receive it in email by default. I had done this in order to shorten the checkout process, but after getting this feedback I moved the option from the receipt to the address information screen.
Header Navigation
When I increased the fidelity after the second round of usability testing I found that the aesthetic of the header navigation did not work with the rest of the site, especially with the irregular shape of the logo. In order to address this, I went back the drawing board and sketched out a bunch of different designs, eventually settling on three different versions. I then conducted a quick AB test for these designs with 20 people, asking which version that they preferred and why. I found that not only did most people prefer version 3, but even those who preferred a different version did not any strong negative feeling for it.
Reflections
Lessons Learned
During this project I learned that it was very important to be aware of my assumptions, and the value of validating my design with the user, as this not only provided me with a lot of really valuable feedback, but also allowed me to catch the assumptions that I had made.
Next Steps
If I were to continue this project I would like to conduct at least one more round of usability testing in order to validate the changes I made after the second and make sure that the new navigation and home page worked. Then I would like to go into color palette and typography in order to create a high-fidelity mockup of key screens.