Create a new user e-commerce experience for Popchef, a startup which revolutionize how we lunch.

ui-ux designer

eatpopchef.com

popchef-imgpopchef-img

Popchef is made for employees, those who don't have too much time to lunch at their office.

The solution 

Build a quick check-out, increase meal overviews, with a small introduction with essential informations for new users. 

Wireframes

Build the skeleton

popchef-w-homepopchef-w-home

Create some basic UX principles

Add to cart animation

popchef-anim-panier4popchef-anim-panier4

Displaying product's details

popchef-anim-cardpopchef-anim-card

A cards based design

cardscards

We needed a very simple layout to showcase dishes. Cards work perfectly because of their good design and great usability. They are one of the most flexible layout formats for creating rich content experiences. Popchef users seek out information pretty quickly, and cards serve it up well, regardless of device.

popchef-cards-statespopchef-cards-states

Simplify the ability to add the same product multiple times :

popchef-anim-addcartpopchef-anim-addcart

The output

Home & product page

popchef-screen1popchef-screen1
popchef-screen2popchef-screen2
popchef-screen3popchef-screen3

One page check-out

We decided to keep all checkout informations in one page. We put same informations together, we win some height space, and we always keep a recap in view. The results are pretty good : quicken the pathway to purchase, for people in a hurry at lunch time.

popchef-screen11popchef-screen11

Some other pages

popchef-screen6popchef-screen6
popchef-screen7popchef-screen7
popchef-screen8popchef-screen8

Additionnal credits

Art direction

Logotype and colors provided 

Some of the pictures are from Unsplash library

arrow_up Created with Sketch.