After corresponding with the client about her expectations for the product, I transcribed the conversation from the meeting audio file and jotted down notes to provide a foundation for potential user stories.
Madison Green
UX/UI Designer
ModaCollective
A global-scale digital catalog of dead-stock & ready-made textiles for brands and fashion entrepreneurs.
Overview
ModaCollective is an eCommerce textile wholesale site that intends to bridge the gap between western (USA, Europe, etc) brands by bridging the products and methodologies of the Russian/Chinese textile market with more ethical practices in the US.
Client Goals
Our client hails from Kazakhstan, Russia. Her dream for the ModaCollective brand is to connect western (USA, Europe, etc) brands and professionals with Russian/Chinese material resources. Embracing the function of textile markets—where anyone can get anything with no minimums required—and replicating that concept online will rid small businesses of pesky minimum order quantities (MOQs) that make it so difficult for small brands to acquire fabrics.
Her goal for the product is to provide a space for her merchants to sell merchandise and for her consumers to buy textiles without limitations.
The Solution
To create a website from the ground up that diverges into two user routes. Those routes are:
A customer-facing consumer route that provides fashion industry professionals with a large showroom of fabric and textile products, services, and fashion-oriented content.
A merchant route that allows manufacturers and wholesalers to post curated videos and photos of their products and print packing information so they can easily sell their merchandise.
Role
Team Lead
Product Designer on a team of six
Project Scope
Duration: 8 Weeks
Industry: eCommerce
Process
Discovery
Ideation
Design
Dev Handoff
Reflection
Tools
Figma
Slack
Zoom
Jira
Otter.ai
01. Discovery
Project Kickoff
Initially, I was not assigned the lead designer role on this project. Regardless, once we received our debrief about the project, I got to work with the team to discuss the scope, goals, expectations, and timeline of the project. The client had no existing assets and came to us looking to establish the MVP for the launch of her new business endeavor. She wanted us to research international websites for design inspiration and told us her vision for the user experience was "exclusive but accessible."
Our team Jira project.
Getting Organized
Jira played a crucial role in helping our team stay organized and focused throughout the project. As the project evolved and responsibilities shifted, I took the lead in maintaining our kanban board to help us stay on track with our deliverables.
To further support our collaboration and ensure that we were meeting our deadlines, I established a weekly standup meeting where we could review any pain points, questions, or comments relevant to upcoming deliverables.
02. Ideation
Compiled user stories after receiving client feedback from our questions.
Client Questions & Defining User Stories
To prepare for user stories curation, our team wrote down a list of discovery questions based on the pitch deck and project brief given to us by our client Mira. After discussing directly with the client, we made a list of user stories reflecting the needs and wants of the ModaCollective user base.
Lite Competitive Analysis & UI Inspiration
The client had a desire for the ModaCollective site to embody a "clean," somewhat boujee aesthetic meant for "people with taste." Specifically, following in the footsteps of established designer fashion brands from the East and West. With this knowledge in mind, I created a deck diving into the brand's identity, curated a mood board, and completed a color exploration.
Sitemap
Since we were essentially building the website from scratch, I made sure to create a sitemap to give us a bird's-eye view of both the consumer flow and merchant flow and how they would converge with one another.
User Flows
Likewise, I made user flows for the consumer and merchant flows to give myself and the team an idea of how the user would move through the website and how the two sides could connect. We ultimately decided to keep the experiences separate after a conversation with the client. Her intention was for the customer side to never know that a merchant was involved at all.
Wireframes
This was the stage of the project where I officially moved into the team lead role. There was a bit of an experience gap amongst the team with the Figma software, so I took on the role of guiding everyone given my knowledge of the platform. I went into wireframing with the goal of efficiency and ease of use in mind. I wanted the user to easily locate what they need, and see content that added value (like CTAs) without overwhelming the user. I primarily focused on building the consumer side of the website and aimed to provide three things:
A feasible, in-depth filtering functionality to offset the density of the content provided on the site.
A simple checkout process to lower the likelihood of cart abandonment from the busy clientele intended to use the site.
A clean UI that invoked a feeling of chicness and simplicity that would complement the variety of colors coming from the items.
These were built before the client disclosed that the experiences should be wholly separate, so I initially played with having "merchant" access in the navigation.
03. Design
Style Guide ↓
Chart of luxury brands and the fonts they use
Design Decisions:
Color: we chose to mainly go with monochromes while using Turkish red as the primary accent color. We followed Western luxury brands as an inspiration and quickly noticed that most of them follow the CBW (Color—Black—White) model. This allowed for a clean aesthetic while ensuring color contrast ratios met WCAG 2.1 AA accessibility guidelines.
Font: we chose Libre Carlson Text for the header while using Neue Montreal as the body font. Neue Montreal was perfect given its high legibility and easy readability for accessibility, while Libre Carlson Text is also highly legible and aligns with luxury brands' preferences for serif fonts.
High Fidelity & the Final Design
I finalized the screens for the consumer side of the project, and as the design team lead, ensured the team utilized the design system and auto layout within their portions of the design. I made a handful of edits in the transition from low fidelity to high fidelity:
Removed the merchant tab to remove its visibility of it from the consumer side
Simplified and cleaned the UI on the homepage, adding cards to direct the user to items
Adjusted the navigation to honor the clients evolving desire for content on the site; a sale section, collections or "mood boards," and a list of services.
Tweaked the layout of the product page to follow more of a Z-path visually, while keeping feasibility and accessibility in mind.
I also created various design elements for a library for future use.
04. Dev Handoff
Dev Notes & Annotations
After the final approval of high-fidelity screens and style guide, I curated an annotation file for a simpler design-to-development handoff along with a component library. I included CSS annotations along with general directive notes, mostly pointing out essential elements for accessibility compliance.
05. Reflection
My awesome team ~
Pain Points
I'll be honest, this project had its share of growing pains. This was mostly due to a lack of design experience from some team members but it gave me an opportunity to take up a leadership role, from organizing meetings to helping with design work, and it pushed me to work hard to get the project completed on time. While it was stressful and required sacrifices (mainly at the expense of my sleep schedule), I still enjoyed working on it.
Positives + Takeaways
Overall, I was lucky to have an amazing design team and project manager that helped me along the way. Despite the obstacles we faced, the project turned out to be relatively easygoing and even fun. I found myself providing mentorship to a few team members and compiling and sharing helpful resources. This project also gave me confidence in my leadership abilities and reaffirmed that I do well in situations of stress. Along the way, I learned more about Figma and the development process and quickly adapted to the client's needs. This experience taught me a lot about leadership, teamwork, and the beauty of UX design.