What2Wear Prototypes

The What2Wear User Interface has 4 main screens (easily navigated to via the icons in the dock menu at the bottom of the screen). The main screens include Home, Scheduling, Styling, and My Wardrobe. The following sections outline each page with Prototypes, providing the initial UI screens, navigation between screens, and examples of major features in use. These prototypes were designed in Figma.

Home

Upon launching the application or by tapping the Home icon in the menu, the user will see this interface:

The Home UI gives users an overview of the predicted weather for the day in their local area, including any specific outfit suggestions by the AI stylist based on environmental factors. Users will also see any potential reminders here of outfits that they scheduled to wear for the day. Underneath, users will find some quick start buttons that can be used to prompt them to the application's main features right from the onboarding homepage. In future implementation, this would also be where users would access the What2Wear social.

Scheduling

Upon tapping the Scheduling icon in the menu, the user will see this interface:

The user is presented with the current month calendar, through which they can tap to navigate to the day that they want to schedule an outfit for (the default is the current date). The screen also displays a small information on the weather temperature for that day. The user has the option to create a new outfit for the day, or choose from their saved outfits or style boards.

Styling

Upon tapping the Shuffle icon in the menu, the user will see this interface, exhibiting the “Outfit Shuffle” feature:

Here, the default is that users will shuffle through their entire inventory for each of the five categories of their wardrobe (accessories, outerwear, tops, bottoms, footwear). If a user does not want a certain layer in their outfit, they can click on the X button next to that layer to exclude it from the overall shuffling.

Users will click the shuffle icon each time they want through their entire inventory for each category/layer to generate new random outfit combinations. If a user wants to save a certain inventory item for a specific layer to the outfit, but they don’t want to save the entire combination that was generated, they can use the thumbtack icon next to that item to pin it to the outfit. Then, the next time they press the shuffle icon, only the unpinned layers will randomly shuffle and the pinned layer(s) stays the same. Users can also adjust the filters for the results of their random outfit shuffling.

Users can tap “Smart Shuffle” to shift the interface into the AI-assisted full outfit suggestion interface:

Here, they can tap the Regenerate icon as often as they want to generate new full outfit combinations, suggested by their smart stylist which uses AI to create matching outfit combinations from the user's own digital wardrobe. Users can also adjust the filters for the results of their smart shuffle generations.

Saving the Outfit

In either of the random outfit shuffle or the smart shuffle interfaces of the styling UI, the user will press the save button when they are ready to store the outfit that they’ve created. Users can categorize and customize their outfit details before finalizing and saving of them. Once saved, the outfits are then stored into the my outfit inventory on the my wardrobe/profile page. Also, when they save an outfit, they will automatically have the option to put that outfit right to a particular day in their schedule calendar, as well as the option to store that outfit directly to a style board of their choosing.

My Wardrobe

Upon tapping the My Wardrobe icon in the menu, the user will see their digital wardrobe interface, defaulted to the “Inventory” section:

Users can tap “Outfits” to shift to the section where they will be able to view and search through all of the outfits they have created and stored:

When looking at each outfit individually, users will also notice that they have the option to click for more and then from there they’ll also be able to add that outfit to any of their style boards or schedule that outfit for a specific day.

Users can also tap “Style Boards” to shift to the section where they will be able to view and search through all of the style boards they have created:

Each of the different views in the digital wardrobe interface feature a floating button with the “+” icon. Upon clicking this button, a pop-up menu is triggered, showing options to create new outfits style boards, and upload new items to their digital closet:

When adding a new inventory item, outfit or style board users will be able to customize the attributes of it. For example, as shown in the image below, they’ll be able to specify the color style type, etc., of the item outfit or board. They will also be able to add a custom name for the item outfit or board that will be used to help them search their inventory.