Shop and Browse

Rethink mobile online shopping


Interface designer
Prototyper


PM x1
Front-end x3


4 months

PROBLEM
Inefficient shopping experiences
Customers complaints

IMPACT
(Implementing)

EXECUTION
Many interactive prototypes in Framer

Create scalable shopping & browsing experiences

There used to be only 3 merchants on the Wing app, and therefore large store tiles were used deliberately. But now Wing has 10+ stores, this design presents usability issues and limits scalability and new feature integration.

Drag Reveal

Horizontal scrolling is not the most comfortable and natural thing for your thumb, so each section limits 5 items to reduce strains on the joints and shortcuts the navigation without lifting your thumb by following the already-performing drag motion.

Drag Browse

You can simply drag left and right to preview the popular items in a store on the home screen, which allows you to browse more items without navigating back and forth.

Point and choose, literally

Inspired by clean and clear topping layout in physical restaurants, a pill-based customization makes it easier to choose without opening and collapsing million dropdowns.

Prototype made in Framer Web with javascript, React, and typescript.
Try it

Flat hierarchy: browse in a store

Inspired by the persistent anchor and presence shopping in physical stores, the same layer left-right navigation modal removes complexities and inefficiency of context switching.

Flat hierarchy: look at an item

Continuing the flat hierarchy concept, using the bottom sheet for item selection is as if you're picking up an item in a physical store, a temporary but focused task, but you're also aware you are in the same physical space at the same time.