Designing ListWish (updated)

ListWish is a web application that allows budget-conscious online shoppers to aggregate all the wishlist shopping items in one place.
My goal was to design and prototype a problem-solving interface that effectively decongests the complex procedure of choosing what to buy among the many items saved into the shopping carts of multiple online retailers.
This document shows part 1 of the two design case studies conducted out of a hypothetical SasS product I designed for a class assignment. The prompt of the assignment was to come up with a UX solution that solves a real world problem.
Project Background
Tools and Methods - Designed in Figma - Prototyped in Protopie - Digital / Pen & Paper Sketches - Group feedback session
Format - Web application and a paired Chrome extension
Time and Duration - April of 2022 (for 3 weeks, including one week for UI design)

Exploring the Problem

Problem Statement

For consumers who shop across many different online stores, the dispersion of choices stored in the shopping carts of each website causes frustrations in finalizing the items to purchase. If only there was a way to aggregate all the wishlist shopping items and organize the information in one place, then a consumer could make smarter purchasing decisions by being aware of the selections and budget.
An online shopping is a complex activity which a shopper has to make decisions among the products, for most of the times, which they have only seen through the monitor. Longer the shopping list are, more stressful the activity becomes.
The biggest problem of online shopping comes from that a shopper cannot view every potential choices at a glance unlike when they shop offline. Because each of the choices are visualized in a different depth of the website which extra clicks are needed to be reached, shoppers are more prone to making poor decisions out of confusion. Seeing one product, and clicking on “go back”, and clicking on a new thumbnail image of another product is a lot more stressful than comparing two products in front of your eyes at an offline store.
Suppose a person wants to buy their summer clothes, and they are browsing different websites to find the best items. They add a tee, a pair of sandals, and a skirt on the shopping carts of three different retailers. After two days, a person is ready to make payment for the items. They log into the first store and thinks that they have missed adding sandals, which is in fact stored in the shopping cart of the other store.
A problem of purchase tracking also arises from that shoppers need to wait a significant time to receive the shipped product.
To solve these problems and frustrations, I decided to focus on the all-in-one visualization of the online shopping experience that potentially lowers the stress of the shoppers. My design would encompass the UX solutions in:
1.
making smart decisions for the final checkout, for the users who would identify themselves as conscious consumers
2.
planning of purchases within the budget set by the users
3.
tracking of purchases

User Research

To make sure that this problem isn’t a problem to a few, and to collect insights for the business model, I went into a holistic research of a potential market for the product and users who would need a new framework for making an online wishlist.
As of April 2022,
•
There are 2.14 billion online shoppers in the world.
•
The average cart abandonment rate is 69.57%.
•
Most purchased products online are consumer electronics, books, and apparel.
•
40% of shoppers think their shopping experience would be better if retailers offered a wishlist where they can save items they’re interested in.
By taking a tour of the online shopping statistics, I could confirm that:
•
Many people utilize the shopping cart feature offered by the online stores, and fill their shopping cart before the purchase but spend a long time to empty them.
•
The items bought online are closer to the luxury goods than the necessities that are in an immediate need. Therefore, the shoppers demand more time and consideration until they could hit the checkout button.
How do people shop online?
With a brief idea I had about an online wishlist, I asked a friend and a relative who are avid online shoppers to hear their real frustrations of the current online shopping experience. They had different lifestyle and personality but were common in that both shop more items online than offline, and had frustrations closely related to the problem that I was striving to solve.
I gathered each person’s key characteristics and the pain points they identified, constructed two virtual personas, and assigned a particular action they would want to perform.
I broke down into a detailed online shopping journey of Sam, who had a broader and open-ended task of “shopping for the upcoming summer trip”.
Current journey of shopping items across many different online retailers
To get the ideas for the possible features of my product, I wrote down pain points in each step and the rooms for the opportunities.
Step 1: When listing down which items to buy
•
Wish list are created manually with a pen and a pencil
⇒ A digitalized wish list that could be accessed everywhere and anytime through cloud service
Step 2 and 3: browsing wish list items on different stores and filling in shopping carts
•
Since shopping cart items are dispersed on different websites, it is hard to view on which website each of the wish list items are located in
•
More confusion as more items and stores they’ll shop from
•
Should perform a manual calculation to get the estimate of total purchase amount
•
Should sign into the online stores to check the items stored in shopping cart
⇒ On an online wishlist,
•
Auto-calculate total price of all items stored in multiple shopping carts and check whether it is or not within the budget
•
Link each item on the list to the product details page of the online store for a easier access
Step 4: Checking on the wish list if everything is well put into the cart
•
It is difficult to map each needed item to a product sold online
⇒ On an online wishlist,
•
Differentiate item in need (ex- wireless earbuds) from the actual product that are sold (ex- Apple Airpods)
Step 5: Checking out from the stores
•
Can skip some items or mistakenly buy similar items
⇒ On an online wishlist,
•
Use modal window to display the wish list so that users can refer to it when checking out
•
Enable access to the past wish list and display the items they have purchased before
Outlining the product
I will design a digital wish list where users can store their shopping carts from different online retailers, which they can refer to when checking out.
With it, users don’t have to repeatedly add and delete items from the shopping cart, and see the essential information of every wanted items on different stores at a glance.

