Work
About
Say Hi 👋
Corner
Corner
→|
↑
The possibilities of
a ‘hi’ are endless :)
hi@maytishler.com
→
Linkedin
→
Designed and built with 🤍 by me
MAY
Work
About
Say Hey 👋
UI Refresh
Device: Mobile
Type: Experimental
Kind: E-commerce

What if Amazon's app matched
their branding?

Starting Point

Could Amazon benefit from matching their app to their branding?

Why doesn’t Amazon’s app match their website? Nor their branding? It's been on my mind for a while, so I decided to dig a little deeper.

I got to work and gave Amazon's app a makeover – simplifying navigation, speeding up checkout, and adding personalized recommendations. Could this work?

Research

The Product

Amazon's app is complex. It needs to provide a seamless in-app user experience with products, payments, tracking, all across different devices. Users expect a personalized experience, easy navigation of a lot of information, all while being reliable, efficient and secure.

Challenges
& Pain Points

🤔

Misleading
Branding

The UI fails to reflect the company's branding.

😓

Holding Back
Potential Sales

Poor experience decreases exploration, resulting in lower interaction with products.

😵

Support Team Faces High Workload

Customer support is needed to address navigation or task-related challenges.
TBH, the app felt quite messy.

iNSIGHT

Inconsistent UI design harms the user experience.

Amazon's app is complex. It needs to provide a seamless in-app user experience with products, payments, tracking, all across different devices. Users expect a personalized experience, easy navigation of a lot of information, all while being reliable, efficient and secure.

Definition

Project goals

🎨

Enhance Brand Consistency

Ensure that the UI accurately reflects the company's branding.

💵

Increase Sales Opportunities

Encourage exploration and interaction with products, boosting sales potential.

🛍️

Smoother Shopping Experience

Minimize the need for customer support, reducing the team's workload.

The Design Journey

🔍 Exploring

Briefing
Market Research
Competitors
User Journey Map
Design Trends

✏️ Planning

Screen mapping
Choosing Flow

🌈 Designing

Concept
Components
Design System

📐 Prototyping

Connecting screens
Micro-interactions

Designing

Building a design system

Amazon's Design System

Crafting Components

Applying

Selected UX/UI Improvements

🧠

Our brain processes visual faster than text.

Before the redesign, Amazon had intimidating walls of text everywhere. The app was used in various devices, each has unique set of properties - resulting the items in those lists were inconsistently sorted across the system. Even experienced users had to scan through the lists to find what they needed.
Original
Mockup
My redesign

🪨

Reducing heavy cognitive load

Organizing content based on its relationships, hierarchy and functions reduces the user's cognitive load, making it easier for them to understand and interact with the interface. This leads to a more intuitive and streamlined user experience.

I made the categories bigger and more appealing, grouped similar content together, and got rid of extra icons.
Amazon Search Before
Original
Amazon Search After
My redesign

🎯

User centered design

After research and feedback, I found out the information in the app was inconsistently sorted across the pages, and the order varied from item to item. Some information appeared even appeared more than once on the same product.

I grouped similar items together, following the law of proximity in UX. I replaced repetitive words with icons and colors for easier scanning, while highlighting important information.
Original
My redesign

Applying

Selected UX/UI Improvements

🧠 Our brain processes visual faster than text

Before the redesign, Amazon had intimidating walls of text everywhere. The app was used in various devices, each has unique set of properties - resulting the items in those lists were inconsistently sorted across the system. Even experienced users had to scan through the lists to find what they needed.
Original
Mockup
My redesign

🪨 Reducing heavy cognitive load

Organizing content based on its relationships, hierarchy and functions reduces the user's cognitive load, making it easier for them to understand and interact with the interface. This leads to a more intuitive and streamlined user experience.

I made the categories bigger and more appealing, grouped similar content together, and got rid of extra icons.
Original
Mockup
My redesign

🎯 User centered design

After research and feedback, I found out the information in the app was inconsistently sorted across the pages, and the order varied from item to item. Some information appeared even appeared more than once on the same product.

I grouped similar items together, following the law of proximity in UX. I replaced repetitive words with icons and colors for easier scanning, while highlighting important information.
Original
Mockup
My redesign

Other UI Tweaks

Consistent Icons
Original icons
Amazon's original icons
New icons
Amazon's old icons
Image Style
Categories
Categories
Items
Items
Color Adjustment
Original colors
Original Colors
New colors
New Colors

Final Design

←
→
Mockup
Mockup
Mockup
Mockup
Mockup
Mockup

Summary

So, Could Amazon Benefit From Matching Their App To Their Branding?

Yes, but it'll take time.
After finishing the new design, I tested both designs among experienced and new users. At first, the experienced users struggled with completing tasks and had to adapt to the new design. Some preferred the old design. New users, on the other hand, managed to complete tasks easily. All the users agreed that the new colors represent the branding better and were recognizable.

More info

My role
User research
Interface design
Design sprint
Problem solving
Prototyping
Screen Design
‍
Tools
Figma
After Effects
Google Forms
Illustrator
Photoshop
Miro

Lastly

Check Out Next