In this redesign challenge , I will revamp mobile application which need a refresh or redesign to the UI. My revamp mostly on the UI aspect which including the typography, iconography, colours, touch points, button size, gesture and overall user clarity.
The application name, main brand identity, and contents will remain the same (images can be updated). Some basic UX would be adjusted but without breaking the UX flow with UI.
E-commerce app Costco is provided by Costco Wholesale Corporation. An e-commerce app's main duty is to easily connect with customers and raise sales.
As a starting point, I would like to point out some features an e-commerce app needs to have in order to succeed:
• A hierarchy of visual effects that works.
• A clean user interface.
• User-friendly UX solution.
• Users are guided through the search and purchase process.
• A vibrant brand identity.
Therefore I would plan my my design process how it can it user process through the app easily and how the UI help the user to make their decision.
Prior to designing the UI, I conducted some preliminary research on App Store to see what customers thought about it. There is no doubt that Costco is a big brand in Canada, however, their application appears to be old-fashioned with an outdated user interface and a confusing UX process, which resulted in a 2.3-star overall rating, and feedback calling for an upgrade on the Front-end and Mobile services.
My choice for this redesign was a Material design UI style combined with rounded corners because an e-commerce app needs to have an easy-to-follow UI style. To make the interface feel more friendly, round corners are added to the UI style.
The Costco app icon has been updated on the App store with the gradient and the unique letter "C" of the company. As a combination of these elements, the app is easily recognizable by the users due to its unique silhouette.
Poppins is the typeface I used in this project because of its high x-height, as the user will be reading a lot from the screen, and the contents of the screen need to be easy to read.
Based on my analysis of the original app, I have made some notes about its main brand identity so that I can update its UI without losing its identity. While the logo is red and blue with a white border, the app's main color scheme is blue. In order to bring some vivid colors to the original color scheme, I created a gradient from red to blue. The gradient is used in the parts of the app where I want to make it appealing to the users such as the logo, the top bar, and the main navigation. In addition to the main colors from Costco, I added two shades of blue as secondary colors in the app.
It also has some custom illustrations to highlight main features, such as "Costco Grocery" and "Same-day Delivery." The app also has a minimalist icon set featuring the letter C of Costco and a minimalistic material design. In order to ensure consistency throughout the app's interface, a material design icon has been combined with round corners that match the app's user interface.
The button set has two sets of primary and secondary buttons for the main CTA and normal buttons. The blue buttons are used for app-related elements like a filter or more, while the red ones are used for CTA buttons like "Buy" or "Add to Cart" since those buttons are more focused on grabbing users' attention.
The first screen a user sees after launching an application is the "Home screen". Therefore, it needs to have a clear hierarchy to indicate the top element and not confuse the users with the abundance of content. Some content in the same group has been grouped together as a section based on style and size. Additionally, I created a card with a drop shadow, since material design implies a shadow to group contents together. Some of the elements from the web version such as " Costco App" will be eliminated or grouped together with similar information (Ex: Savings, Feature Products...) In the design of the card, there are two parts, the picture, and the information.
For the information part, I want the user to know about the product first and whether it fits into their budget, the CTA button will be where they land their thought process. There is some extra empty space in the product just in case there are some products with long names so the card size will not change based on the length of the product name so the user will be easier to remember where to look when they want to compared information. To indicate the list can be scrolled horizontally, I have hidden a bit of the second product to the side.
In addition to the home screen, this is the page where users should spend most of their time in the app since it is the sales funnel. There was a huge "Shop by Type" list in the old design, which takes up a lot of space above the fold. Because of this, I've created a list with a flat gradient from red to blue (to match the brand identity). Next is the top seller's section. I think it is important to place the product at the top because it has many users interested in it. In the old version, the Top Sellers section was on the very last screen of the app, even after the "Back to Top" button and "Related Categories", so it could be easily overlooked, not to mention the users who didn't know it existed.
The products card has three types: "Member-only", "Out of Stock", and "Available". There have been disabled buttons for "Out of Stock" items and "Member-only" products if the user does not have an account. A "Member-only Items" icon is also added to the Member-only items so users can easily identify which products are Member-only. In this way, we could help the users to find out more about the product easily and the business to encourage them to sign up for their membership.
The size of elements on this screen has been increased to ensure that the user can clearly see the hierarchy and to make it easier for them to scan their eye to obtain information such as membership as well as to scan the QR code. Previously, the reward was at the bottom of the page and was too small; I enlarged it and added a process bar so people can check easily.
On the more screen, I make it to a list of section so people know that they can click on them to get process. the icons also custom made to have the same style.
Every design decision should have a logical reason and be able to explain it. In design, there is a lot of scope for creativity, but logical and scientific thinking is also crucial. Even though I enjoy creating beautiful products, I also believe that every detail in the user interface should serve a purpose and provide value.
