DurationJanuary 2024

RoleSolo student project

ToolFigma

- Project Overview -

The Challenge

As part of my Kleiner Perkins application for the position "Design Fellow (New Grad)", I had to do a design challenge where I need to redesign a feature from any of the companies that Kleiner Perkins had worked with. When browsing through their list, I see that Amazon is one of them. Since I am an avid Amazon user and have been using their app (and website) since Covid, I decided to task myself to redesign the Amazon shopping app.

The Solution

Based on many relevant App store criticisms on the Amazon shopping app for not having a dark mode option, I decided to take on the challenge and redesign the Amazon app in dark mode. While creating the prototype, I made sure to still maintain the same design layout that users are familiar with in the app, but also taking away some elements that might distract users (especially new users) from achieving their main task..... to browse and buy stuff.

Click here to access the Figma prototype

- My UX Design Process -

- Empathize With Users -

In order to start redesigning a feature for the Amazon shopping app, I need to look for an existing problem that users are currently facing and what they don't like about the app.

User Research

To set out and look for a problem, I visited the Amazon App store page on my iPhone and navigated through the 1 star reviews to really get a glance of what current users are saying. Overall, I see a lot of non design related problems like late deliveries, price scalping, loading, and scammy. All of these problems is not something as I, a designer, can control, more of for logistics, security, and backend engineers. But, one problem that always seem to repeat itself, with many users demanding it for, is the option to turn on dark mode.

So... What's All the Hype with Dark Mode?

Dark mode has been a growing design trend in the past few years and it doesn't seem to stop. Many apps and websites are adapting this feature because it is so high in demand and the benefits of it outweighs the cost of implementing it. Majority of users, designers, and developers prefer using and working in dark mode for a many reasons like...

Less eye strain
Improved visibility, easier reading
Consumes less battery, especially with more and more devices having OLED displays
Feels more professional
More visually appealing

and here are some official statistics about dark mode usage from Zipdo.

92% of software developers prefer using dark mode in their IDE
Using dark mode saves up to 40% battery
85% of users prefer using dark mode when using e-reading devices like Kindle

User Personas

I created two distinct user personas from the reviews and research done on dark mode. Hao Meng has a problem with eye strain with the current Amazon app having a white background. All his other apps, he enabled dark mode and was able to use it for longer periods of time, but the Amazon app stresses his eyes. Grace dislikes that fact that Amazon still hasn't implemented the dark mode feature as many of its competitors have, it would save battery, and overall enhances the visuals.

User Stories

From my two personas, I created two user stories. It is a one sentence statement that captures the main need of the existing users. The need for dark mode.

- Define the Problem -

Problem Statement

With my user personas and stories, I was able to create two problem statements that reflect upon the users' goals and their current problems if not achieving that goal. The problem statement is also my goal as the designer to make sure my designs helps users achieve their goal.

Hypothesis Statement

With now my problem statements in place, I can make an educated guess on could be a solution, which is a pretty obviously one... users are asking for dark mode, so I will deliver it and how it will solve their problems/ improve their lives! :)

- Ideate Solutions -

Competitive Audit/ Design Inspiration

It would make sense to conduct a competitive audit on one of Amazon's top competitors, eBay. I also use eBay and I have to say that they have a better UI than Amazon, and they got dark mode! So, with this, I did a comparison between Amazon's and eBay's user interfaces.

The Amazon's shopping app interface has no option for dark mode, white background is where it is at. Overall, the interface is pretty navigable, but for a new user it can seem very clustered and overwhelming. I remembered when first using this app, I was like "what is all this stuff?" The white background also causes more eye strain.

The eBay app's interface adjusts according to the phone's system (so if I switched to dark mode from my iPhone's control panel, that will also change eBay's app in dark mode, very convenient!). Overall, the dark mode looks very slick with consistent spacing and using "not so noticeable" lines to divide sections.

Solution Statement

I also wrote ONE solution statement that summarizes what the solution to the problem statement is. The solution statement states the solution and the benefit is serves for their users.

User Flow

For this redesign challenge, I'm not going to redesign the entire Amazon shopping app because that is just madness. I'm just going to design a few key screens that resembles what an everyday user would do in the app... browse, add to cart, and checkout. I would need to create a user flow to visualize this process from screen to screen before designing.

- Design & Prototype -

Now with emphasize, define, and ideation intact, it is finally time to jump into Figma and start redesigning! From low fidelity wireframes to high fidelity mockups and final prototype.

Low Fidelity Designs

I won't be ashamed to say that eBay was my primary source of inspiration for this redesign project. I mean, I just love their dark mode interface and how simple/clean/consistent is looks compared to Amazon's. For my low fidelity designs, I made sure to not take away elements from the Amazon app and redesign it in a way that's more visually appealing and accessible which is very important.

High Fidelity Designs

Without further ado, I present you the high fidelity before and after designs for my Amazon shopping app... in dark mode. Note: This project is not just a simple color change, but also redesigning the layout to allow for more consistency and a better purchasing experience.

Home Screen

Product Listing Screen

Product Details Screen

Checkout and Payment Screen

Video Prototype

This mini video showcases the interactive prototype of the high fidelity designs from screen to screen. A user buying a book from Amazon...in dark mode redesigned. :)

The Figma link to the high-fidelity interactiveprototype can be viewed here. Hopefully it loads. (>.<)

- Testing -

Usability Testing

After designing my high-fidelity prototype, the final phase of my design process is to conduct a usability test. I sent the Figma link to a few of my friends who also uses the Amazon shopping app to see if they like it. I asked a few questions:

What do you think about the new Amazon app in dark mode?
Have this new design changed any issues you had with the current Amazon app?
Would you use the dark mode feature if it was implemented into the actual Amazon app?
Any additional comments or questions about this prototype?

Key Insights

Overall, the response was very positive and all of the participate find it really cool and "different" in a good way when using this new dark mode redesigned Amazon app. Some key quotes/ reactions:

"The vibe is totally different, but I totally dig this!"
"I've been wanting to use Amazon in dark mode for the longest time. This is the closest to that."
"I really wished this is the real thing instead of the prototype, it just looks soooo clean I can't stop looking at it."
"Wished all the buttons are pressable, but can only press a few :("

Note: Designing and prototyping the WHOLE app would take a lot of work.

- Closing -

Project Success

Overall, the project was a success, not a huge one because I only designed one specific flow of the app (in Amazon, you can do alot than just buy something). But, from the positive feedbacks, I gained more confidence with the inheritance of dark mode as the main digital presence from light. I also practiced a lot of the "Auto Layout" feature in Figma and I can say with confidence I'm an expert with it. (Note: Auto layout is like grouping, but more smarter!)

What I Learned

At first, I never really thought that dark mode was such a huge demand for the Amazon shopping app. But, when I scrolled through the App Store's reviews and saw that many users wanted dark mode, I was inspired and motivated to make this change. This is also a problem that I'm passionate about, I'm annoyed Amazon hasn't adopted dark mode. This really had taught me that even in the most well-known apps which millions or even billions of people use around the world, could always be improved upon by design...even if it works. Humans use things, they get bored, they have a desire to see more "new" things. Businesses fill that "desire" with appealing (but working) design trends. A design is never done, it can always change. A mindset that all designers should adapt.

Next Steps

Moving on, I would really like to see Amazon get a redesign and implement dark mode. If I have the time I would like to redesign other pages that users often visit like the profile and hamburger menu.