Ranked #1 Most-Searched Fashion Brand on Google in 2018, and #6 as one of the most favourite website of young people, Fashion Nova is one of the most searched apparel & fashion brand alongside Gucci, Louis Vuitton, Supreme and Chanel.

  • Based in Los Angeles, California USA.
  • Private company.
  • US$597 milion in revenue.
  • Over 600 employees.
  • 20 million monthly site visits.
YEAR
2019
COUNTRY
NYC, USA
SERVICES
UI-UX Design
INDUSTRY
Retail, Fashion
AGENCY
Mayers-Holum Inc.
—DEVICES
Notebook
Desktop
—TOOLS
Slack
Jira Atlassian
Drive Suite
Figma
Illustrator
PRODUCT AND PLANNING

FASHION NOVA VENDOR PORTAL
All vendors who sell items on the Fashion Nova e-commerce website have access to the Vendor Portal web app where they can manage purchases, invoices, payments, deliveries, and credits for their businesses.

WHY THIS IS IMPORTANT
The Vendor Portal provides access to high quality information that is key to synchronize the production and supply chain, estimate monthly sales, analyze trends, and guide the decision-making process of managers.

THE GOAL
The original version of the Vendor Portal was built as a minimum viable product (MVP) and had many improvement points in terms of user experience, scalability and performance. The Fashion Nova team tasked my team with reviewing the app, and we offered them a proposal for improvements, focusing on:

METRICS AND PLANNING
At the begining of the project the Development team defined the areas of the app they would start working on: stories, tasks, subtasks, and dependencies on the backlog.
We organized the work per quarter, prioritizing stories in such a way that would not block each other, and starting with the ones that would allow us to reutilize the most material in further pages.

OBJETIVE KEY RESULTS (OKR)

2nd Quarter
Vendor Profile
Invoices

3rd Quarter
Purchase Orders
Deliveries
Credits

4th Quarter
Visualization
Dashboard
Payments

data analysis icon
WHAT - Indicators of Success
art icon
HOW - Stories
  • Reducing the speed for the development of new features.
  • Creating a Design System Library to standardize the UI used across the app.
  • Optimizing performance by: reducing Average Time of Execution, reducing Error Rate and Drop-offs per task.
  • Reviewing the app User Experience and applying the latest good practices.
  • Increasing reported Customer Satisfaction Score (CSAT), and Customer Effort Score (CES).
  • Communicating directly with managers and employees.
  • Improving the way managers generate and export reports.
  • Providing a dashboard with Data Analytics and clear Data Visualizations.

OUR TEAM
1 Client Stakeholder, 1 Business Developer, 3 Web Developers, and myself as UI-UX Designer. Half of our team was working from the Fashion Nova warehouse in direct communication with our client and the employees (Vendor Portal users).

MY ROLE

  • Collaborated directly with the Project Manager and Client Stakeholders.
  • Interpreted the client and development feedback into actionable stories.
  • Made a functional prototype to validate the project scope and functionalities.
  • Lead the development team on the re-design of the platform.
  • Delivered UI assets, assisting the team of developers on the implementation.
  • Reported directly to the Senior Product Manager.

THE PROCESS
Creating a new app required me to:

  • Use the previous architecture as the wireframes.
  • Define the Design System based on the Fashion Nova Branding.
  • Understand the user pain points of current journeys.
  • Ideate various solutions, and drive the conversation with my technical team.
  • Design a prototype and hand it over to Fashion Nova’s research team.
  • Iterate the design based on the feedback.
  • Define the final design.

ROADMAP - Areas of Responsibility (AOR) & Direct Responsible Individuals (DRI)
Using Jira, the Development Team and I wrote the stories, sub-tasks, and dependencies. This allowed us to identify tasks that could potentially block each other, or that required specific planning in order to be completed on time.
Since our team was small, many of the tasks originally assigned to only one team member were restructured into a constant collaboration work cycle, thus allowing several team members to work together.

RESEARCH & DESIGN THINKING PHASE

GETTING FAMILIAR WITH THE CURRENT WEBSITE
My first step was to map out the entire website sitemap, taking relevant screenshots of the main areas in which users spent the most time.

The previous website had a lateral main navigation per category, and inside each main view, tables of information were displayed over segmented pages. Users could choose to download these tables as .XML files and from then on, each manager would use this information in different ways that suited their specific needs.

This static approach didn't allow users to interact with the information. The option to drill down into categories, request sorting and filtering by attributes, or to generate custom reports was not possible.

HEURISTIC EVALUATION & GATHERING EMPLOYEE FEEDBACK
To be able to improve the user experience and the overall performance of a website, I needed to understand the effort required to perform certain tasks (Customer Effort Score, CES). To do so, I measured Time Per Task, Probability of Failure, Error Recovery, and I mapped out all possible error messages and critical path scenarios (where everything that can go wrong, does so).

A process that helped me measure the usability of each page was implementing Jakob Nielsen’s 10 Principles of Good Design, while constantly communicating with the development team. They provided me with all the relevant information I needed for the following items:

The result of this heuristic evaluation was shared with the team over comments and daily calls that helped us drive relevant conversations and debate.

SITEMAP & CONTENT REQUIREMENTS
The next step was to diagram the website’s Sitemap. Part of the work was to define the main sections of the app, the sub-pages and the content requirements for each one. I based the new architecture on the original app architecture.

This documentation helped me to identify different case scenarios, possible errors, and dead ends.

DESIGN SYSTEM

USER INTERFACE AESTETHIC DIFFERENCES
We tried several different User Interface Kits to test and validate which one was the most efficient for the users. After our decision was made, I proceeded to document the entire Design System.

DESIGN SYSTEM
As Fashion Nova is an established company, they already had some branding principles.
Our final decision on the UI styling came down to Branding, choosing to replicate Fashion Nova’s Website. Despite the fact that these guideliness were not documented, part of my job required me to collect, organize, and document this information, as well as:

ACCESIBILITY - COLOR BLINDNESS
Color blindness is a condition of the eye which affects approximately 1 in 12 men (8%) and 1 in 200 women. Considering that most employees in Fashion Nova warehouse are men, I chose a color palette with a high contrast that would be easy to differentiate under various color spectrums.

DARK AND LIGHT MODE
One of the hypotesis brought from the user research was to try out light and dark mode for this app. I’ve researched various academic papers to understand if the dark mode was advisable for the context of warehouses with artificial light. Unable to find an answer, I’ve dedcided to test the possibility so I iterated our final product into a prototype with Dark Mode. The result looked fantastic but was not successfull among our users.

ACKNOWLEDGEMENTS

Special thanks to Dimitry, Matt, Josh, and Sherri for all their support, feedback and trust.


🧡 THANK YOU FOR YOUR TIME