During the summer of 2018, I worked with a team of engineers and led the design of for Shaap, a mobile app 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.
Project role: Product design, UI/UX design, information architecture, process flow, branding, illustration
Tools: Figma, Adobe Illustrator
The Design Challenge and Process
Shaap is essentially a web browser app that utilizes a custom built data acquisition software to identify e-commerce sites across the entire internet, capture their front-end data, and display it back to the user. Because Shaap can dynamically organize and display e-commerce site data, users can shop on various websites of their choosing simultaneously, discover brands that might be of interest, store products, and talk about items with friends.
While onboarding the project, I identified the main challenges that needed to be addressed through design.
Other important design constraints and challenges identified are seamlessly introducing a foreign mobile concept to new users, promoting users to utilize features Shaap have to offer, and creating a product that aligns with both user and business needs.
I addressed these issues through a couple of design prospects: information architecture, user interface, and brand identity.
Research on Mobile Shopping
With limited screen space and unaccommodating browsing support, mobile shopping lack many of the core benefits exemplified through desktop e-commerce. 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.
Framing the problem
After identifying pain points, we decided functionalities that would improve the mobile shopping experience.
The main concept of the app surrounds browsing items on different e-commerce sites. Other features of the app, such as discussing items with friends, saving products, and exploring new sites and products, serve its essential browsing feature. The navigation separates the app into different tabs according to its function. The shop page carries out the app’s browsing capabilities and is thus the center screen and the default page users will land on upon launching the app. Surrounding it are the discover page, chat page, and saved items page, and other features that support the browsing experience of the app. The profile page is used for practical, non-shopping related functionalities, such as editing settings and information, and is tucked at the very far right.
Shop: easily find items on various e-commerce sites
The shop page has two main functionalities: prompting users to add sites and explore products. These two functions will usually be performed separately: users will add a few sites first, and then browse items from the sites they added. This separation is similar to internet browsing habits where users will first type in a site or a keyword, and then browse the selected site.
Iterating design solutions
I started working on the shop page with rough wireframes and initial UI layout. Each design was iterated after discussion and consideration of constraints.
Final Shop Design
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. The first is an expandable search bar that allows users to type in site or keywords. When engaged in this site-adding mode, search results appear in a list. After the first site is added, the body of the screen shows suggested similar sites generated 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.
Once users have added sites, they can tap out of the search bar or press done on the keyboard to browse items from added sites. The search section collapses into a top horizontal bar to indicate all added sites. Because some users like to browse by category of products, I chose to call out product categories in a horizontally scrollable list at the top section of the screen, where filters are displayed from most to least popular.
Using cards to display product information
To organize the diverse types of product on different shopping sites, I modularized product image, price, and name with a card component. Tapping on the product card displays the actual site the product is sold on. Because I didn’t want to take the user out of the Shaap app experience, external sites are visually embedded into the app, where snippets of the Shaap app is still revealed in the background.
Sharing and saving a product
Sharing a product to friends introduces a fun social aspect to online shopping, and can be easily achieved with the app. By either tapping on the chat icon on the product card or the share button underneath the product page, users are able to select a handful of friends to send the products to.
Home: finding the best way to discover new sites
The home page is a great place for users to jump right into browsing products when they don't have any site or product specifically in mind. The page shows a range of sites and products, including individually generated suggested shops, recently viewed sites, and saved products. Designed as a sampler plate of a little bit of everything, the home page presents a wide range of options users can choose from.
Chat: reaction-based messaging makes product sharing fun and engaging
The chat comes with its very own custom emojis. Whenever a user receives a product from a friend, reactional emojis pop up for the user to respond with. By incorporating facial expression and imagery in addition to words, chatting feels more organic, fun, and exciting.
In an active chat with a friend, the user can also share a saved item with their friends directly.
Here are a few emojis I created for Shaap.
Saved items: finding the best ways users can organize and view interested items
Profile: keeping it simple yet effective
The profile page doesn’t need to be anything fancy but contains all necessary features. Because the profile page is mainly about the user, I decided to give a large screen space to display the user’s name and profile picture. I also utilized colored icons to distinguish between the various functions.
Welcome screens: creating a friendly on-boarding process
Designing 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 that flows seamlessly. A system of cards was established to dynamically and effectively organize product information. Throughout the app, I also sprinkled quirky user interactions with the use of emojis and lively illustrations.
Shaap is ultimately an app about the user and their leisure, and its visual identity echoes exactly that.
Shaap was quite different than most projects I’ve worked on. As the sole designer on the team, I learned to prompt engineers to chime in on the creative process with information, input, and feedback.
Innovative technology comes to life with good design. While working on Shaap, I focused on enabling the 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.