Closet Curator

Problem
Design for
Duration
Role

Finding a solution for people to create outfits and organize their closets with ease

Mobile

February - June 2022

Sole Designer

Programs

Adobe XD, Figma, Procreate, Google Suite, Zoom 

press to zoom

press to zoom

press to zoom

press to zoom
1/15
804-8045468_iphone-x-frame-iphone-x-frame-png-hd.png

Overview

 

Closet Curator is a mobile app that allows people to curate outfits from items in their closets from the comfort of their phones. The app is to encourage users to utilize every item in their closet and be more cognizant of their spending habits and be more creative with their wardrobe. 

😖

Problem

People often get overwhelmed with getting dressed and paralyzed by the idea of choice thus making most users not feel comfortable in what they wear and stick to outfits that might not be an accurate representation of how they wish to be perceived.

Goals

Create an interface that is both easy to understand and allows for organizing your closet in a digital manner fun and exciting.

🙌

Solution

👗

This app will be for people who like fashion and have a difficult time coming up with what to wear. We aim to make organizing your closet and coming up with outfits fun and easy.

 

Discovery

Inspiration

One of the major inspirations for the app was the website Polyvore. On the website, users were able to create fashion collages online and create mood boards of their dream looks. The site no longer exists and was bought out by SSENSE.

fashion-blogs-slaves-to-fashion-0128-polyvore-outfit-idea-yellow.webp
download.png

Competitive Analysis

While getting volunteers for the initial user interviews I needed to discover who my current competitors in the market were since my main inspiration Polyvore is no longer online. The 4 main apps that showed up in the Apple App store were: Combyne, Cladwell, Pureple, and My Closet. I used Nielson Heuristics to compare features within all the apps.

Competative Analysis for Closet Curator.png

User Interviews

I conducted interviews with 6 volunteers between the ages of 24 and 45. All of them were avid fashion lovers and are looking for solutions to organize their closets better and create outfits. I asked them a series of questions about what they do day to day in regards to getting dressed and their shopping habits. Even learning how they interact. with fashion via technology. Here are my results of features users were interested in seeing in a fashion app.

📸

Smart Camera

Would like the app to identify the items of clothes and pre-tag them

📱

Socials

Ability to connect with other social media accounts and share outfits they have made

👠

Smart Shopping

App finding articles of clothing that are within their price range and in a similar style they would wear

🤖

A.I. Stylist

A want for Computer-generated outfits from the existing wardrobe

😎

On Trend

Listicle dictating what’s new in trends or forums talking about the trends. Update on upcoming brand designs/collections.

👨‍💻

At Home Stylist

When contacting a stylist they would like as much interactivity and access to their closet but still see their sense of style.

Personas

After affinity mapping, I began to imagine who would be the ideal user for the app. Eventually I came up with two distinct personas:

  • Chic Chole - A full-time professional and expert fashionista who is looking for a way to catalog their closet and create looks on the fly without needing to spend hours at home in their closet.

  • Ingenue Imogen - A fashion novice looking for help in finding their own personal sense of style and curating outfits to fit their new lifestyle.

Design

 

Ideate

I went on Procreate to sketch out the main features users wanted in the app and fleshed out how they would function. I narrowed it down out which features would be the most beneficial to the mission and what I could do capably alone. 

Stylist Sketch
Closet/Collage Sketch
Closet/Calendar Sketch
Sitemap for Closet Curator

Sitemap

I narrowed the features to 5 buttons:

  • Home/Social

  • Collage

  • Closet

  • Calendar

  • Stylist

Within the sitemap I was able to showcase how each of major tabs would function down the line and which tabs would take you to another part of the app

User Flow

Next, I used Miro to create 3 main user flows:

creating an account, the closet, and booking a session with the stylist. The user flows went into detail on what actions the user would need to take in order to reach the end goal.

Account Flow for Closet Curator.png
Stylist Work Flow for Closet Curator STylist.png
Closet Work Flow for Closet Curator copy.png

Sketching

Once I finalized the workflows for the 3 main features, I created rough sketches of how I wanted the app to be laid out and made a rough sketch prototype using both Procreate and Figma. I gained most of my inspiration from looking at Instagram and taking their simplicity towards their UI design and combining it with features from my competitors that I like and making it my own.

Branding

Before I was going to create a prototype I needed to begin the visualization of how I wanted the app to look and feel. I searched on Dribbble, Pinterest, and other fashion-related apps and websites to gain inspiration. I defined what I wanted the brand to feel and what story I wanted the visuals to convey.

Brand Personality
A closet in your pocket; now you can become more organized as well as creative with your own wardrobe as well! By utilizing all the features within the app becoming stylish just became easier.

 

Imagery Inspiration
I wanted to convey the simple and abstract styling done on indie/cult magazines like Numero and i-D. This gives the sense of stylish allure that these magazine covers convey as well as encouraging the user to create similar collages as done in these magazines.

