Synthetix is a leading decentralized finance (DeFi) protocol built on the Ethereum, enabling the issuance and trading of synthetic assets through future and perpetuals contracts. Users can stake and trade to earn rewards while engaging with an expansive ecosystem of DeFi partners.
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
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
THE PROCESS
Creating a new app required me to:
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.
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.
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.
Special thanks to Dimitry, Matt, Josh, and Sherri for all their support, feedback and trust.
🧡 THANK YOU FOR YOUR TIME
