UBUP Color Palette
The process of redesigning a fashion shop home page
Ubup is an eCommerce platform for selling second-hand clothes. I was asked to redesign the mobile view of the entire home page. I used Figma and illustrator.
In this case study, I'm going to show you before and after the redesign of every section and explain the reasons behind those changes.
The home page consist of the following 11 sections:
- Header & search section
- Menu and categories
Header and search
The new Header design includes Logo, search, favorite, basket, and user icons.
- I removed the menu icon and bring out the items, to make it easier to find and use for the user.
- Removed the search box, by clicking on the search icon, an overlay page will show with some suggestions and a place to list down the items.
- Changed the icons to minimal icons
Menu & Categories:
As I explained in the previous section, I bring out the categories and items of the menu and show them in a minimal and nice way, then user will see all categories in the first view of the page instead of looking for the categories.
This banner is included some important data such as:
- Discount amount and the code to use
- Free delivery
- Terms to use for the users
The main goal for changes was to show the important details in a better and readable way in mobile.
There is a section for showing some famous brands that user can find their products in Ubup website to buy.
- I added a title to clear the section's goal.
- Added a button for finding more brands and check the list of all brands
We do have different sizes for clothes, so I changed the button's design in a way to emphasize the size itself, and in one view users can find their particular size faster.
In the entire old home page design, there are some sections which advertising about the latest offers and sale, it looks nice but makes the design a bit messy, so I decided to organize them all in one section with the title of: "Best offers". Users will easily see all offers in one view by swiping to the left or right.
Patters section was a very helpful section that helps the users find their clothes by just select the pattern type faster. The old design of this section looks nice, I just changed the design of the title a bit to make it consistent with other sections and used a very dark gray color for patter's boxes as the soft red color is for urgent/important parts such as offers or vouchers.
As you see in the old design, there was a small section for emphasizing the latest sale amount and it was immediately after the brand's section. The Sale subject is always is an attractive subject for every user of an e-commerce website, so I decided to have a specific section for it and show it in a minimal to attract the user's eye buy.
The old design of Ubup blog was very similar to offers banners and wasn't clear that it's talking about a completely different section with an interesting subject of latest fashion updates and... .
- I kept a section for this part with a different classic background as Fashion is mostly reminds us of a classic style.
- Added title to this section
- Added some text to show what kind of information they may find.
- Add a button to this section, then user will realize how to access this blog.
Every user will have a lot of questions about, how to buy, how to return or... . It's really good that there a FAQ section on the home page to make their user's job easier instead of looking at the terms and conditions of the website or email the customer service but there was a big issue in the old design for this section, very long text. In mobile view users are not very keen to read the long text, will get tired and confuse about reading a long text. I changed the design to dropdown titles and kept one paragraph open as a sample. User will understand that by clicking on every title that is important to them can read about that subject.
The same design issue I saw in the old design of Footer, the footer section was too long as the Footer should be long especially in the mobile view. I designed in dropdown style as well to let the user decide which part of the footer is important to open from the bottom and read. I also designed it in a smooth and consistent way.
Entire design in one view
Let's have a look at the entire Ubup old and new UI. You will see a complete view of the home page in a mobile frame below. You will be able to scroll down on each frame to view the entire design.
The design principals
My main purpose for most of the changes in the UI design was to boost simplicity, consistency, usability, and findability.
- Consistent colors by using a limited number of colors
- Changed icon pack to a minimal and soft icon pack
- Added title to every section to make it easier for better findability
- Designed consistent to avoid tiring users eyes or making any confusion
- Shortened the long texts to make it simpler to read