Clothesline: Digitizing
Closet Space
Project Overview
During my Spring 2022 semester, I attended a UX design bootcamp hosted by the Georgia Tech Nonprofit Bits of Good. In this bootcamp, we worked in groups of 2 to create an application concept and turn it into a high fidelity prototype. We decided we wanted to focus on alleviating the problem of outfit indecision on a day-to-day basis by letting users record clothing pieces and compose, filter, and sort outfits for future reference.
Role:
User Experience Researcher
User Interface Designer
Team Members:
Alexandr Shor
Elizza Kailamachinde
Project Duration:
January-April 2022
Problem
The struggle of choosing an outfit
On a day to day basis, many people come across the hurdle of figuring out what outfit they would like to wear without trying on different outfits. This can lead to time wasted in search of the “perfect outfit” for the day, not to mention a room strewn with clothes as a result of the pursuit.
Solution
A Digital Closet Where users find the perfect outfit, hassle-free
We designed an application that allows users to record what outfit pieces they have as well as what outfits they want to create. Each outfit has an associated color as well as information regarding ideal times for the outfit. As such, users save time and space finding the outfit they want.
User Research
We wanted to figure out how people select their outfits - whether it be buying or wearing
With the knowledge that we wanted to work in the problem space of outfit selection, we wanted to narrow our understanding of what concerns people found when selecting outfits. To that end, we created a survey with the following goals:
1. What factors contribute to forming daily outfits?
2. How do people typically find what styles or types of clothing work for them and feel confident in the clothes they wear?
3. How do people fill their wardrobe?
We were able to receive responses from a pool of 20 college students between the ages of 18-22.
Research Findings
Findings point to designing with context-based outfit selection in mind
By analyzing our responses through quantitative findings and qualitative response analysis, we found that:
01
Most People Prioritize Weather, Color Palette, and Available Clothing when selecting an outfit
50% of surveyors placed working with what’s available as highest priority. weather was either a secondary or primary priority for 100% of the surveyors, and color palette proved a secondary concern for 50% of surveyors (and a primary concern for 25% of surveyors)
Buying clothes comes largely from “Love at First Sight”
80% of surveryors looked for whatever looked nice on shelves rather than for any particular item or plan in mind
02
03
Satisfaction with a given outfit largely came down to physical comfort and aesthetic appeal
Based on open-ended responses based on outfit satisfaction, we found that people primarily judged satisfaction with their outfit through how comfortable they felt while wearing their outfit - roughly 55% of responses indicated physical discomfort as a key detractor from outfit satisfaction. Additionally, people rated aesthetic appreciation of the outfit as indicative of satisfaction - 60% of responses pointed to feeling pretty/handsome in an outfit as being satisfied with an outfit
Key Takeaways
01
Prioritize the User’s Closet first
Though we originally considered potentially adding a shopping feature. However, we found that online shopping wouldn’t be a particularly helpful option, as many of our responses reported that they primarily shopped in person, and had a natural distaste towards online shopping
Keep comfort in mind when designing
Our goal shouldn’t be to create an application that pushes the user out of their comfort zone. Rather, our application should be geared towards giving users a place where they can comfortably catalogue their outfits
02
People express themselves through their clothing, so the application shouldn’t be designed with pushing a user’s fashion forward. Instead, every step of the process should be ensuring that the user can comfortably access, edit, and add the outfits they want.
Information Architecture
With User Responses in hand, our next step was figuring out how to organize our application
Following our survey, our next step was to construct a flow for what users would experience in the application. We focused on the Closet page as the home of the application, where users could see all their outfits unfiltered. From there, users could view specific categories of outfits, see their clothing library, or create a new outfit or clothing item. Interestingly, we were thinking of incorporating an automatic outfit generator, but that proved both out of scope and unnecessary as a feature.
Initial Sketches
Outfits as cards, and aesthetics as categories
We knew we wanted each outfit to have a card view with some pertinent information, and given that according to our survey most people prioritize weather and color palette, we thought those important to include in the card view.
The idea of categorization as the main tool of filtering at this stage of the project came from the concept of aesthetics, whether it be as simple as “business casual” or something more specific like “Y2K” or “Dark Academia”. One of the first tools for grouping outfits in real life is through aesthetics, so it felt like an obvious digitial parallel to make.
Mid Fidelity Iteration
Extending out from the outfits tab
Our implementation of the app concept focused primarily on the outfits tab, associated categorization, and ability to edit an outfit. When it came to editing an outfit, we decided on an automated approach to determining outfit color scheme and weather based on the color of the items chosen and material of the items chosen. We decided to go with this approach initially as a way of prioritizing user comfort through automation. However, we later discovered that automation doesn’t always equal comfort
Bootcamp Feedback
A critique session with bootcamp groups and instructors pointed to key shortcomings in our design
Following our initial designs, we held a bootcamp-wide critique session for our mockup. This gave us some very valuable insight about the pitfalls of our previous design. Notably,
01
Lack of Transparency
Our mockup relied way too heavily on iconography in place of text, and without onboarding it was too easy for users to get confused. Additionally, all of the assumed automation made it hard for users to feel like they were comfortable and in control of the application.
Lack of Fluidity for Outfit Categorization
There was no clear way to add an outfit to multiple categorizations. Additionally, categories were not always easily findable
02
03
A lack of Clear Filtering tools
If a user had an abundance of outfits our app didn’t offer any tools to help users get to the outfit they actually would consider. Categories go some way in that regard, but adding additional refinement would be very useful
Style Tiles
In transitioning to High fidelity, we picked a style that was simultaneously refined but neutral
While receiving feedback, we were also able to decide how to style our application. Ultimately, we wanted to ensure our app style was refined but neutral enough to not overpower the style of the user.
Iterating on visual language
Critique sessions pointed to a need to give color and shape the backseat for the sake of standardization
To get around the issue of hidden features behind iconography, we decided to pull the categories out from the hamburger menu and instead place them in a toggle alongside an “all outfits” option similar to how Pinterest gives a toggle on the mobile app. This meant that we could have both a catalogue of all available outfits and categories of outfits easily accessible to users.
Iterating on visual language
Critique sessions pointed to a need to give color and shape the backseat for the sake of standardization
We knew we needed to add filtering tools due to the bootcamp critique, and we decided to make filtering options for Seasons, Color, Category, Temperature and Tags.
Iterating on journaling
Introducing Tags gives users the opportunity to define custom, easily attachable search terms
While other categorization tools are useful, we wanted users to have an easy way of adding customizable filtering tools. That’s why we introduced tags that users can create, edit, and attach to outfits. This not only gives users filtering tools on outfits, but additional custom search options when looking for specific categories of outfits.
Relief Techniques Iteration
Giving more space to the outfit let the outfit shine through, rather than its individual part
The previous design was much more focused on displaying the elements as the visual focus, but it’s the outfit photo that we realized is key, as it is the most clear representation of the outfit. That’s why we made it the focal point, with the items that make up the outfit pushed below.
Final Result
A digital closet to make curating and finding your perfect outfit as easy as can be
A Hub for User’s Fashion
One Central location for all your outfits gives you immediate visual access to your wardrobe.
Easily Sortable
Users are able to go through multiple layers of filtering to make the path of looking for an outfit to finding one as quick as possible
Accessible Outfit Info
When you want to style for color palette or weather, that info is immediately available to you.
Final Takeaways
The importance of imagery
One of the most profound design philosophy shifts we found was the incorporation of images. Before we used any images at all, our initial designs revolved a much more “square” format. Though it may not be immediately obvious, imaging, whether it be stock photos or photos deliberately chosen for the design, play a large role in helping shape the end product
communicate, Communicate, Communicate
Too often, we get stuck in one design path and follow it to the end, even when it doesn’t produce the best result. It is important to take a step back and communicate with people fresh to the idea in order to hear what works and what doesn’t work. Sometimes, it’s necessary to kill your darlings, but always do so with the intent of providing the best service for your users
Remember the Who and the Why
It’s important to always keep in mind who you’re designing for and why. If I were to re-do this project, I would’ve made sure to try and justify each of my decisions based on the audience, rather than on simply gut instinct. While they can be similar, it is important to separate the two and prioritize the people you’re designing for instead of your aesthetic bias.