Shaap


I led the design for the e-commerce start-up Shaap, a mobile browser that enables people to simultaneously shop on all sites on the internet.





Project Overview

During the summer of 2018, I worked with a team of engineers and led the design for Shaap, a shopping browser that brings a personalized and comparative shopping experience across all e-commerce sites.

Shaap (previously Weel) was the winner of Johns Hopkins University's 2018 Summer Undergraduate Entrepreneurship Award.

My contribution

  • Identified user needs and engineering constraints to develop user flow and information architecture 
  • Crafted interaction model and interface design for effortless shopping
  • Established design system and brand identity

Collaborators: Eyan Goldman & Cal Lavicka (Engineers)




Design Challenge

How might we help people easily and comparatively online shop for products they enjoy?



Our Solution


Simultaneously shop on multiple e-commerce sites for effortless comparative shopping.



Ask for opinions from friends




Easily revisit favored shops and discover new ones 


Process




The problem with mobile e-commerce


With limited screen space and chunky browser interaction, mobile shopping lack many of the core features of desktop shopping. Comparison shopping, shopping across multiple sites and brands, organizing selected items, and discussing options with friends and family become a tricky task to perform on a phone.

However, our research indicates that mobile shoppers continue to grow. Shopping apps are the fastest growing app category by time spent and mobile browsing now takes up 51% of all web traffic. Technology that undertakes the complexities involved with mobile shopping reaches out to an ever-growing user base.

Seen below, pain points with mobile shopping are marked with red.






Product Constraints






Defining Functionalities


Pain points are translated into features that improve mobile shopping.





Feature Focus






Organization Structure





Design Solution


Easily find items on various e-commerce sites

The shop page has two main functionalities: prompting users to add sites and explore products.

In Shaap’s journey flow, users first look for shopping sites, then browse the sites they added. 



I started working on the shop page with rough wireframes and initial UI layouts. Each design was iterated after discussion and consideration of constraints.





Making it easy to add sites


Because these functions are performed one after the other, I decided to separate the processes into two different display modes, similar to that of a mobile internet browser. In the expandable search bar, users can type in sites or keywords.  After the first site is added, the body of the screen shows suggested sites recommended by a machine learning algorithm.

I also designed sites to visually resemble tags: each site is contained in a bubble that can be easily added, edited, or removed.



Using cards to display product information

To organize the diverse types of products on different shopping sites, I modularized product image, price, and name with a card component. 



Sharing and saving a product


Sharing a product to friends introduces a fun social aspect to online shopping. 




Reaction-based messaging makes product sharing fun and engaging

When a user receives a product from a friend, reactional emojis pop up. By incorporating facial expression and imagery in addition to words, chatting feels more organic, fun, and exciting.







Discover new shops through collections

Designed as a sampler plate of a little bit of everything, the home page features suggested shops, recently viewed sites, and saved products.



Crafting a fresh brand voice


Shaap strips away perplexity involved in the mobile shopping experience, leaving what shopping should feel like: delightful and refreshing. Shaap’s visual language reflects an elegant balance between fun and simplicity.

By painting with a limited color palette of pinks and blues against soft whites and greys, I created a vibrant visual system. 





Reflection


Working closely with engineers, I prompted engineers to chime in on the creative process with information, input, and feedback.

Innovative technology comes to life with good design. I enabled the Shaap’s innovative browser technology to be utilized in its full capacity. My favorite part of the project was generating creative solutions for all the novelty and uncertainty of a digital service I’ve never seen before to create a product that is ultimately friendly, simple, and engaging.

Say Hi!


Reach out for design opportunities or if you just want to chat.

︎︎ ayeh01@mica.edu ︎