2016 PREFALL LANDING UX
Moda Operandi
Moda Operandi Pre-fall landing page is the home of more than 30 Pre-fall runways. Customers are able to view all shoppable collections and preorder the top picked products on this index page.
Compared the previous index layout, the new design cleaned up the high level information structure and reorganized the content. As a result, the overall and mobile bounce rates have been decreased around 25% after the redesign.
Date: 2016
UX Design: Yanwen Hu
Skills: Information Architecture: Site structure, Data Analysis, Content Mapping User Experience Design: User Flow, Wireframe
DESIGN CONCEPTS
Editorial-driven
The structure focuses on the curated shopping experience, which will guide customers to effectively navigate through hundreds of looks and find their favorite products
Fresh
The most curated and updated posts are always at the top of the page, so customers do not need to scroll to the bottom to find the latest content
Flexible
The design provides multiple module options to support editorial and marketing's needs
- MODULE OPTIONS -
Process
Project Team: Individual
As UX designer, restructured Pre-fall landing page by analyzing site data and user scenarios
1. Data and Content Analysis
There are some key takeaways from the previous fashion week index pages' performances:
High bounce rates
Overall bounce rate was higher than the average, and mobile bounce rate was more than 50%.
Not mobile friendly
Some modules did not scale correctly to mobile, which hurted the mobile shopping experience.
No shoppable
Users could not purchase any products on the index page.
Unclear content hierarchy
The list of all available collections was at the bottom of the page. Also 'the best of fashion week' editorial section was not called out.
2. Content Analysis and User Flows
PROBLEMS
Pre-fall landing page was less Exposed on the site
Before redesign, there were less opportunities that users could get to the landing page. The landing page was only promoted on homepage.
Pre-fall runways was not linked back to the landing page
It was easy for users to dive into any designer collections from the landing page, but there was no way to get back to the landing page from the runway pages
SOLUTIONS
Double expose the landing page on the site
Added recirculation modules directing to Pre-fall landing page on homepage, global navigation, runway collection page, PDP (product detail page) and runway landing page
Created an recirculation system that users can easily jump from the landing page to the collections/products, or the other way
3. Wireframes
Created low-fidelity wireframes based on different editorial focuses
Used and explored current available modules on in-house Content Management System, then provided multiple options for the marketing and editorial team
Mocked up high-fidelity wireframes for the creative team as visual references
