Project 2 - Smart Dresser: Design

Interface Description

The goal of the interface is to provide a simple way for the user to interact with the smart dresser. The interface includes components to view the description of the dresser, choose the outfit of the day, view and edit the clothes in the the dresser, and create outfits. Additionally, the interface displays the current weather, as weather often times is an indicator of what to wear.

Component Breakdown

Within the main page of the application, there are 4 unique pages: Choose Outfit, My Clothes, My Outfits, and View Dresser Description. Each of these components are described in detail below. 

View Dresser Description Component

At the top of each component, including the home page, the weather and a hyperlink labeled View Dresser Description is included. When the View Dresser Description link is clicked, a flyout on the right side of the page appears. Within this flyout, an image and description of the Smart Dresser displays. Additionally, test functionality depicting the ability to add and remove items from the dresser is shown. This simulates the action of a user pulling clothes out and placing clothes into the dresser. For example, this action set would occur after selecting an outfit within the Choose Outfit tab. This component was created utilizing the Flyout svelte component definition with lib\components\Flyout. 

Choose Today's Outfit Component

The Choose Today's Outfit component allows the user to select their outfit for the day. Within the application, there are defined outfits, consisting of a combination of tops and bottoms. Each outfit has attributes attached to it dictating whether it is considered cozy and/or formal. Additionally, the outfits have temperature range attributes, low and high, to designate what the appropriate weather temperature for the outfit is. 

Within the Choose Today's Outfit component, there are two tabs - Choose Outfit and Selected Outfit. In the Choose Outfit tab, the user can select any of the predefined outfits, and also condense the outfit choices based upon their preference of the attributes mentioned above. The preferences are toggled using a Popover component, which is defined in lib\components\Popover. If the user selects a combination of preferences that do not return any outfits, an alert appears notifying the user that their are no outfits available with this selection. The alert is created with a Toast component, defined in lib\components\Toast. When the user selects an outfit, the Selected Outfit tab displays the selected outfit and its name. If no outfit is selected, the Selected Outfit tab is empty. 

Once an outfit is selected and the Choose Today's Outfit component is left, upon returning into the component the Selected Outfit tab will be selected rather than the Choose Outfit tab. The Choose Outfit tab can still be utilized and a different outfit can be selected, upon which the Selected Outfit tab will update. 

My Outfits Component

The My Outfits component allows the user to create outfits based upon what is already in the dresser and view saved outfits. Within the My Clothes component, there are two tabs - Create Outfit and Saved Outfits. The Create Outfit has three interactive parts - the shirt selection, the pants selection, and the outfits name. Within the shirts and pants collection, the available pants and shirts can be cycled through by clicking the 'Next' and 'Previous' buttons. Once satisfied with the selection, an outfit name must be entered in the 'Enter Outfit Name' textbook. Once 'Save Outfit' is clicked, a popup alerting the user that their outfit has been saved appears. The Save Outfits tab displays all saved outfits in an accordion style. By expanding the accordions, the user is able to view each of the saved outfits.

My Clothes Component

The “My Clothes” page allows the user to view and manage the clothes of which the dresser is currently aware. If the user obtains new clothes to store in the dresser, gets rid of clothes, or wants to change the preferences of existing clothes, changes can be made here, which will affect which clothes will be tracked by the dresser, and which will be available to use when creating outfits.

On the screen above, the user is presented with a list of all clothes currently recognized by the dresser. Each clothing item is displayed with an image (if the user provided one), a name for the article of clothing, whether it is a top (shirt) or bottom (pants), and tags to display any filters applied to the item, as well as the minimum and maximum acceptable temperatures that the user has assigned to that piece of clothing. Clothing items that are dirty (are not detected in the dresser) are marked as such by adding the word “Dirty” and lowering the opacity of the displayed information for that item.

Adding Clothes

If the user wishes to add new clothes, this may be done by clicking on the “Add Clothes” tab. This directs the user to the clothing editor screen, where the user must enter a name for the new item of clothing, select a radio button to indicate if it is a top or a bottom, and enter numbers in the “Highest Acceptable Temperature” and “Lowest Acceptable Temperature” fields, to indicate the highest and lowest temperatures in which the user would want to wear the article of clothing. Optionally, the user may also add a picture for the item, by entering the image’s URL in the “Image URL” field. The user may also tick the checkboxes to indicate if this is a cozy piece of clothing and/or a formal piece of clothing. Once done entering this information, the user clicks the “Add” button, and is sent back to the “Manage clothes” tab, where the new clothing item will have appeared at the bottom of the list. If the user has not filled in all the required fields (name, top or bottom, highest temperature, lowest temperature), a pop-up toast informs the user which fields are required.

Editing Clothes

The existing clothes in the list may be edited by hovering over the clothing item and selecting the “Edit” button which appears. This then takes the user to the clothing editor screen, with each of the fields filled in with the data that corresponds to the item being edited. The user may make any desired changes, and then click the “Update” button to save them and return to the list of clothing items.

Deleting Clothes

The user can delete clothes by hovering over the clothing item, and selecting the “Delete” button that appears. This will cause a browser prompt to appear, asking the user to confirm the action. Upon confirmation, the clothing item will be deleted from the list, and no longer recognized by the dresser.