Background

Shop.co is a recently acquired startup that created a Universal Cart browser extension, intended to save users time and money when shopping online. This desktop tool gives users the ability to shop online and check out with one click, even when shopping across different stores, by storing cart items in their Universal Cart. You can see it in action here.

I started freelancing for Shop.co when they had just started a big round of user testing, and there was an overwhelming amount of feedback asking for a mobile-friendly version of the Universal Cart. The problem I was trying to solve for, was figuring out how to scale the browser extension from a desktop platform to an iOS mobile device in such a way that the experience still felt like the desktop experience. I quickly discovered that the main challenge was how to fit the right amount of product information on a mobile screen. Mobile screens don’t fit nearly as much information as desktop screens do, but if we streamlined the information too much, it ran the risk of confusing users, since it looked too different from the desktop experience, and they could lose confidence in the product.

hero image_2.jpg

I constructed the first mockup of an app which their lead designer and developers used as a roadmap to inform their construction of the final app. Following are the main pages and features I designed.

 
 

Research

My research notes started with observations about what different personal shopping apps did well or poorly, both in look and function. I reviewed and took notes on Amazon, Ebay, Etsy, Boxed, Wish, and a few other shopping apps. While shopping from a mobile device is functionally the same thing as when using a desktop, it feels very different because of the size and orientation of a mobile screen. The main challenge was to show the essential information that users needed to see to verify their purchases and check out with confidence, and also to organize the information into a format that was intuitive and easy to navigate, without a full keyboard or trackpad.

ebay+etsy research.jpg
 

Account page and basket overview pages:

The account page is organized around the user's "carts" which are similar to any online shopping store's cart (think Amazon, etc.), where you can save items for later, view your purchase history, or even place recurring orders to replenish, say, household basics, with one click. The Universal Cart also includes a unique email address for each account, so you can monitor order-related emails and promotions all in one place.

 

 

Account +Basket_cropped.jpg

Selecting "Your Carts" navigates to the list of specific items in each cart. In this view, I found it important to give customers enough information to double-check their items, but since space is limited, only the most important identifying information is visible for each item: which store they are from, quantity, price, name, and an image thumbnail. As with much of the mobile version, more options can be accessed by selecting the overflow menu icon, for viewing and editing item specifics.

 

Hidden, yet intuitive functions  

Interaction_1.jpg
 

We referenced Material.io and Apple UI design resources from Adobe XD to create iOS standard functions. Since the Universal Cart App is intended for both young and old users, we knew that the UX needed to be intuitive and extremely clear.

For example, selecting the overflow menu icon beside each basket item pops up a toast menu with options for editing the item. The search bar is similarly hidden, and pops down when the magnifying glass icon is tapped.

 

 

Another way I found to keep the interface clean, and conceal more functions, was by using gestures familiar to mobile devices.

 

I took cues from mail apps for swiping left or right to save a basket item for later, or delete or open more options.

Interaction 2.jpg
 

High level page organization 

 

 I created this outline as a reminder for myself and other team members on the project to keep in mind how the user’s journey needs to make sense and be intuitive. Most of the App's utility is within the baskets and individual items, so I tried to organize the pages around that focal point. 

 
 
flowchart.jpg
 

brand personality opportunities

 
 

A fun part about my role was bringing a new perspective and thinking of ways to show brand personality and inject creativity into what could otherwise be sterile functions.

Once customers select "proceed to checkout" you can imagine the standard order processing pages that would load next, pretty cut-and-dry stuff. Here I concepted a load page that rather than displaying a timeline or checklist (on the left), instead feature animated cubes that snap together like magnets in a Tetris like action (on the right).

order processing.jpg
 

 My time with the company concluded with delivery of these these mockups for the Universal Cart app to the senior designer. After my departure, he worked with developers to build a functional prototype, used to successfully pitch and sell their company to a parent company. Read about the company on their site here.