The following project was the third in Ironhack Bootcamp. This time we were to redesign a popular mobile app, improving our UI skills and learning more about apps style and structure on the way. This project was to be performed individually. After some inquiries and doubts, I was bold enough to choose Amazon app on Android for this redesign. The reason behind this decision is that Amazon App is vast in screens, options and information, so surely it could allow some room to make things differently.

I started choosing three screens to clone in Figma, in order to better understand the app and practice my UI skills a bit, which is always good. I chose the Home page, Profile Result page and a Product page.

Cloning Amazon app screens, I realized that there is a clear lack of consistency in their design. Prices are shown in 3 or 4 different ways, and there are dozens of different product cards, each with a font size, photo size, different elements colocation and different card size. It really seems that Amazon doesn’t care a lot about consistency in their design (not that they need it to be a recognizable app, luckily for them) but I feel that they have added elements in different stages and updates, not taking in consideration the previous ones and not having a clear Style Guide, ending with this hodgepodge of design.

Some cards and prices examples of the current Amazon app

When I had the app screens cloned, I conducted a Visual Competitive Analysis. I selected Aliexpress, Alibaba and Ebay as direct competitors and analyzed their App overall style and design. First of all I saw that white background and clean UI was a point to consider, as thousands of different pictures of items of all colors possible would fill an app with these characteristics.

Another thing I realized is that even though some of them took care of some elements in a different and maybe more efficient way, consistency was not a strong point for these apps. It seems that it is a consistent problem in big online marketplaces. Maybe due to constant updates of the fact that thousands of elements are shown there, it seems that they don't have too much consideration for consistency in their design in general.

Some cards and prices examples of the current Amazon app

After this brief research, I started thinking about my own design. So firstly, in order to put my ideas in order and clarify the mood I wanted to transmit with my design, I chose my Brand Attributes, and from there, I assembled a Moodboard.

The Brand Attributes that Amazon most arouse in me and that in my opinion should reflect

And following some of the insights I got from people when they analyzed the Moodboard.

The Brand Attributes that Amazon most arouse in me and that in my opinion should reflect

Now the hard part began. I had to develop the new identity for Amazon, a massive corporation that probably spent (and keep spending) thousands of dollars in their identity. I had to break all the standards of what people think when they think about Amazon, I didn’t want to create a better identity, but to present an alternative that worked as well. So I started thinking about the Brand Colors. When I thought about Fast I couldn’t help it to think about Flash, the superhero about DC Comics, and his red suit.

So for me Fast was Red, but I didn’t want the Red people have always in mind when they think about this color (Ferrari Red), so I went for a slightly different Red for my Primary color. For Secondary color I just had a darker version of this colour, and for Accent color I went for a Pistachio, as I needed a colour that contrasted well with my Red, and a Green could be an option. For Neutral colors I went for a Grays scale with this “reddish” little percentage.

Behold the new colors for Amazon!

The next step was to define the Typography. I wanted the design to be clean, geometrical and well organized, so I went for a geometrical font named Jost.

Last but not least, I wanted to recreate the Amazon Logo as well. I am well aware of the Amazon logo story (Beginning at the “A” in “Amazon” and ending at the “Z”, this design element of the Amazon logo is meant to portray the message that Amazon sells everything from “A” to “Z”). But I wanted to do something different, always having this efficiency and quickness I wanted to transmit in my new identity. So I used Jost font in capital letters to white “AMAZON” and used this arrow as well, but to point directly to the “O”, as if it were a target. This is the result.

Finally, I could come up with a complete Style Tile, using the colours, typography and overall mood I defined for this project.

The following was to solve the inconsistency problem in the Amazon current app. I simply defined a clear Product Card system, well-structured and defined, ready to be used in every situation needed. For this, I defined two Product Card sizes and two “option” cards. An easy system allowed to create any combination for a card with coupons, sales discounts and determine if it is a Prime product or not.

Standardized card system for this redesign

With all this, I started the redesign itself. I wanted to keep in mind the Style Tile I chose, but also the clarity and minimalism that, in my opinion, are necessary for a marketplace app.

In this way, I wanted to keep the white as much as possible, but trying to give depth to the elements so that the design did not look too flat. On the other hand, the regularity of the product cards helped a lot to maintain the feeling of organization and clarity, especially on the Home page. Additionally, the sections of the Profile Page looked much more ordered this way too.

Finally, I didn't want to apply big design changes to the product page, just give a bit of consistency in the design and use of colors.

To better understand the changes I applied to the app though, better try the prototype yourselves:

Learning Outcomes

• I learned how to deconstruct the user interface design of an existing product in order to understand in better.
• Improved the performance of visual competitive analysis.
• Documentation of the brand identity, the visual components and the design principles of the product.
• That redesigning an existing app can be very difficult, but rewarding in the end.

Conclusion

I learned a lot with this project. The best way to learn how to do a thing is to try it, and I wanted to do a lot of things with this project and searched how to do it in Figma. This was definitely a good practice exercise. Of course, I don’t even try to compete with Amazon designers here, but I feel satisfied with the result, trying to organize a bit the madness that the Amazon World is.

Thank you very much for your time.