MaterialWorld.co
Second Hand Fashion E-Commerce Platform
Material World is a fashion ecommerce company aiming at reducing the pollution and waste in fashion industry and extend the life of clothes by trading in pre-owned designer fashions and selling again.
Business Model
Re-design the Navigation
the GPS of the Website

The original navigation of this site are separated with 4 parts:
Trade-In, Shop Pre-Owned, Shop New and Frontier

The first three correspond to three main businesses of Material World and Frontier is the blog section.

The old navigation
Problem Detection
  1. Based on the feedbacks from customer service team, for new users, it is not very clear to get a general idea of what businesses this company is doing at first sight of the website.
  2. There are also statistics coming from the sales and marketing department revealing that, Trade-In and Shop Pre-Owned contribute most to the business growth of the company, so the design of interface should reflect this business focuses, instead of equally juxtapose all items in the navigation.
  3. On the other hand, the nav item Frontier, which links to the blog of news and stories of the company, is not only confusing by its name, but also distractive sitting at the same level of the top nav with other businesses.
  4. The mobile site basically wrapped all items into the side nav drawer which made it a super long list. Larger categories are expandable and contain smaller ones. It is a bad way of interaction in mobile context because the user can easily get lost in endless scrolling, and it is hard for them to find what they want quickly.
Design Solutions
  1. Took out Frontier from top nav (with the approval of PM and co-founder).
  2. Put Shop Pre-Owned and Shop New together under a higher level group Shop, and then aligned it with Trade-In on the top nav. So now it is clear for the new user that this website is about trading in and shopping fashions
  3. In my new design, when the user hovers on Shop, it reveals the secondary navigation flyout where the Shop Pre-Owned's categories take larger space than Shop New's. In this way, the occupation of space suggests the emphasis of the business
  4. As an ecommerce website, the navigation is better to be informative enough to help customers to find the products they want quickly and easily. Based on this concept, I added the dynamic third level items to the flyout
Deciding which items to include in the navigation
New Navigation Design
Trade-In Offer Flow & Account Dashboard
the heart of the Website

Trading in pre-owned fashions and reward customer with credits are the core business of Material World, so Trade-In offer flow is the cardiovascular system of the company.

However, there was no designer working on the user flow before. The functions were just stacked up to the site gradually by the tech team as the business grew. Therefore there was not a clear path to lead customers to where they need to go.

Here are the existed screens of the Trade-In offer flow:

Based on the business requirements, I made the user flow diagram:
And then re-designed each screen. Some exported hi-fi mock-up are here.
Dashboard (Content TBD)
Balance Tab
Trade-Ins Tab
My Card Tab
Donations Tab
My Purchases Tab
Settings Tab
Mobile Size
Other Pages
Design or Re-design
Pickup Service Page
Requesting Kit Flow - Standalone Pages (Design Based on Bootstrap Grid System)
Sign up / Log in
Quote Estimator Modal
Authentication Page
FAQ Page
Mobile Size of the Pages Above