outfit logo


Everything fits.

The prototype to the right is interactive. This page should be viewed on an HD desktop or laptop monitor on a modern browser that is not Safari in a maximized window.

Table of Contents

Onboarding Process

The onboarding process introduces the primary feature immediately upon sign-up: making a fit profile so that all the clothes have at least a 70% likelihood of fitting perfectly. This information is based on collaborative filtering of user's self-reported clothing items that fit. Then we introduce the concept of liking (which contribues to the collaborative filtering) and saving items of interest that can be found easily later and for which sales and discounts can be advertised. The closet is an inventory of all clothing that the user owns and has logged. Users can, of course, purchase clothing through the application.

After creating an account, users are shown ten sets of clothing that contribute to their style profiles and determine which gendered clothing they prefer, if any. It also allows for people who do not identify with a binary gender classification to choose male- and female-gendered clothing. The second step of the fit profile is selecting brands and sizes of different clothing items that users would typically wear. After providing height and weight, users have the option of entering their measurements, if they know them, or indicating their body shape using scalar and visual measurements. We ask users to indicate three specific items of clothing that fit them really well, and then request access to their email account to compile past purchases and/or to add clothing items individually.

Home Page

The home page is actually an algorithmically generated never-ending list of clothing items that are presented on cards. Users can like, add to wishlist, or purchase the items from card icons. If they tap the card, they are taken to the item's page in which they can find user-generated ratings and reviews.

Daily Recommendation notifications can alert users to general sales and discounts.


Users can visit their Wishlist to see the items they have "bookmarked" for later. These are items that the user is interested in purchasing, but they either want to think about the purchase or wait for the item to go on sale. Clicking on any of the items within the Wishlist would take the user to the Item Page where the user can read reviews or add it to their cart to purchase. The user will also receive notifications if one of the items goes on sale. In this case, the bell icon on the Home screen would notify the user of the sale.


The Browse section groups clothing into different categories based on style, occasion, and season. Clicking into the category allows the user to browse various clothing items (pants, shirts, et cetera) that fall within the category. They can click an item's card and see the item page just as they can on the home page to see the item's ratings and reviews.


When a user chooses to purchase an item, they add it to the cart with the "arrow down cart" within the card. After adding the item to the cart, they have the option of checking out. They can also tap the cart icon at the top right of every screen. Users can make the usual adjustments of quantity and size, as well as the option of choosing a retailer when there is more than one option available. All items are purchased in-app and users are not redirected to 3rd party and retailer sites.

Users can perform a simple search from almost any page of the application and it will drop them off in the browse section along with their results. However, they can also use a number of filtering options for item type, brand, size, color, season, and price. When the users are browsing filtered search results, the filter icon is a noticeable blue to indicate that filters are in effect so that they can modify a search without starting over completely. From the search results, users can tap the item's card to view the item page just as they can in Home and Browse.


The Closet is where a user can view outfit recommendations based on clothing that they already own based on weather and calendar events, view their clothing items, and create their own outfit combinations to save for later use. Choosing Outfit Recommendations shows a calendar view in which outfits have been placed for recommendations based on keywords in users' calendar events, such as weddings or parties. These recommendations take into account the weather as well to provide appropriate outfits. Users can set outfits for particular days and schedules as well. Users can also use the Randomize function and choose two or more types of items to create a set, and an outfit composed of those items will be randomly generated as shown in the animation below.

My Items shows a grid of the user's items, to which they can add clothing through the camera or photo gallery application. My Outfits shows user-generated clothing outfits that can be named and edited. Users create outfits by tapping the floating action button and either selecting from a grid or searching for items from My Closet. Metadata associated with these outfits are used for recommendations based on weather and occasions as shown in the animation below.


From the Profile screen, users can access several important and useful functions. If the user's weight or body measurements change, they can go to Edit Fit Profile so the app will adjust size recommendations accordingly. Notifications will display all relevant sale notifications, instead of just the most recent ones that the user is alerted to on the Home page. Users can also access data about the clothes they own via the Statistics page. This data helps the users learn which items and outfits are most frequently worn, or not worn, so that users can identify potential clothing items to get rid of.