Project 2 : Online food shopping with a “one-click add to cart” feature: Shop & Cook
IRON HACK UX/UI design BootCamp: Case study n°2
Project overview
The second team project is done after 2 weeks of hard-working. We had to find by ourselves a client to redesign its E-commerce or to make from scratch. Thanks to one of my teammates we quickly found ours: BÔ & Me, a restaurant and an Asian delicatessen based in Lyon that opened this autumn 2021.
The team : Jing, Anaïs, Patrice, Yumi, Matthieu (myself).
Our goal :
To develop the current BÔ&Me brand identity and to define a user flow through a responsive e-commerce HI-FI prototype for the fictitious MVP of our client.
We answer twice to this goal by designing :
1A responsive website from the delicatessen online product discovery to the payment funnel which affords nowadays user e-commerce expectations.
2 An innovative way to shop food online through recipes with a “one-click add to cart” feature: “Shop & Cook”.
Scope & constraints
At the very beginning of the project, we learned from the owner call interview that :
- BÔ & Me isn’t an Asian mini-market or a high-end shop but a specialized delicatessen with ten product categories and a hundred produces that consumers can’t find somewhere else around Lyon city.
- The stakeholder wants to increase sales by delivering its delicatessen products online in the cities around Lyon, and increase the number of restaurant customers. (But we don’t have to design the restaurant dedicated pages.)
- BÔ & Me current website is one page only with the address and 6 pictures taken from the brand Instagram: we’ll do the e-commerce prototype from scratch.
- There are no other stakeholders: BÔ & Me restaurant and delicatessen owner only. But a graphic chart was made by a business communication agency.
Business analysis
We started to search on google map the favorite Lyon consumer’s french and Asian delicatessen.
From the BÔ & Me owner interview and team research like the one above, we selected these 3 E-commerce competitors: Au Palais Grillet, Comtesse du Barry, and Satsuki.
We identified some features that could be a must-have for BÔ&Me's future website.
On the Home page :
- Product search by a text field.
- A signup / sign-in account.
- Customers feedback.
On the products list page :
- A breadcrumb navigation.
- A filter sorting on a left sidebar.
Based on the above competitor analysis, we projected BÔ&Me's current market positioning and where we would like to move it.
Users research & interview
We didn’t have the opportunity to interview the best BÔ&Me consumers but we interviewed 5 online Asian grocery users. We wrote their answers on sticky notes in an Affinity diagram and clustered them on subheader and header to start to understand their current online experience: with so many negative red sticky notes, bad online Asian grocery user experiences pop up clearly!
Then we team voted and selected from it 4 main online Asian grocery pain points :
- “The websites are not well done so I’m concerned if I can trust them.”
- “Asian online food shops are slow and usually a mess.”
- “These websites don’t show customers reviews about the products.”
- “Asian food products pictures are small and their text descriptions are too short.”
Persona
From the interviews and findings, we defined a primary persona: Sophia the cautious shopper.
User journey
Then we built a current Sophia journey: a coworker advise her to visit an Asian grocery website because she wants to invite friends to a tasty and discovery Asian diner next weekend but didn't succeed as much as she wants.
Define the problems
We built this Lean UX Canvas: To gather all our findings, to define a clear problem, and to help our teams to frame our work as a business problem to solve.
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.
From it, we write dozen of How Might We and selected three of them in order to ideate accurate features.
- 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 a reliable website?
- How might we ensure that users will have a visual design and flow that reach their expectations?
Ideation
We used the MOSCOW method to sort all our brainstorming ideas we had after the How Might We previous step, to only keep the must-have ones as the core feature of the BÔ&Me E-commerce.
BÔ&Me MVP E-commerce website
The MVP will contain only what is needed to give BÔ&Me website customers a realistic experience of how the product would work.
- The key features will be :
Product search by a 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, Left filter sidebar, Shopping cart, Latest Products Viewed, Related Product, Add to favorite button, customers Reviews.
Information architecture
Site map
From the ideation step, we draw this sitemap to define the primary (red) and secondary (blue) page hierarchy. The secondary page link will be reachable by a dropdown menu. The page dedicated to the restaurant that is not part of e-commerce but is on the same website will be clearly placed apart from the other links on the main page on the navigation bar of the header.
User flow
With the Site map in mind, we improved the “Sophia, the cautious buyer” journey by following the opportunity we previously had put forward to make this happy path. On the BÔ&Me website, Sophia will discover and buy some products then she will review her cart and pay as a guest.
Concept testing and Low-fi
We sketched each main page on paper and then again on Figma before making a user concept interview first round.
Thanks to the concept testing we learned that :
- Users understand in 5 seconds that they’re on an E-commerce and find the features they need.
- Users don’t understand that they can click on the grocery picture on the home page to reach the e-commerce pages.
- Users prefer to discover products from website navigation rather than using the search feature.
Mid-fi prototyping and testing
1Moving to build the Mid-fi prototype, we upgraded some items of the design from the user concept interview first round :
- We added a button on top of the pictures.
- We reduce the search bar. When users will click on the magnify button, the full search bar will expand.
- We put the restaurant link on the very left side of the header nav bar to express clearly that it’s a dedicated webpage.
We use the main products page and the main item page as a template for the full Sophia Mid-fi prototype happy path. Then we did a second round of testing.
Insights from 5 moderated usability testing interviews :
- 100% of the tester succeed to put 2 products in the cart and proceeding to the payment.
- Users would like to interact with the customer's review feature, to read and write one.
- Users would like to know if deliverability is free.
2 We started to sketch the shop & cook landing page (where users will see a list of Asian recipes) and the one recipe page. Then we did straight the Mid-fi prototype. The user will be able to put in his cart all non-fresh ingredients in one click and check them in a scrollable overlay cart before reaching the payment funnel.
Finally, we did the first round of usability testing for it. We discover that :
- Most of the users will use the “shop & cook” feature, but only for special diner events.
- Users don’t understand the utility of the 3 steps.
- Users want a positive way to understand that BÔ & Me doesn’t sell fresh produce.
- Users would like to see cookers reviews + their pictures.
- Users would like to share their recipes.
Shop & Cook Redesign
Following the above users feedbacks :
- We removed the 3 steps and switch the content hierarchy to regroup all recipes information before the BÔ&Me shop area.
- We added a cooker review about the recipe.
- We added an Instagram API area that will show the picture with the hashtag #BOMEcooking
Brand personality and Visual Design
Before to defined the BÔ & Me visual design, we check its competitor's ones. We looked at typography, palette colors, and main components.
Then, inspired by the interior design and the specialized product marketing of BÔ&ME, we defined the scope of the online brand identity with words and pictures.
We launch a round of peer testing on slack, asking them 3 words about the mood board to receive perception feedbacks.
Finally, we added some neutral and functional colors to the graphic chart’s primary and secondary ones shared at the beginning of the project by the BÔ&Me owner. We selected the “Fira Sans” for the titles and the “Roboto” for the body after using the Fontjoy website to ideate.
Before moving on to the Visual Design mockups steps, we checked that both primary and secondary colors contrast were AAA compliant with the Figma plugging Stark.
Mockups, Hi-fi prototypes and desirability testing
1We started to make the mockups of the home page and both template pages of Sophia’s happy path: the products list page and the item page.
We designed the Atoms, Molecules, Organisms of the template’s pages, and alongside, we built our master components page to improve further workflow.
Then we used the page template to design all the happy path Hi-fi prototypes that you can test here.
2 Finally we design the mockups of the “Shop & cook” landing page and the recipe page template. You can test the Hi-fi prototype here
Preference testing
We used usabilityhub.com to test BÔ & Me’s new home page versus the Comtesse du Barry and Fresh Delivery ones.
52% of the 22 participants found that BÔ & Me design was easier to understand!
Final thoughts
This challenging two weeks team project was full of great opportunities :
To define both an overall UI which reaches users nowadays e-commerce affordance and to test an innovative feature in order to overtake user's expectations: “shop and cook”.
To improve my interaction design skill by learning to do a horizontal scroll + drag scroll + opening/closing a product pic inside an overlay cart. Test it here
