E-COMMERCE APP REDESIGN
As the designer responsible for the mobile e-commerce app revamp, my primary goal has been to improve its overall usefulness for our valuable users. This aim has been achieved by thoroughly addressing all design inconsistencies, leaving no stone unturned in ensuring the app's seamless and user-friendly functionality. This redesign is set to take our app to greater heights of success.
Let's start with colour -
There are several issues with colour usage in the current design. Specifically, in the contemporary design, a golden colour has been used to give the app a luxurious feel. However, the colour contrast could be more optimal, which may lead to visibility issues.
To improve the design, it may be worth considering alternative colour options that offer higher contrast and improve visibility. In addition, it could help to create a more accessible and user-friendly app design.
Welcome screen contrast issues -
The current design presents colour contrast issues with the login and creates new account buttons, making it difficult for users to see the text and buttons. To address this issue, I have used a unique blue colour that provides higher contrast, ensuring that users can view the call-to-action (CTA) buttons correctly.
Additionally, I have included an option for users to explore the app as a guest, which may help to attract more users to the platform.
Home page issues -
Users tend to appreciate knowing their location when navigating a website. However, the current design lacks consistency in this aspect. Therefore, I have attempted to redesign the page with a fresh look and feel while ensuring that the information is presented clearly and coherently to the user.
Let's fix the header-
The current header design might be misleading as users might try to click on the left and right chevron to navigate options and view products. However, this is different from the intended functionality for the header.
To improve the design, I have added a menu icon that allows users to browse menu options, a cart icon that shows available products in the cart, and a search bar that makes it easy for users to search for products, brands, and other items by name.
Let's focus on the navigation bar -
The current navigation bar has some usability issues, particularly with the user's understanding of which part of the app is active. Additionally, the left navigation bar has colour contrast issues, making viewing the icon challenging.
To address these issues, I have improved the navigation bar design. Specifically, I have added labels to the navigation bar to help users understand which part of the app they are browsing. It should make it easier for users to navigate the app and find the information they need.
Let's focus on the product card -
The left side of the card design only displays the product image without showing the price or other details such as the product name, reviews, and discounts. I addressed this issue in my redesign.
Unknown Screen! -
I don't know what the purpose of that particular screen is and what information it is supposed to convey to the users. So, I decided to skip that screen in my redesign.
Product view redesign -
If you look at the left screen, you'll notice that there's no back button to go back to the previous screen. I suggest adding a back button for better navigation. Another improvement would be to include an image carousel that allows users to swipe and view other product images. This change is reflected in my new design.
Another area for improvement with the left screen is the misleading colour of the review stars. Generally, rating stars should be orange or yellow. Additionally, the colour selectors for the product need to be bigger, which may make it difficult for users to select the desired colour.
Furthermore, the left screen includes a button called "Choose Your Size," which seems unnecessary. Instead, we can create a row of sizes to allow users to select the size and colour of the product easily.
Additional screens -
I created two additional screens to provide a proper flow for this redesign example.
Splash screen -
The purpose of the splash screen is to give the app time to load any necessary data or resources before the user begins interacting with it. It also provides a visual cue that the app is loading and helps establish its app's branding and identity.
Checkout page design -
In the previous design, there was no checkout page design available. So, I created a checkout page design to ensure users understand the flow.
Learning -
It's always beneficial to consider the user's perspective and put yourself in their shoes to enhance your app. Then, pay attention to the small details of the design and product to improve the overall experience.