View UI UX - shleen/threadline GitHub Wiki

Full UI/UX Flow Diagram

UI/UX Design

Home Screen

The homepage is probably the screen that the user will spend the most time on, so we spent a lot of time thinking it through. Firstly, we've made all core features 1 click away (or even 0 clicks away!) from the home screen. e.g. Creating clothing, logging an outfit, viewing wardrobe analytics. Features that are "novel", for example, logging an outfit, are labelled with a title and in some cases a description to help the user understand the available features and how to get there.

There is a navbar at the bottom of the screen with intuitive icons. After analyzing our usability testing results, we decided to add labels to these icons as well, because our usability testing participants were prone to feeling lost while navigating around the app. We heard this in verbal feedback, and also in observing that 5 of 9 test subjects took at least twice the expected number of clicks for at least two separate tasks.

The homepage also has a recommendation section, where outfit recommendations are eagerly generated, based on the items in the users wardrobe, and the current weather. The users are able to click into each outfit to modify them or log the outfit.

Finally, the homepage also has a social feed, where users can look at their own outfit images as well as those from other users. This feature allows them to share with the community what they've been wearing, how outfits have turned out, and to see other users' outfits for inspiration.

Frontend code:

Backend code:

Upload and Tag Item Flow

Users can upload clothing items easily by taking a photo or choosing one from their gallery. In doing so, the app automatically removes the image background on the backend. The app automatically identifies the primary and secondary colors of the item. Users can make use of a combination of pre-determined and customizable tags for each piece of clothing. The Pre-determined tags include identification like "fit" and "subtype" are used for outfit recommendation. Customizable tags are additional meta data that can be used by the user for organization. After clicking the "done" button the garment will be added to the wardrobe.

Front End Code (Andy):

Front End Code (James):

Backend code:

Log an Outfit

The log outfit view empowers the user to manually choose an outfit from their wardrobe. The view presents the tile grid of garments from the wardrobe view and the user can select items to add to their wardrobe. Users can select as many items as they would like and selected items are confirmed by the checkmark icon on the tile. When finished, the "Done" button is pressed and the garments are sent to server to record the outfit in the database with a timestamp. The user can also choose to upload a photo of their "outfit of the day" (OOTD) to send it to the social feed.

Frontend code:

Backend code:

Viewing previous outfits

The previous outfits view empowers the user to learn and analyzer their style habits more qualitatively be examining what they have worn in the past. The view presents a scrollable list of up to 15 previously worn outfits. Each tile contains that was worn in that outfit and the timestamp of when it was worn. Outfits worn more recently appear closer to the top of the screen. If all garments do not fit on a tile, the user can scroll horizontally on it to reveal the remaining items in the outfit. Overall, this view is intended to be less quantitive than other components of the app like the item ranking phase in the recommendation algorithm or analytics view and seeks to provide the user with fast style inspiration.

Front End Code (James):

Backend Code (Stephen) -

Recommendation View

When the recommendation produces a set of outfits for the user, it will display images of those garments in each outfit. The user has the option to either accept a given outfit to wear or continuously generate new recommended outfits and view them. In addition, the user can choose to customize a recommendation to their own style preferences as seen above by replacing a garment or adding a new layer.

The recommendation view has been refined due to usability testing results. For 5 tasks that involved this UI flow, only 2 tasks had a non-zero percent success rate and of those successfully completed, their success rates were 37.5% and 50%. This indicated to us that the recommendation flow prevent the app from delivering value. Namely, users struggled to generate a new recommended outfit when one was already presented so we added a shuffle icon with arrows to navigate between outfits. Additionally users struggled to customize a recommended outfit by either adding a new layer or replacing an item. To improve this aspect, the interchange/lines buttons were added for each garment to encompass the customization functionality leading to a cleaner and more intuitive design. This also removed several large buttons in the view by which users were confused.

Front End Code (Andy):

Front End Code (James):

Backend (Stephen):

Viewing all wardrobe items

This view enables the user to view all garments in their entire wardrobe in one place by presenting the items as a scrollable grid of tiles. If a user taps a tile with an image of their clothing, a pop-up window will appear with more information about the particular garment including an enlarged image, custom tags, type, subtype, fit, and occasion. The garment can be removed from the wardrobe by tapping the trash button which will dismiss the pop-up, redirect the user to the wardrobe, and it can be seen that the item will was removed immediately. The user can also dismiss the pop-up by pressing "done".

The wardrobe is accessible from only the home screen by pressing the "Browse your wardrobe button." This is to simply flow for accessing the wardrobe because we found that only 50% of test participants could access the wardrobe in 2 clicks or less.

Frontend code:

Backend code:

Wardrobe analytics

The statistics or "analytics" view presents the user with data about their item wearing habits over the past month. As a circular progress bar, the user is shown what percentage of their entire wardrobe was worn over the past month. Beneath this stat, the app displays usage percentages on an individual clothing type basis. Specifically, of the types of clothing a user has in their wardrobe, it shows what percentage of that has been worn in the past month. Finally, the bottom of the view presents the most reworn items for each clothing type in the past month.

Backend code:

Frontend code:

Decluttering Help

The declutter view presents the user with the garments in their wardrobe that have not been worn in more than a month. They are presented to the user, 3 at a time, where those who have been worn the least in this time frame are shown first. Garments that were added within the past month but never worn will not be recommended for decluttering in order to account for the situation where a user buys a new garment and immediately adds it to the app. Pressing one of the trash icons will remove the garment from the wardrobe. It will also display the next recommended item to declutter to the user. Pressing the "declutter all" button will remove all three items present from the wardrobe and present more recommendations if they are available. If there are no more recommendations to the declutter, the view will display a message indicating this.

Code Links: Back End Code (Brian):

Back End Code (Stephen):

Front End Code (Stephen):