Screenshot 2022-06-20 102133.png
Screenshot 2022-06-20 105214.png

Brand Attributes
Accessible, Stylish, Smart, & Fitting


UI Inspiration
The idea of the UI is to still convey the same feeling as the magazine cover without using too many colors within the UI itself. This is so users don’t feel overwhelmed and have their own wardrobe create color and interest within as you consistently use the app.

UI Design

Creating the UI section was my favorite part of this whole process. I enjoyed creating a story with the visuals and making a cohesive look. My main challenge for this was to hold back on my choice of colors since I am prone to going bold, but I felt that I could still make beautiful designs with a more neutral palette.  Fonts were chosen to frame the entire app, almost like a visual language. Elements and icons were chosen to be intuitive and easy to comprehend what they represented. Here are the results:

Color Palette

#272635

Raisin Black

#F5F5F5

Cultured

#475B63

Deep Space Sparkle

#CECECE

Light Grey

#6F6F6F

Dim Grey

Start Page
Start Page

press to zoom
Login Page
Login Page

press to zoom
Selecting a Time for Appointment
Selecting a Time for Appointment

press to zoom
Start Page
Start Page

press to zoom
1/9
804-8045468_iphone-x-frame-iphone-x-frame-png-hd.png

Low-Fidelity

After gathering all the elements together I combined the sketches with the branding and UI and created the first iteration of the app. I was able to flesh out how the user flows to be incorporated into the prototype. I often would go back to my references and app inspirations like Instagram to compare to what I was creating while making sure that users were able to access the major flows and complete them. 

Untitled.png
804-8045468_iphone-x-frame-iphone-x-frame-png-hd.png
Untitled 2.png
804-8045468_iphone-x-frame-iphone-x-frame-png-hd.png

I adjusted the smallest font to be 13 px, if the font is too small it can be a problem for people with poor eyesight. Buttons are also more spaced out to not have a user miss press an action.

High-Fidelity

When I was creating my high-fidelity prototype I had my mentor at Springboard and some of my peers in design overlook my work. Most of the critiques were to adjust my work for more accessibility:

Test

 

Once I finished the high-fidelity screens and completed the adjustments toward a more accessible design, I conducted the first round of testing with 5 different users. These usability tests were conducted remotely, and the tests analyzed the app's usability, visual aesthetic, and the functionality of the 3 main flows. These are my findings:

Visual Design:

  • Enjoyed the color story and use of fonts

  • Would like a finished Stylist Flow

  • Want a welcome screen after creating an account

  • Make sure that anything that is actionable or can be tapped is properly color-coded

  • Fix the spelling errors

  • We need to make the "Add to Closet" button more prominent.

Features:

  • I liked that there is access to a stylist that they can book from the app

  • Enjoyed seeing how the camera was able to take out the background and pre-identify the item

  • Needs more details on how the Stylist section works and what the user needs to do to book a session

  • Create a popup explaining what each icon represents and where it will take them within the app.

  • I wanted access to a back button.

Iterate

 

After updating the final features that users suggested during my first round of user testing, I conducted another set of testing with the new features to see which new features either elevated the app or still required more work. This is what users said::

  • Too much text on the opening screen after creating an account. suggestions on making icons or more visual aids to alleviate the info dump.

  • Enjoyed seeing a page dedicated to explaining the icons and the features within the app.

  • Some verbiage within the new popups is a bit vague and doesn't explain what the features will do.

  • Would like to see what it would look like when you like to save a post, wanted more interactive features.

  • Appreciated the popup explaining how to book a stylist.

  • Loved the stylist page and seeing the small previews and getting to go into a profile and read reviews

  • Enjoyed the animations within the review section for the stylist.

  • Would like to see what a profile for your own account would look like on the app.

  • Users would like to see a flow for taking a picture of an item of clothing that would be edited to have no background and if they can edit the picture before saving it.

  • Overall great experience in the app many users wish to see it fully done!

I went back and added the features that I felt I knew I could accomplish and that I knew would add to the overall look of the app. While some others I was not able to accomplish some due to a lack of knowledge on how to incorporate while using Figma.

Conclusion

 

Overall my experience in completing my first capstone was both extremely challenging and enjoyable all at once. The entire process was similar to how I would go about creating my own art projects in college. I would go research a topic I wanted the art to focus on, interview people, compare my work to other artists, and see where I could improve. Even down to the critique of my work and taking their comments into consideration when going through the art process. 

In essence, if I had more time I would like to go back to this project and fully flesh out the app and create flows from the other features that were missed and incorporate what an altered version of the app would look like when accessibility features are included.

Next time I feel that should take more time in learning about the Figma program to create more interactive sections to feel less static. Even take more time in the initial user interviews to gain more insight into what the public would want for this app.