Shoptimize: Optimizing mobile shopping experience with easy-to-use comparison feature.

Context

Online shopping offers easy access to details such as discounts, delivery options, reviews, and much more. However, comparing products, stores, and other various factors still remains a challenge. Shoppers often juggle several tabs, rely on various sources, and invest significant effort and time before making a purchase decision.

Timeframe

6 weeks (100 hours)

Role

Solo student project

Mentor: Pelumi A.

Project type

End-to-end mobile app concept, MVP

Tools

Figma, Maze, Figjam, Whimsical, Zoom

Problem to solve

How might we make the comparison process easier during online shopping?

Solution preview

Shoptimize is mobile app concept that seamlessly integrates a comparison feature with both list and table options, allowing users to compare both stores and products.

Jump to final design ↓View Figma prototype

User research

It is time consuming and mentally exhausting to process and compare large chunk of information while shopping online.

I interviewed 8 people to understand shoppers’ buying journey, focusing on how they process information and weigh various factors that lead to final purchase.

Main pain points I heard from users:

Overwhelmed by search results

Search results display large amount of information for users to scan, sift, and filter.

No one place to consolidate findings

Users had multiple tabs open to compare. Took time to switch among the tabs. Also, had to remember details in order to compare.

Hidden factors affect the final price

Users often discovered shipping cost, tax, and other fees that affect the final price during checkout, hindering transparent comparisons.

Lack of standardization

Making parallel comparison required more attention to detail. Attributes for products (units, features, etc.) varied across different sites.

USer persona

The target user is a conscious shopper who is motivated to save time, energy, and money while online shopping.

Defining the problem

Problem

Comparing products, stores, and other various factors while shopping online is a time consuming and mentally exhausting activity.

Refined the HMW question from broad:

How might we make the comparison process easier during online shopping?

To descriptive:

How might we create a transparent, personalized and comprehensive mobile shopping experience that seamlessly integrates comparison feature?

And how might we create 'seamlessly integrated comparison feature' so that users can easily compare both products & stores, saving their time, effort, and money?

Solution

A well-integrated and easy-to-use comparison feature that allows shoppers to select their preferred type of comparison for any situation.

Auto-generated list that compares a single item across multiple stores.
Customized table that compares multiple items side by side.

Usability testing

Clarifying the language and giving more control to the users.

I conducted 2 rounds of usability testing, each with 5 testers (10 testers total). Overall, 5/5 users in both rounds were able to successfully onboard, search, compare, and save bookmarks.

However, significant improvements were made in each flow to clarify the language for consistency and to give more control to the users.

Jump to final designs ↓View Figma prototype

1. Onboarding: Reducing the number of taps and time spent on scrolling

First round

Issue: Users had to tap three times in order to arrive at sign up page. 3/5 testers expressed the need for skip button.

Solution: Provided bottom panel with options for get started, log in, and continue as guest, reducing the number of taps.

SEcond round

Issue: Users had to keep scrolling to select stores. 2/5 testers expressed potential issue of taking too long to scroll to find a store.

Solution: Provided a search bar to give users control over their store choice and to save time from scrolling.

2. Search: Keeping the design of the interface aligned with its function

First round

Issue: 3/5 testers were confused by the ‘customize your search’. The separate card made the feature appear as a required step.

Solution: Moved ‘customize your search’ closer to search bar and revised the design to be a text link for consistency and clarity.

SEcond round

Issue: Although 5/5 testers were able to search using ‘customize your search’ link, one user was confused by the search bar.

Solution: Changed the design of the search bar to a text field in order to indicate a continuous action on the screen.

3. Compare: Giving users the freedom to choose the type of comparison

First round

Issue: 5/5 users found the ability to compare single item across multiple stores valuable. However, 2/5 users inquired about comparing multiple products side by side.

Solution: Conducted extra research on comparison tables. As a result, I added a pop up upon clicking the ‘compare’ button, giving users the option to choose their preferred type of comparison.

⚠️ Challenge: In order to include the comparison table feature, I went back to beginning of the design process, conducting extra competitive research, adding onto sketches, and revising the user flows.

SEcond round – 1

Issue: 4/5 testers expressed that they were confused by the language in the pop up.

Solution: Included heading, enlarged icons, and revised the language for scannability and to clearly depict the difference.

SEcond round – 2

Issue: 5/5 testers did not find the filter option but went straight to individual chip to customize the comparison list.

Solution: Comparing single item among multiple stores contains smaller number of choices.

Therefore, users will likely engage in compensatory decision making.¹ So, full-scale filtering is not necessary. I removed filter icon and revised the chips to be on/off.

1. Source: Nielsen Norman Group

4. Saving: Using familiar icons and improving organization for easier navigation

First round

Issue: 4/5 testers were confused by the plus icons. Expected familiar icons such as heart & bookmarks for e-commerce platforms.

Also, the label for navigation tab ‘collections’ was unfamiliar to all testers.

Solution: Changed the plus icon to a more familiar bookmarks icon.

Also updated the navigation label from 'collections' to 'bookmarks' to keep the language consistent.

second round

Issue: While all testers were able to bookmark successfully, 3/5 testers wanted better organization for the bookmarks tab.

Solution: Created separate tabs for products and comparison pages for improved organization.

Final designs

Introducing Shoptimize, a mobile app that makes comparison simpler when you shop.

View Figma prototype

A tailored shopping experience based on your preferences.

Answer a few onboarding questions and enjoy a search experience that prioritizes your shopping preferences.

Customize your search with filters you want.

Whether you know exactly what you want or just want to explore, Shoptimize's search feature supports both.

Choose the ideal comparison type for every situation.

Compare a single item among competitors to find the best deal.

Or compare multiple items side by side in a customized table.

Save your comparison results and come back to it later.

Stay organized with our bookmarks feature. You can easily create new boards and save individual items and pages in unique ways.

Further thoughts

Having consistent metadata is integral for creating consistent categories for comparison. However, because the current MVP supports all categories and does not specialize in any one industry, it is quite hard to upkeep consistent metadata.
If this were a real life project, working with engineering in the ideation phase to determine the feasibility of the design is a must.
Displaying large chunk of information in a digestible layout on a mobile screen was a challenge. I want to continue iterating upon the layout of the comparison list and table to find the most effective design.

I want to conduct a large scale research to find out the most suitable comparison feature for different occasions, industries, and consumer types.
I also want to integrate AI tools such as chatbots and image search capabilities to improve the customization and search experience for the users.

Shoptimize

Thanks for stopping by!