Revamping the Amazon App: A New Look for Better Shopping Experience
What is the Challenge
The UX/UI redesign project requires selecting a popular native mobile app (IOS) for the redesign. The redesigned app must have at least three screens, but no more than seven screens. The project does not require conducting any UX research. The challenge is to exhibit design skills and creativity in crafting a visually appealing and innovative redesign of the app’s screens.
Setup
- Individual project
- 3 days in class
- 20 mins Design Critique with a jury
- No slides
- A case study published explaining your entire design process
Amazon
The Amazon app is a mobile application that allows users to shop online for a wide range of products, from books to electronics and clothing. It provides a simple and intuitive interface, with features such as one-click ordering and the ability to track orders and deliveries. Additionally, users can access Amazon Prime benefits, including streaming of movies, TV shows, and music.
Why did I choose Amazon?
I decided to redesign the Amazon app with the primary objective of enhancing the user experience and increasing customer satisfaction. I noticed that the current version is overwhelming where users see too much data and lack a clear overview of key information, which often leads to confusion and frustration. Moreover, I found the app’s design to be outdated and unappealing, so I aimed to create a more modern and visually pleasing interface. I believe that the redesigned app will be more user-friendly and enjoyable to use, which will ultimately drive increased usage and engagement from customers.
Design Clone
Below you can see some screenshots of me cloning the Amazon App! It was pretty cool to see how they structured the texts, images, and design elements. It really helped me get a feel for their approach.
Plus, it was a fun challenge to try and recreate their pages.
My observation of the displayed content is that it appears to have an excessive amount of information that is not adequately structured, leading to a cluttered and overwhelming presentation. Furthermore, the color scheme employed in the design does not seem appealing and lacks visual appeal. These factors combined contribute to a suboptimal user experience, potentially causing confusion and detracting from the overall effectiveness of the product overview.
While this product overview seems to serve its intended purpose, I find its design unappealing. In my opinion, there are alternative ways to present products that could be more attractive and compelling to potential customers. A more visually appealing design could enhance the overall attractiveness of the product and potentially increase its appeal to customers.
Heuristics Analysis
Heuristics Analysis refers to a method of evaluating the usability and user experience of a digital product or interface. It involves examining the interface of the product issues that could negatively affect the user’s experience.
Amazon’s app has a clean and simple design with a consistent color scheme and intuitive navigation, as highlighted in the analysis. However, in some areas of the app, small font sizes are used, which could potentially make it difficult for users to read and locate information. This issue can be especially problematic for users who have vision impairments or are using small mobile devices.
Another issue identified in the analysis is the lack of visual hierarchy in some areas of the app. This makes it challenging for users to differentiate between important and less important elements, as some areas may have insufficient contrast or clarity. The lack of visual hierarchy may lead to confusion, resulting in a poor user experience.
Lastly, the sheer volume of products and options available on Amazon’s app can be overwhelming for some users. Navigating through the app to find what they are looking for may prove to be a daunting task, leading to frustration and a negative user experience. Addressing this issue would require re-evaluating the information architecture of the app and finding ways to make it easier for users to locate what they need quickly.
In summary, the analysis of Amazon’s app has highlighted some issues that may negatively impact the user experience, including small font sizes, lack of visual hierarchy, and overwhelming options. Addressing these issues through design changes and adjustments to the information architecture of the app can significantly improve the user experience and ensure that users can find what they need easily and quickly.
Visual competitive analysis
A visual competitive analysis is a method of comparing the visual design and user interface of multiple apps in the same industry to identify strengths, weaknesses, and opportunities for improvement. In this analysis, the apps being compared are Amazon, eBay, Otto, and Zalando, with a particular focus on Amazon as it is being redesigned.
In comparison, eBay’s app has a more visually striking design with larger images and bolder typography. However, its navigation can be confusing at times, and the use of multiple font styles and colors can be overwhelming. Otto’s app, on the other hand, has a straightforward and intuitive layout but lacks the visual appeal and excitement of the other apps. Zalando’s app stands out for its use of high-quality visuals and engaging animations, but some users may find it difficult to navigate and locate specific products.
Overall, the visual competitive analysis highlights Amazon’s strengths in terms of clean design and intuitive navigation, but also identifies areas for improvement such as font size and visual hierarchy. By analyzing the competition and identifying opportunities for improvement, the redesigned Amazon app has the potential to enhance its user experience and better compete in the crowded e-commerce market.
Colors
In redesigning the Amazon app, selecting an appropriate color scheme was a crucial consideration. Colors play an important role in communicating brand identity, creating a cohesive user experience, and guiding user behavior. For this redesign, the primary color palette comprises shades of blue, gold, and white.
The dominant color in the palette is a dark blue shade, #242F40. This color is used as the background for text on the app’s screens, which is displayed in white (#FFFFFF) for high contrast and readability.
Another prominent color in the palette is a golden brown shade, #CEA254, which is used for icons on the overview page and interactive elements like the call-to-action “Buy now” button (#FF9901). This color helps to draw the user’s attention to important actions and adds warmth and richness to the overall color scheme.
The white color, #F7F9FA, is used as the background color for most of the app’s screens to create a clean and minimalist design. The icons on the overview page are specifically designed with the color #CEA254 to maintain consistency and visual hierarchy.
Overall, the color palette for the redesigned Amazon app is meant to create a modern and sophisticated look while still maintaining the brand identity that users are familiar with. Thanb e choice of colors was guided by the need for contrast, readability, and visual hierarchy, ensuring that users can easily navigate the app and find what they need.
Hi-fi Prototype
General Overview Page
At the top of the page, you’ll find a clear and elegant dark blue color that provides a strong contrast to the white background. The white icons and search bar, which is a common feature in many e-commerce apps, make it easy for you to search for the products you’re interested in.
Just below the search bar, you’ll find your Amazon Pay balance and new offer suggestions based on your interests. The icons for this section are in the golden color, which adds warmth and richness to the overall color scheme.
The category selection section is located below that, where you can select several categories to help you narrow down your search. The app will automatically recognize the category that the product fits into, providing a smooth overview for browsing products.
For this part, I focused mainly on Amazon products since it’s the Amazon app. The carousel section is where you’ll find several Amazon products displayed in a linear color face going from #8DFBD8 to #DBE3F9. The white blur at the bottom of the carousel helps to transition it well into the white background. All carousels are controllable with the slide option or by clicking on the bar to see different products.
When you click on a product, you’ll be taken to a smooth white background where suggested products are displayed in cards, with the title of the product shown. This provides a clear and easy-to-use interface for finding the products you’re interested in.
Product Overview Page 1 — Dark Screen
The Oculus Quest 2 — Advanced All-In-One Virtual Reality Headset
I’ve carefully curated this page to provide you with all the essential information you need to know about the product.
To create an elegant and professional look, I’ve chosen the background color #242F40 for this view.
I recommend that the product pictures be in white and PNG form to complement the background color. However, I also have an alternative page with a white background for those who prefer it.
At the top of the page, you’ll find the product showcased in a carousel, allowing you to view it from different angles. Below that, you’ll see the price of the product. If it’s on sale, the old price is crossed out, and the discount percentage is displayed in a pill-shaped box with a pill color of #8BFFD5. The number in the pill box is in the color of 296D5F, making the price reduction appealing and stand out.
On the right side, you have the option to like the item or save it for later. Additionally, you can share the product with your friends or colleagues by clicking on the sharing button.
Below that, you’ll find the title of the product in a clear and visible white color, #FFFFFF. Reviews for the product are displayed, showing the star rating in an orange tone #F2A842 and the number of reviews.
If the product comes in different sizes, you can select the one that suits you best. I’ve included a clear indication in the color of 212832 that there’s free shipping to Germany, with the truck icon and text in the color of C7CBD1.
Finally, the most important section for the seller, the buy button, is located right next to the add to cart icon. Both are in the color of #FF9901, making them stand out and inviting the user to buy the product. The color harmonizes really well with the #1A232E background color, creating a strong visual impact.
Overall, this product page is designed to be informative and visually appealing, providing you with a seamless shopping experience.
Product Overview Page 2 — Light Screen
Apple Airpods Pro
To create a clean and modern look, I’ve chosen a white background below the product picture, which complements the product’s sleek design. You’ll find the same buy now button, add to cart button, and free delivery section as on the previous page.
Underneath the rating section, you’ll find a detailed description of the product. This section provides you with more information about the Airpods Pro, such as their key features and specifications.
I’ve included a clear indication in the text color of #C7CBD1 with the background of #212832 that there’s free shipping to Germany, with the truck icon and text in the color of C7CBD1.
Finally, the most important section for the seller, the buy button, is located right next to the add to cart icon. Both are in the color of #FF9901, making them stand out and inviting the user to buy the product. The color harmonizes really well with the #1A232E background color, creating a strong visual impact.
Overall, this product page is designed to be informative and visually appealing, providing you with a seamless shopping experience.
Key Takeways
I decided to redesign the Amazon app with the primary objective of enhancing the user experience and increasing customer satisfaction. I noticed that the previous version was overwhelming users with too much data and lacked a clear overview of key information, which often led to confusion and frustration. Moreover, I found the app’s design to be outdated and unappealing, so I aimed to create a more modern and visually pleasing interface. I believe that the redesigned app will be more user-friendly and enjoyable to use, which will ultimately drive increased usage and engagement from customers.
My Learnings
During my experience redesigning the Amazon app, I’ve gained several valuable learnings. First and foremost, I learned the importance of user experience design. Creating an intuitive, visually appealing, and seamless shopping experience is critical to the success of an e-commerce app like Amazon.
I also learned the importance of color selection in design. Choosing the right color scheme can greatly impact the overall look and feel of the app, and can also affect how users perceive the brand.
Another key learning was the importance of clear and concise information. Providing users with all the essential information they need in a well-organized and easy-to-navigate manner is crucial. This can include product details, pricing, shipping information, and reviews.
In addition, I learned the value of flexibility in design. Providing users with different viewing options, such as a white background alternative, can enhance the user experience and cater to different user preferences.
Finally, I gained insight into the importance of balancing the needs of the user and the seller. While providing an excellent user experience is crucial, it’s also essential to create an environment that encourages users to make purchases and supports the goals of the seller.
Overall, redesigning the Amazon app taught me valuable lessons about user experience design, color selection, information organization, flexibility, and balancing user and seller needs. These insights will undoubtedly be valuable in future design projects.
