Rojin Maljaei
UI/UX Designer

Design for eCommerce

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:

  1. Header & search section
  2. Menu and categories
  3. Banner
  4. Brands
  5. Sizes
  6. Offers
  7. Patterns
  8. Sales
  9. Blog
  10. FAQ
  11. Foote

Design for eCommerce

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.

Design for eCommerce
Design for eCommerce

Banners

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.

Design for eCommerce

Brands

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
Design for eCommerce

Sizes

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.

Design for eCommerce

Offers

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.

Design for eCommerce

Patterns

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.

Design for eCommerce

Sales

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.

Design for eCommerce

UBUP Blog

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.
Design for eCommerce

FAQ

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.

Design for eCommerce

Footer

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.

Design for eCommerce

BEFORE

Design for eCommerce

AFTER

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
UBUP Color Palette

UBUP Color Palette

Thanks for watching this project :)