Style 4 Me

UX/UI Design | Fashion Tech | Branding

Overview

Shoppers often struggle to put together outfits that truly reflect their personal style while also flattering their body type. The result is frustration, insecurity, and a lack of confidence when it comes to fashion choices.

Style 4 Me was designed as a personal styling app that bridges the gap between fashion expertise and digital convenience. By combining style guidance with an intuitive, user-friendly interface, the app helps users discover curated looks tailored to their body type, preferences, and lifestyle, giving them the confidence to dress with ease and authenticity.

Tools

Figma Miro Google Docs

Timeline

2 Months

Process

Discovery Concept Development Design Execution Iteration Outcome Reflection

Role

UX Researcher UX/UI Designer

Discovery

Research

Finding clothes that make people feel confident and comfortable can be a frustrating challenge. Many struggle not because they lack style, but because they don’t fully understand how to dress for their body type.

To dig deeper, I created a research plan using a Google Forms screener survey to recruit participants for user interviews. I specifically sought out individuals who had negative associations with shopping and styling, often due to body insecurity or confusion about fit. By leveraging social media outreach, I was able to connect with a diverse, representative group of users.

Interviews

Through user interviews, common themes quickly emerged:

Insecurities about body image made shopping stressful.
Overwhelm in styling left users unsure of how to combine pieces.
Frustrations with online shopping arose from inconsistent sizing and poor fit.

Notably, several participants shared that online shopping was so discouraging that it often stopped them from exploring new styles altogether.

Affinity & Empathy Mapping

I organized interview insights into Affinity Maps, grouping responses into key categories: shopping behaviors, body insecurities, styling challenges, body type awareness, and preferred shopping destinations.

From there, I created Empathy Maps to visualize different shopper archetypes:

The Low-Esteem Shopper: hesitant, self-conscious, avoids styling risks.
The Digital Shopper: relies heavily on online platforms but struggles with fit.
The In-Store Shopper: prefers trying clothes on but feels limited by selection.

This process helped me see not just what users said, but how they felt, unlocking a deeper understanding of their needs and desires.

Concept Development

Wireframe Sketches

To explore solutions, I sketched a 10-frame storyboard showing how a user might navigate the app. Each sketch illustrated a key step in the flow, from uploading a body profile to visualizing how clothes would look on them. This early ideation helped bring the abstract challenge into a tangible journey.

Mood Board

I developed a mood board pulling from fashion imagery, clean UI inspiration, and accessible color palettes that encapsulate the fundamental aspects of the Style 4 Me brand's personality and attributes and the desired visual aesthetics. The images convey a sense of confidence and originality. I chose both warm and cool images that represent limitless creativity that the user would have using this product.

Design Execution

Lo-Fi Wireframes

I began with low-fidelity wireframes to map out the skeleton of the app. While keeping functionality in mind, I introduced playful design touches, rounded image edges, softened CTA buttons, and approachable iconography to give the interface a friendlier, more inviting feel.

Home
Profile
Questions
Quiz
Body Shape Results
Style Page
Camera Access
Front View Camera
Size Match
Select Store
Select Category
Product Page
Compare Size

Style Guide

Building a strong foundation meant creating a comprehensive design system:

Logo: a teal hanger, symbolizing both fashion and inclusivity.
Color Palette: gender-neutral tones designed for broad appeal.
Typography: clear, accessible sans-serif fonts for legibility.
Iconography: rounded, playful icons to reflect ease and confidence.

This system unified the brand and ensured visual consistency across every screen.

Hi-Fi Wireframes

With the structure in place, I moved into high-fidelity design. I refined typography, experimented with color pairings, and incorporated fashion-forward graphics. The goal: create an interface that was not only functional but also visually exciting, aligning with the aspirational tone of the brand.

Home
Profile
Questions
Quiz
Results
Style Page
Camera Access
Front View Camera
Size Match
Select Store
Categories
Product Page
Compare Size

Iteration

Usability Testing

I tested three critical flows to test scenarios, which revealed both strengths and areas for improvement.

Task 1

Creating a body type profile

In this user flow, users create a profile by taking a quiz to determine their body type.

Task 2

Visualizing an outfit

In this user flow, users will see what an outfit looks like on them using the camera feature.

Task 3

Checking size across stores

In this user flow, users will see what size they are at another store.

Test Report

After the usability testing, most users had a positive experience navigating through the app. However, I encountered a few usability testing issues that needed to be clarified for some users while completing each task.

Issue 1

High Priority

80% of users struggled to position themselves correctly when taking photos.

Issue 2

High Priority

70% found the “For You” navigation confusing and unclear.

Issue 3

Medium Priority

50% had trouble locating a one-shoulder top due to overly complex category paths.

Outcome

Redesigning

Here are the usability issues I identified in each user flow, along with the redesigns I implemented to improve the overall experience.

Solution 1

Added an outline silhouette overlay and integrated instructions directly into the camera screen.

Solution 2

Replaced “For You” with a clearer “More” option, paired with intuitive iconography.

Solution 3

Simplified the navigation by renaming “Shirts & Blouses” to “All Tops,” reducing unnecessary friction.

Final Wireframes

The final wireframes reflected all the redesigns, producing an interface that was cleaner, more intuitive, and far more user-friendly. The process not only solved usability problems but also delivered on Style 4 Me’s promise: to empower users with confidence, creativity, and clarity in their styling journey.

Reflection

This project strengthened my ability to translate fashion knowledge into a digital product, bridging my backgrounds in apparel design and UX.

If further developed, I would integrate AI-driven outfit generation and expand inclusivity across body types and cultural styles.