Knock Out

Electronics Comparison App

UI/UX

2022

2022
Introduction

In 2022, most of us can't live without consumer electronics, whether phones, computers, blenders, you name it. With so many choices, choosing which product best fits our needs is challenging.

Knock out aims to centralizes consumer electronics information by providing detail-oriented comparisons. Users can easily switch between brands and compare specific details without using multi-tabs.

timeline

10 Weeks

project type

Academic, Individual

device

Android

Tools

Figma, Invision, Otter

understanding the problem

Consumer fatigue & search gaps are codependent

I noticed when buying consumer electronics, there is an enormous gap between wanting to buy a product and actually purchasing the product. The process is definitely not linear and could take up to about 1 month. During the decision period, personal indecision and multitasking creates an endless loop of research and fatigue. Users are only motivated to purchase when sale triggers.

So why does it take so long?

  1. Consumers expect a price drop, caused by external factors they cannot control
  2. Shopping fatigue, caused by internal factors such as indecision and multitasking

This creates an endless loop of research and fatigue until the sale sign appears.

  • higher fatigue levels increase the number of gaps=consumers to abandon their search
  • 43% of consumers take at least one break

Being unable to reset fatigue causes

  • Searches to decrease by 20%
  • Purchases to decrease by more than 6%

Top sales

  • Consumer electronics is forecasted to be the top selling category in 2022, at $219 billion
  • The industry is swimming in cash, but our journey of purchasing isn’t improving

As for consumer behavior, 80% start browsing on mobile first before heading to the desktop, and 50% of consumers shop more mobile than in-store.

  • 80% start browsing on mobile first before heading to the desktop
  • 50% of consumers shop more mobile than in-store.
user interviews
Participant Criteria
  • Between the ages of 25-40
  • Uses a computer/mobile phone
  • Online shops for consumer electronics
  • Purchased an electronic item within the last three months
  • Sometimes become frustrated and pause their search because they don't know what to choose
Sample Questions
  • What are some of the things you keep in mind/are important to you while choosing products?
  • What are the main challenges you encounter when shopping for electronics online?
  • How do you compare electronic products?
  • What are some things that help guide you in the right direction when shopping online for electronics?
interview analysis

Interviewees are prone to consumer fatigue, and are highly likely to find the entire experience frustrating and exhausting.

The four themes from my interviews include information research, product reviews, point of purchase, and product lifespan. My interviewees could not decipher basic specs and stats without reviews to back up product descriptions. Thus, I decided to focus on the first two categories, information overload, and authentic reviews which come hand in hand at the beginning of the journey.

Information Overload
  • General frustration comes from an overwhelming amount of information scattered online.
  • Products are very similar so cross comparing is not easy.
Authentic Reviews
  • Users rely on trusted platforms such as Reddit and YouTube for authentic and unsponsored reviews.
  • Consumers value the visual reference of human interaction, and how the product lives in its surroundings.
Problem statement

How might we simplify the online consumer electronics shopping experience for millennials in order to reduce the time and money spent trying to find the right equipment?

persona
experience map
Ideation

Accessibility considerations

I wanted to highlight the important text with different shapes or colors, and trying to figure out the right categorization for my filter group

Sketches + Flow

Select products to compare with.

Compare different brands.

Filter to find specific information.

Compare prices.

Prototyping

Catering towards 3 main flows

Usability testing 1
50/50 is preferable

All testers wish to have equal 50/50 information to compare. Without the same screen space and data, one brand will suffer more, leading to an unjustified comparison.

Consistency is key

Natural scrolling direction is the ultimate way to go. 5/5 users preferred to have the same vertical scrolling direction while comparing brands. Breaking the natural scrolling direction was new and fresh when first discovered.

Iterations i

Balanced
information

Instead of squeezing all the brands’ information into one tiny box, I created whole page dedicated to brand 2.

1v1
Comparisons

Instead of allowing users to browse through information, I limit the modal to only one review for clarity.

Usability testing 2
New users are a priority

All testers wish to have equal 50/50 information to compare. Without the same screen space and data, one brand will suffer more, leading to an unjustified comparison.

Visual cues leave a strong impression

Natural scrolling direction is the ultimate way to go. 5/5 users preferred to have the same vertical scrolling direction while comparing brands. Breaking the natural scrolling direction was new and fresh when first discovered.

Iterations 2

Training the user

Instead of only introducing a new feature, I opted to remind the several times with a modal regarding the compare feature.

Visual Reminder

Instead of making the user remember the new feature (long hold), I used the heuristic recognition rather than recall to allow the user to easily make the connection.

Hi-Fi Prototype

Task: Compare the Ninja and Philips Air Fryer.

Future Thinking

When we need information, where do we go? Reddit. Here is the source of honest answers from anonymous users. These knowledge warriors would be the perfect aids for Knock Out. I see them building a community, helping consumers worldwide find affordable options for duplicates of products, creating tailored solutions for specific consumers, and sharing the work across the internet. I see you, and I bow to you.

Key Learning

Don’t be afraid to fail
The more, the better. Things won't always pan out as you suspect, but that's okay because that's where the opportunity for improvement arises.

Embrace the human mind
The mind works in curious ways, and users will always find a way to use your app not as intended, which is not always a bad thing because the user's thoughts might inspire the designer's next move.

The End

Congrats for making it to the end!✨️
Connect with me at csquaredy@gmail.com