dressure

App Concept, UX, and UI Design

full case study
UX THINKING
FIGMA
SHUFFLE.DEV

Challenge

Help users track articles of clothing in their wardrobe and discover new combinations.

about dressure

Do you find yourself consistently wearing the same few clothing items while neglecting others in your wardrobe? This project aims to address this common user struggle through the design of a user-friendly app.

project intro

Using Figma, I perform a UX workup including surveys, interviews, personas, and user flows. Once I have a fount of user information, I wireframed the app and built a usable prototype in Figma.

Deliverables:

UX Research Plan
Home Screen
Articles Category Screens (Items, Outfits, Collections)
Blog Detail Page
Working Figma Prototype
+ App Landing Page

preliminary research

To gain insights into users' dressing habits and motivations, I conducted both online surveys and in-person interviews with friends and acquaintances.

The interviews were enlightening, and encouraging. Here are some highlights.

what's the hardest part of getting dressed?

E: Indecision.

G: Not wearing the same things all the time. It's difficult to try new things.

N: Second-guessing.

do you already do anything to make getting dressed easier?

G: No, I categorize by season to limit changes. I have too many options.

N: I'll pull clothes out and set them out on chair in order of how to put them on.

How do you categorize your clothing in your mind?

G: Seasonality and function, and then formality.

N: Social parameters for different groups.

ux research

The initial research phase revealed varying levels of user engagement with wardrobe organization and style. By crafting user personas, empathy maps, and user flows, I identified distinct user groups.

Cascading Functionality

In crafting personas for Dressure, Lara emerged as a pivotal figure. Her fashion-forward mindset influenced the app's design, balanced with a commitment to inclusivity for users like John S.

Anchoring decisions around Lara's needs, Dressure empowers users to navigate wardrobe choices confidently. The app's features facilitate experimentation and self-expression, ensuring accessibility for all users, regardless of their fashion expertise.

lara's persona

lara's user flow

john's user flow

competitive analysis

To help construct an MVP list, I did a competitive analysis of five services. Here's a breakdown of the three most relevant.

stylebook

Strengths
  • Provides basic functionality for creating collections
  • Appeals to users seeking simplicity in wardrobe management
Weaknesses:
  • Rudimentary features
  • Reports of a buggy experience
  • Requests for monthly subscriptions may seem unwarranted

smartcloset

Strengths
  • Strong development capabilities
  • Offers robust inventory tracking features
Weaknesses:
  • Imposes a subscription fee of approximately $10.00 yearly
  • Requires iOS11 or M1 Mac or better
  • May exclude users with older devices

cladwell

Strengths
  • Inspired UI design
  • Features include creating collections and tap-to-add functionality
  • Social function allows users to share capsule wardrobe templates
Weaknesses:
  • Higher price tag
  • Tends to push services and products
My competitive analysis confirmed that the concept was strong, and that there was room to compete. Functionality and productivity would be most important to this app.

lo-fi diagrams

I sat down with a pad of Bristol paper and drew out key screens.
Once I had my laughably-not-close-to-16-by-9 sketches, I began to wireframe in Figma.

ROUND ONE VISUAL DESIGN

In early designs, I aimed for a harmonious blend of sophistication and friendliness. I selected shades of blue-green and orange to evoke vibrance and elegance, avoiding colors used by competitors. The chosen typefaces, Merriweather and Work Sans, prioritize readability and versatility.

ROUND two VISUAL DESIGN

As the project progressed, the visual design became more sophisticated. I created a component library, and revised my style guide. I switched the type to San Francisco for a more sleek look, and even better readability and versatility.

create

From the navigation, users can always access the Create screens. Create (Item) is selected by default, but changing the dropdown can bring you to the three other screens: Create (Outfits), Create (Collections), and Create (Events). These screens vary by the content they facilitate.

For example, Create (Item) features an upload link. In my imaginary app, our fabulous dev team implemented automatic background removal for item uploads.

Additionally, Create (Outfit) features an extra button to visit the Outfit Preview screen. This screen lays selections together for users to help them analyze their outfits and save time trying out combinations.

top-level category screens

home & calendar

The Home Screen greets users, provides them an immediate reminder of their scheduled outfits, and then provides helpful analysis and statistics on their wardrobe.

The Calendar visualizes a users scheduled events, and even prompts them to create more.

final INTERVIEW & prototype

I conducted user testing with an initial participant. The user successfully navigated the app and expressed enthusiasm for its potential usefulness.
Subsequent refinements will include additional screens such as Date screens that show all events scheule on a given date, and upload and error screens.
try THE prototype HERE

see more work

Godsent - Conceptual
App UI Design

See All Projects

Anthony Welch - Portfolio & Insider's Guide