Competitive Analysis

I searched for existing services that offer functionalities to view every cart items at a glance and build wish list prior to the purchase. I analyzed each app to see if there are shortcomings that fail to cover diverse user needs and pick up some opportunities or insights.
ZIGZAG
Zigzag is a popular shopping service in Korea. The app ranks online stores of different retailers and sorts them out in categories. Every new products from hundreds of online retailers are updated automatically and to make a purchase users do not have to sign up to each stores, but just tap checkout button to pay via “Z Pay” integration.
Zigzag has become a meta solution to link all the online retailers and products though a single app interface. However, it couldn’t become an exclusive tool to plan the purchase within the budget because the service’s business model was to increase revenue through collecting commission on each Z Pay purchase.
WISHUPON
WishUpon is an app which users can store the product links to build their own wish list.
This app had more jointed features for users to build a custom wish list. Nevertheless, I discovered the limits of mobile screen while using their features to plan a tentative purchase. I also spotted a critical technical limit—users should manually input the price and product description when they want to save an item which isn’t offered in-app.

Suggesting a Solution

Solution Statement

From the insights gathered from the research, I wrote my UX solution appending on to my previous problem statement.
Newly Designed Journey of an Online Shopper
On this new journey, online shoppers:
•
Can compare the prices across different online retailers
•
Painlessly finalize the items to check out
•
Can be aware of total spending
•
Can make smarter purchase decisions

Designing the Interface

If my focus is the visualization of wish list, what form should it take? I decided to stick to web application format, best operated on a desktop computer, which will allow a wide and open area to display the contents. Then I brainstormed how to structurize the key functionalities of the app in most effective flow. I made a lot of sketches and drafts of the UI that best delivers the essentials of my UX goals.

Drafting the Architecture

The proposed wish list system should be easily integrated with the products sold online, allowing users to build a functional wish list which they could refer to when making purchase.
However, linking user account for each online store and wish list app in order to grab the products in the shopping cart and to auto-update changes on the app to the cart products, was the technical/business-level difficulty that were likely not feasible. So I thought of a browser extension as a tool to link the products and wishlist app, which would bring shopping cart data to the wishlist app by parsing the webpage sources. The extension would be used again later when all the purchase decisions are complete, and the user should finally check out from the stores.
There would be 3 main tabs to achieve primary functionality.
•
[Cart] tab is where exported shopping cart items will be imported in bulk
•
[Wish] tab is where users make their wishlist & plan the purchase
•
[Archive] tab is where users view and manage past wish list.
The Web App Architecture
Next, I invented the hierarchy for [Wish] tab that would ease the planning procedure and making the final decisions.
The UI Hierarchy
Finally, I named the app ListWish to be intuitive and remarkable as a SaaS product.

Styles

I drafted the logo and styles briefly and made a styleframe screen. I am working on enhancing and refining this rough style guide with full design assets to brand the product.

Final Designs

 Double-click the image to enlarge

Key Features

Screen-to-Screen Walkthrough

Expected flow of a new user
Prototyped with Protopie

Reflection

Error handling
To fit my schedule into given time limit, I couldn’t pay much attention on how to handle some potential errors such as “What should happen to cart items if the board is archived” or “What if users want to buy more than one same product?”
Brief User Testing & Feedback
I recruited a friend who came up with the rough idea with me as a user tester and received some basic feedbacks about the prototype in the following criteria:
•
Usability
•
Intuitiveness
The Boards, Bubbles, and Boxes were easily understandable. She commented that the product might give more positive outcomes than my expectations. More use cases could be found other than making a simple wish list for an online shopping.
She liked that I chose to design primarily for a desktop format, since most wish apps put mobile at first. But she also stressed the significance of being able to access the web app on mobile as well. In the future I could probably try transforming my fixed screen designs into responsive web designs.
Next Steps
•
Advanced prototyping on Protopie
•
Design a hypothetical landing page to promote and introduce ListWish
It was difficult to make a clickable prototype with Figma because of the product’s nonlinear flow. I am planning to prototype the app for a further usability testing with a more powerful prototyping software such as Protopie. When prototyping, I wish to add some more interaction animations that would make the user experience smoother and sleek.
I am also planning to design a hypothetical landing page for the product as an appendix challenge of this project.
Thank you for reading! You can also download a pdf version of this work here (click on the folder icon) If you are interested in further developing this idea or learn more about my work, please don’t hesitate to contact me. I’d love to talk more about the detailed design keypoints and decisions in depth!