Project 2 : Online food shopping with a “one-click add to cart” feature: Shop & Cook

Project overview

Scope & constraints

  • 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

Features & Brand comparisons
  • Product search by a text field.
  • A signup / sign-in account.
  • Customers feedback.
  • A breadcrumb navigation.
  • A filter sorting on a left sidebar.

Users research & interview

Affinity diagram
  • “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.”


“The Cautious shopper” persona

User journey

Define the problems

Lean UX Canvas

Problem statement

  • 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?


MOSCOW method for BÔ & ME E-commerce

BÔ&Me MVP E-commerce website

  • 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


User flow

Sophia’s Happy path

Concept testing and Low-fi

Concept sketching
Low fi main pages: home, item, products, and payment funnel
  • 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

  • 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.
From low-fi to Mid-fi : homepage first screen Before and after
Mid-fi happy path prototype
  • 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.
Mid-fi Shop & cook prototype
  • 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.
  • 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
Shop & Cook before and after redesign

Brand personality and Visual Design

BÔ & Me shop
The 5 brand personality keywords
Brand Mood board from the 5 keywords
Brand mood board peer testing on Slack

Mockups, Hi-fi prototypes and desirability testing

Happy path 3 main mockups: Home page, products page, item page.
Master components page: icons, buttons, cards, overlay & navbars.
Hi-fi E-commerce prototype
“Shop and cook” 2 main mockups: Recipes page and One recipe focus page (Screen 1,2,3,4)
Hifi “Shop & cook” prototype

Preference testing

Final thoughts




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Platform Update: Improved Add Lore UX

A magic wand for SME from Viewst during COVID-19 period

How to Draw Rose Flower Drawings

Challenge 3 — Site Redesign

Crafting a Design Vision-the odyssey of a Young Gun

Introducing Workspace

Project 3: In search of the win-win feature.

Approaching Design System as a Part of Your Organisation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


More from Medium

How To Generate Passive Income On The Internet?

Introduction to My Page

Cold Shower Challenge Day 6

The Ultimate Tattoo Styles Guide