Case study: Create a website for local business BÔ&ME
Overview
Local business is suffering a decrease in the demand of their services and products due to the extreme situation Covid-19 pushed worldwide. We, a group of 5 junior UX/UI designers decided to help BÔ&ME - a Lyon based grocery & restaurant to create their website in order to promote their products and also to expand their business. The duration of this project is 2 weeks and we’re going to focus on their grocery shop part.
UX Process
At the very beginning, we conducted a deep interview with our stakeholder and from which we set our project goal as “to expand their business by selling exclusive products and also to develop their own identity throughout the products they’re selling.”
Secondary / Market Research
To start this project, we’ve done a market research to see our competitors in Lyon.
Business Analysis
We then focused on our competitors features analysis.
According to these analysis we then successfully drew our brand’s positioning map. And luckily we’re on the good track!
User Research
Followed by the stakeholder’s interview we also got some interesting feedbacks from these 5 frequent Asian grocery online shoppers’ interviews. As you can see below, most of them are negative and which means opportunities to us.
Affinity Diagram
According to users’ feedbacks we clustered them into 3 related groups: ‘Websites’, ‘Habits’ and ‘Marketing’.
Key insights from the users : “Asian online shops are usually messy”, “They don’t show customers reviews about the products”, “The websites are not well done so I’m concerned if I can trust them..”.
User Persona
We then created our user persona Sophia Dubois to help us better understand our users’ needs & pain points. She’s the cautious shopper who lives in Lyon and her goals are to find reliable websites which she can trust to order and to have a fast / free delivery. It always annoys her that the delivery fees are very high when shopping Asian groceries online and also the website interfaces are super slow when trying to log more articles.
User Journey
Followed by the user persona, we created a user journey for Sophia. And here we found some opportunities:
- More accurate description and photo for the website.
- Know what other customers think about the products they buy.
Problem Statement
Cautious online buyers need a way to know about the product’s details that they are going to buy because they don’t want to waste time or buy the wrong product.
Hypothesis Statement
We believe that having more customers will be achieved if cautious buyers attain to order articles with personalised options (favourites / history / recommendations based on viewed articles).
HMWs
To help answer these statements, we came up with 3 HMWs:
How might we help the customer sort out products he/she looks for easily?
How might we help customers to give them an impression of reliable website ?
How might we ensure that users will have a visual design and flow that reach their expectation?
With each HMW, we ideated different features such as G map localisation, Filters, Search, customer website feedbacks etc..for the future website which guarantee a better user experience.
Moscow Method
Thanks to the HMWs which led us to this step, we then were able to create the basic structures of our e-commerce website in using the Moscow Method. We decided the must have, could have, should have and won’t have by dot voting.
Minimum Viable Product
Then for the MVP it will have all the basic options of an E-commerce website.
The key features will be :
Product search by text field, My account (sign up / sign in), Contact, Payment securities, Marketing advantage frame, Best Seller Items, Rating, Breadcrumb Navigation, Purchase History.
On the product page, it must have: Product description, Filter sorting by, Left filter side bar, Shopping basket, pictures of products, Latest Products Viewed, Related Product, Add to favourite button, Reviews.
Information Architecture
Content Audit
As our brand doesn’t have a website yet, so we focused on their existing social medias (Facebook, Instagram) to conduct a content audit. On their Facebook page, there’re 7 post mostly on the restaurant side of the shop. Meanwhile on their Instagram account, there’re 15 post mixing products and presenting the shop itself.
Site Map
According to our MVP, we created our site map which includes all the basic needs of an e-commerce website and also one personalised feature ‘shopping through recipes’. During the stakeholder interview, we were told that the shop also sell some holiday gift packages so we decided to add this feature on our website as well.
User Flow (happy path)
We then created a happy path for Sophia: after landing on the website she add sone potato chips & 2 bottles of sake and then make the purchase as a guest.
Low-fi concept sketches
Low-fi Ideation
User Testing
We’ve conducted 4 user testings on our low-fi ideation and here’re some interesting feedbacks.
On the payment page:
1. Payment information area could be neater , e.g. three tickboxes display only, the card information area auto populate if users click credit card.
2. ‘Credit card/Debit card’ instead of ‘Credit card’.
On the product page:
- Product Title and Brand Name could be displayed together.
- Similar products should not be too close to the product picture or make them smaller at least.
- Subscription button: I assume there should be a tickbox after ‘I subscribed to the newsletter’.
Mid-fi wireframes
Usability Test Report
For the mid-fi wireframes we also conducted a usability test on 6 users. According to these users, ‘cart appears out of nowhere’, ‘customer reviews too small’, ‘not sure if the tax was included or not’ and etc...Thanks to these feedbacks we were able to make some modifications towards a better version.
Visual Design
Visual Competitive Analysis
Brand Attributes
Moodboard
Color Palette & Typography
As the stakeholder has mentioned during the interview, he’d like to continue using their existing graphic chart as well as their existing colors for the future website. So we chose #012D50 as our primary color and #F5C885 as our secondary color.
Style Tiles
Desktop Hi-fi wireframes
Mobile Hi-fi wireframes
Desirability Test
We also conducted a desirability test on usabilityhub.com after we finished our Hi-fi prototypes. We had 22 participants in total and 52% of positive votings saying that it’s clear and simple as an e-commerce website.
Takeaways & Next steps
This is my first project with stakeholder involved, and I found it’s not that easy to design a website which meets both needs of stakeholders and customers. Also as we were a team of 5 junior designers and we had a limited duration of 2 weeks, time management and good coordination was really important for a project like this. During our project in using Agile methodologies, I found that Kanban board really helped us to better manage our project. Last but not the least, user feedback is a key point for UX Design.
For the next steps, we will finish the user flow on mobile and tablet devices. And then we’ll interview the stakeholders about our design and get feedbacks and then make some improvements. Also we need to do user testing on a larger scale of users and get feedbacks. The final step will be launching the site and fulfil our project goal.
