Modura
A trendy approach to e-commerce shopping for young professionals
What
Design System, Native Mobile App (iOS)
Duration
4 Weeks
Role
Designer, Researcher
Tools
Figma, Adobe Creative Cloud
Why
Student Portfolio Project
Process
Research — Ideation — Design — Testing — Reflection
The Short Story
Project Brief
Modura, an e-commerce fashion and lifestyle brand designed for trendy young professionals in urban areas, is in need of a mobile app and design system. Seeking an affordable solution for business casual clothing, the target audience, ages 18 to 30, dresses for the jobs they want without appearing overdressed.
Assumption
The apparel market is forecasted to reach nearly $2T in revenue by 2027. Due to the rising cost of living and consumer goods, I assumed that the most important factor young professionals take into account while shopping for work clothes is price followed by trend and convenience.
Goal
Design an e-commerce app targeted toward young professionals seeking affordable, trendy business casual clothing.
Surprising Results
According to a user survey conducted on LinkedIn, including 29 participants, the most important factor young professionals take into account when shopping for work clothes is trend/style, followed by convenience, and then price.
Problem
Based on competitive analysis, which indicated usability concerns in popular e-commerce apps, and user survey results, I concluded there is a growing need for a trendy, convenient, and affordable clothing app for young professionals that prioritizes usability.
Solution
Following market research, competitive analysis, and a user survey, I created low-fidelity wireframes, which I built into a high-fidelity prototype. Using the prototype, I conducted a usability study and an extensive accessibility audit. The result is an e-commerce app prioritizing usability and targeting young professionals looking for trendy, affordable business casual clothing.
Scroll for Process
The Long Story
Why I made this project
As a former fashion industry professional in New York City, I noticed a lack of user-friendly apps to shop for trendy yet affordable clothing.
Researching the market
The claim
With many professionals returning to the office, the apparel market is growing rapidly and is forecasted to reach nearly $2T in revenue by 2027.
The problem
Due to the rising cost of living and consumer goods, it's difficult for young professionals to find affordable yet trendy, business casual clothing.
Analyzing the competition
I analyzed 3 popular apps in the space, reviewing the ordering experience and app store comments to find patterns. I discovered that the main pain point is usability. Also, free shipping and a convenient return policy enhance the customer experience.
The good
It is easy to search for products and find in-store availability. The consumer can even scan a product while they're in the store.
The bad
The app crashes and freezes often (H&M, Zara, Gap) and does not save the shopping cart (H&M). The text and icons are small and hard to read (Zara). To get free shipping, the consumer must meet a minimum purchase price (H&M, Zara, Gap).
A sampling of comments
Surveying the user
I conducted a quick survey among young professionals on LinkedIn.
What's the most important factor you take into account while shopping for work clothes?
29 participants
Notable comments
I like the ability to wear the same clothes in different scenarios outside of work.
Casey
All of the above while prioritizing quality and budget over quantity.
Damien
The most important thing for me is the return policy.
Ritika
Initial research shows
There is a growing need for a trendy, convenient, and affordable clothing app that prioritizes usability. I was surprised to learn that most young professionals prioritize style and convenience over price.
Diagraming the flow
To outline all the necessary functionality, I created a flow diagram displaying the main tasks the user would perform.
Main user flow
Low-fidelity wireframing
Once the user flow was established, I created the low-fidelity wireframes for the main user flow, including the three screens below.
Adding in the style
Once the initial flow was complete, I created the logo, icons, color palette, and typography, as well as a few of the main app screens.
Brand Keywords
trendy | urban | affordable | business | casual | fashion-forward | young professionals | quality
Logo
Large logo: logomark & wordmark
modura
Medium logo: wordmark
modura
Small logo: logomark
Icons
Light background
Dark background
Color Palette
Accent, primary, secondary, tertiary, background
Light background
Dark background
Body Font
Roboto
Regular,
Medium,
Bold
AaBbCcDdEeFfGgHh
Logo Font
Genos
Bold
AaBbCcDdEeFfGgHh
Trendy Look & Feel
The style was achieved from photos of urban scenes and trendy young professionals. I was inspired by the blueish grey of skyscrapers and the orange in the brick buildings. BLUE conveys confidence and success, while ORANGE signifies friendliness and affordability. Also, BLUE and ORANGE are complementary colors.
High-fidelity designing
32 high-fidelity designs were created, including two navigation patterns (a tab bar and a hamburger menu) that could be used for A/B testing in further design stages.
For the tab bar navigation, I tested a simple, white background and a version with a black background to provide a more contrasting look.
Aligning to the grid
I chose a 4-point grid and set the margins within groups to 4, 8, and 12 and the margins between groups to 16 and 24.
High-fidelity prototyping
I connected my high-fidelity designs into a clickable prototype, allowing me to test the app on the first group of users.
Click the iPhone image below to view the prototype
Testing the prototype usability
I validated my prototype with three users. Each user was given a subset of the prototype dedicated to the category, product, and product detail views. My goal was for the users to understand that there are more products within categories and that each product has a dedicated page.
The test was conducted in person where I introduced the users to the app and asked them questions. The questions were dedicated to discovering whether the category and product tabs were easy to understand and navigate.
Study results
- 66% of users (2 out of 3) were confused why the category screen went to the subcategory screen rather than directly to the product list. So, the task success rate was 33%.
- 100% of users (3 out of 3) were confused by the two navigation options (hamburger menu and tab bar). However, the users appreciated the option of having the hamburger menu, which leads to the subcategory screen.
- 66% of users (2 out of 3) preferred the tab bar navigation with a white background rather than a black background as it felt more seamless.
Prototype update concept
Because of time constraints, I was not able to run a second usability study with the updated prototype. However, I removed the subcategory screen from the user flow. To avoid confusion, I moved the hamburger menu to the tab bar and kept it as the method to navigate to the subcategories screen, as shown in the updated prototype image.
Evaluating accessibility
The app was evaluated for accessibility to meet level AA standards of WCAG. In one case, I found that the color contrast needed improvement.
One specific example was the sale banner. My initial idea was to use a bright orange to draw attention to the banner, but the choice of color did not meet accessibility standards. In the final version, the banner color was modified to a darker orange.
Project summary
During this project, I evaluated the market, did a quick user survey on LinkedIn, performed a mini usability study, and created a set of low-fidelity wireframes, which I connected into a prototype and built into high-fidelity UI designs. In the last checkup round, I did an extensive QA audit focusing on consistency and color contrast to meet accessibility standards.
Parting Thoughts
Through the user survey, I was surprised to learn that the most important factor young professionals take into account while shopping for work clothes is not price as I initially thought. The most important factor is trend/style, followed by convenience, and then price. I used the survey results along with the competitive analysis, which showed the need for improved usability among e-commerce apps, to design the Modura app. The result is an e-commerce app that prioritizes usability and targets young professionals looking for trendy, affordable business casual clothing.
Future Thinking and Next Steps
- Conduct a second usability study with the updated prototype and a greater number of users.
- Build out the "Let's Connect" section of the app to further connect with users as a lifestyle brand.
- Explore adding AI into the app, like ChatGPT 4o, which allows users to interact in real-time with AI through chat, image, and video.
I put a lot of things in my cart, but when I returned later, my cart was empty, even though I was signed in to my account.
Adriana
It's great, except it starts me over if I close the app for one second or go back a step. So frustrating to lose my place.
Johan
The app makes it easy and convenient to find and order what I need. Also, my order delivered fast!
Mina