UX Design Case Study

VEIL Mobile App

The Wedding Dress Rental App

Project Overview

VEIL is an ecommerce store offering high-end wedding dresses affordably to brides by renting.

View Prototype
Image of the Veil App Product Page
Project Overview

The Problem & Goal

Soon to be brides want to rent a wedding dress, because they would like to use their budget in other areas of the wedding instead of paying full price for a dress that they’ll only wear once. The goal is to design a mobile app that will allow brides the opportunity to rent a wedding dress quickly and easily at a fraction of the full price.

Image of Veil Mockups
My Role

UX Designer

My Responsibility

Paper and Digital Wireframing, Low and High-fidelity Prototyping, Conducting Interviews & Usability Studies, Designing for Accessibility, and Iterating on Designs.

Tools Used

Figma, Adee

Duration

3 weeks

User Research

Understanding the User

Pain Points   ⎯   Personas  ⎯   User Journeys

User Empathy

I conducted interviews, and created empathy maps to understand the users I designed for and their needs. The primary user group identified through research was working women who were struggling with the high costs of wedding planning, and wanted to save money on their dream wedding dress. 

This user group confirmed initial assumptions about the lack of wedding dress affordability, but research also revealed that cost was not the only factor limiting this group from purchasing their dream dress. Other pain points included size limitations, and the inability to invest time in a bridal boutique making it difficult to obtain that ideal wedding dress, affordably.

Image of Empathy Map detailing brief statements about what a user says, thinks & does.
Get to Know Lisa

User Personas

Lisa is a 31-year-old registered nurse who lives with her fiancé. They want to get married, and have started the wedding planning process. Lisa is overwhelmed by the cost, but still wants to wear her dream wedding dress. She can’t afford to buy it, so she’d rather rent it since she’ll only wear it once.

Cards Gallery of User Persona, Lisa.
Cards Gallery of User Persona, Lisa.
Cards Gallery of User Persona, Lisa.

Pain Points

Identifying the issues that cause frustration before, while, and after a user completes a task is beneficial to designing a good user experience. Below are a few pain points that were identified through research.

Affordability

Luxury brands often cost no less than $6,000 making these dresses unattainable for most working-class women.

Time

Working women are too busy to spend time trying on dresses in a bridal boutique.

Size Limitations

Without having a dress custom made, most retail chains limit sizes that exclude plus sizes, petite sizes, and tall sizes.

Ideation & Usability

Starting the Design

Wireframes   ⎯   Prototypes  ⎯   Usability Studies

User Flow

When creating the user flow, I thought of interaction design by focusing on easy browsing & navigation. I decided to add back button & close options for users to return to or access screens no matter which place of the flow (or scroll) a user was in.

Image of Veil User Flow

Paper + Digital Wireframes

Taking the time to draft iterations of each screen on paper ensured that the digital wireframe elements would be well-suited to address user pain points. For the home screen, I prioritized quick and easy browsing to help users save time.

Equipping the design to work with assistive technologies was a key user need from research as well as easy navigation. When modifying the paper to digital wireframes, I prioritized these features.

Image of Paper Wireframe for the Veil App
Image of Veil's Low-Fidelity Mockups

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was for the user to find and rent a wedding dress so the prototype could be used in a usability study.

View Prototype

Usability Study Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

  1. Users want to rent a dress quickly by viewing dresses before login.
  2. Users want to select their rental dates in advance.
  3. Users want to rent without having to pay membership costs or fees.
  1. Offer a “skip” option to bypass the onboarding screens.
  2. The slide navigation is distracting.
  3. The white background is harsh on eyes.
Mockups & Prototypes

Refining the Design

Visual Design   ⎯   Accessibility  ⎯   Iterations

Visual Design

When creating the mockups, I thought of visual design concepts by incorporating color, typography & iconography to create visual hierarchy and emphasis. I chose a skin-tone color palette so brides could see themselves in each dress.

Veil Style Guide (Color, Type, Icon)
Image of the Changes made by Usability Study Findings

Iterations

Early designs allowed for some customization so after the usability studies, I added the option to skip the initial three promo screens. I also eliminated the slide navigation so users could focus simply on browsing wedding dresses.

The second usability study revealed frustration due to the background color. To better the experience, I swapped the original hex code #FFFFF (white) with the softer #FFFDF9 (oatmilk). This paired well with the skin tone hues throughout the design, and still met WCAG AAA guidelines.

Image of Veil Mockups
Accessible & Inclusive Design

Accessibility

Accessible and inclusive design considerations are essential for a good user experience. Below are a few highlights that were considered for this case study.

Alt Text

Provided access to vision impaired users by adding alt text to images and icons for screen readers using the Adee Plugin for Figma.

Color

Only used background and foreground color combinations on text that either met or exceeded the WCAG AAA 7:1 contrast ratio guidelines. Verified with WebAim.

Readable Icons

Used icons to help make navigation easier, and accompanied icons with text in the navigation menu.

The Outcome

What I Learned

Takeaways   ⎯   Feedback  ⎯   Next Steps

Going Forward

Although this case study has reached its conclusion, the UX design process is continuous. During my spare time, I will continue iterating for improvements.

Takeaways

While designing the Veil app, I learned that the first ideas for the design are only the beginning of the process. Usability studies and user feedback influenced each iteration of the app’s design.

The next step is to conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed. This will allow me to determine any new areas of need so that I can refine the prototype to deliver an even better user experience.

Image Mockup of the Order Confirmation Screen

User Feedback

“The app made it so easy to rent a wedding dress! I would definitely recommend this app to my friends who are getting married too.”

Participant C

High-Fidelity Prototype

The final high-fidelity prototype presented easier user flows for finding and renting a wedding dress. It also addressed user needs for selecting rental dates in advance, and viewing dresses before the login prompt.

View Prototype

Additional Projects

Image of the PollPAL App Onboarding Screen
Image of the MoonChild Web Design Project
Image of the Madaya Spa Homepage on Desktop
My Logo

A good design is the culmination of good ethics, usability, inclusivity, and visual appeal.