Closet Collective
Mobile User Experience (GRC 429) | January 2023 – March 2023
Quarter-long Application Design Proposal project
Through ample brainstorming, Pinterest inspiration, feedback from peers, and various methods of research, "Closet Collective” was born
Human-centered application design aims to make peoples' lives easier through clothing organization and outfit planning
Abstract Design Statement
Closet Collective gives users the ultimate wardrobe organization experience by creating tailor-made outfits featuring clothing they own. It is never fun getting ready to go to work, school, or an event when you do not know what to wear. But with the help of Closet Collective, rummaging through a wardrobe for the perfect outfit will subside.
Users simply will upload photographs of their clothes, shoes, and even accessories onto the application, stored in the "Closet” section. Inspired by dress-up games, users will mix and match pieces to find a desired outfit. With the “Style Me” feature, the application will curate outfits using artificial intelligence algorithms based on user-behavior. Users can save previous outfits or pieces they loved into the "Favorites" section for future reference.
Virtually organizing a wardrobe will help reduce the stress of deciding what to wear and closet clutter. Less time will be spent searching, purchasing, and returning clothing. Closet Collective aims to embrace peoples' individuality while incorporating fashion tips and tricks so they can look and feel their best.
Audience & Persona
Although Closet Collective is designed to assist anyone who seeks day-to-day styling assistance, the application targets both female and male users ranging from 15–30 years old. However, it is assumed females will be the majority. Closet Collective is perfect for people who continuously find themselves asking "what should I wear today?" The app appeals to individuals in the younger demographic because people often experiment with style trends, but are unsure how to utilize their current wardrobe. Likewise, Millennial and Gen Z users have a variety of lifestyles and desire outfit planning for their busy schedules. By virtually organizing the wardrobe, users can plan outfits ahead and alleviate stress when getting ready. Each time a Closet Collective user closes the app, they will be leaving looking and feeling their best.
Competitive Landscape
Smart Closet is an easy-to-use tool to help users manage their daily outfits. It targets people 17+ and has 4.3K ratings in the IOS App Store. Smart Closet selects clothing from brands and adds them to a closet. Users can add their own clothes by taking a photo and auto-remove the background by one-click. However, the background removal can be difficult. Users can create looks by combining clothes and generate random looks using "rules". Smart Closet has a calendar feature and packing section too. The app is priced at $3.99 and is ranked second in paid shopping apps. Smart Closet was created about 4 years ago, so it can be inferred it is in the early majority adopter category.
Pureple Outfit Planner is a closet organizer and planner that suggests users outfits based on their wardrobes. Pureple is designed for men and women, any age. It has 5.3K ratings in the IOS App Store. Pureple provides a fast way to organize a virtual closet by auto-categorizing items. It is a virtual stylist and can suggest outfits from the wardrobe by learning the user's style. With Pureple, users can plan outfits in advance, at their convenience. Stylebooks for seasons, occasions, colors, and more can be created. Pureple is free, but has in-app purchases. The app was created over 4 years ago and still needs fixing, so it can be inferred it is in the early majority adopter category.
LookScope is a revolutionary solution for wardrobe hassles. Designed for men and women of any age, LookScope allows users to import photos of clothes and accessories in seconds. It has 342 ratings in the IOS App Store. The primary features of the app include a closet to see the collection, add items, star looks for the favorites, and automatic iCloud backup. The swiping allows users to easily rotate through pieces. It is a very minimalist app and could use some color. Unfortunately, LookScope is $3.99. The app only has 342 was created about 4 years ago, so it can be inferred LookScope is in the innovators adopter category due to the low ratings.
Comparison Chart
Technical Requirements & Constraints
Closet Collective requires a smartphone that has access to internet connection and a camera/photo uploading capabilities.
Touch is necessary to interact with the application so users can easily toggle between different outfits, the calendar, and other sections.
Artificial intelligence is utilized to make style recommendations to the user based on “favorited” outfits and other behaviors.
Artificial intelligence recognizes the outline of clothing/accessories to automatically remove the photo's background.
A possible constraint is Closet Collective might incorrectly categorize a piece of clothing if the photograph is not clear. However, users can manually organize their closet.
Another constraint is the user may not like the style suggestions, but the app can get a better sense of the user's style if they "favorite" pieces.
Scenario
Use Case 1
Goal: Persona A wants advice on how to revamp their style for school using pieces they own.
Persona A while using Closet Collective on their mobile device clicks on the closet button in the bottom navigation after passing the landing page.
Persona A is in the closet section of Closet Collective on their mobile device and clicks the category they want to browse using the dropdown menu, such as tops, and it opens.
Persona A while using Closet Collective on their mobile device scrolls through the tops they own.
Persona A while looking through tops in Closet Collective on their mobile device favorites the ones they want to style by clicking individual pieces.
Persona A while in the tops section in Closet Collective on their mobile device clicks on the style button to get suggested outfits based on “favorited” clothing.
Use Case 2
Goal: Persona B wants to plan out their outfits for a vacation in the Bahamas.
Persona B while using Closet Collective on their mobile device clicks on the calendar button in the bottom navigation after passing the landing page.
Persona B is in the planning/calendar feature of the Closet Collective on their mobile device and clicks to add a new event entitled "Bahamas" with dates.
Persona B while using Closet Collective on their mobile device begins adding outfits to their trip by clicking a specific date.
Persona B while using Closet Collective on their mobile device browses through different clothing categories in the closet using the dropdown menu, such as swimsuits, and clicks the piece to add.
Persona B while browsing swimsuits in Closet Collective on their mobile device can click the favorite heart button after a piece is selected for future reference, add to the lookbook or add to a new category.
Interaction Framework Based on Use Case 2
Wireframing & Information Architecture
Design Guideline
While designing Closet Collective, my goal was to create a gender neutral application, so that is why there are neutrals, earth tones, and pops of teal and coral. To gain inspiration for the complementary colors, I looked through color combinations and swatches on Pinterest.
The colors represented on Figma are similar to the ones generated in Adobe Illustrator.
As for the iconography, I browsed through the Figma Community and Icon8 website. However, I chose to create my own in Illustrator, except for the “status bar” at the top of each page, which is from Figma Community. The logo is the only teal icon, while the rest are outlined in charcoal. The coral is seen in the hearts where users can choose to “favorite” a piece or outfit.
Lastly, chose to primarily use two type faces, aside from the Coniferous Regular in the logo. Three variations of Kreon were used because it looks good in all lowercase, uppercase, and a combination. This is seen in headings and buttons. Additionally, I chose three Roboto weights because it is one of my favorite sans serifs and would act as a contrast. Roboto is found in the calendar, category titles, and smaller details.
High Fidelity Prototype
Design Considerations
Discoverability:
Priority to make elements on the interface easily discoverable
Added labels on buttons and a navigation bar
Affordances:
Hidden affordance example is the search bar
User clicks the magnifying glass icon, the search bar will appear
Icon’s function will not be displayed until action is taken
Perceptible affordance is seen on the teal buttons
Language used to hint at the button’s purpose and how to engage
Intuitive Design:
When designing the high-fidelity prototypes, I created each page with UX in mind
Made to be simple, easily accessible, reliable, and aesthetic
Future of Closet Collective
Further develop high-fidelity pages
Conduct testing and receive feedback
Create augmented reality experience where a user could upload images of themselves right after they create their account to allow virtual visualization of outfit combinations
Understand limitations of AI database