Final+Prototype


 * Home**



The home page above is the first thing a new user to the website will see (the yellow boxes are notes that explain the page). We try to give the user a clear indication of what exactly our website does, and then provide easy ways for them to hop right in. Clicking either of the two center buttons, 'Create and Outfit' or 'Check out Ideas' will lead the user to either the Outfit Edit page where they can experiment with putting outfits together, or the People page where some of the best ideas on the website are waiting to be explored. There are also featured options, which should stimulate some form of creativity, and when clicked can redirect to the particular item in question to introduce the user to that aspect of our system in a friendly manner.

If the user logs in at any point, their home page will now look like this:

The top navigation bar now contains compact access to all of the user's data, as well as the website's databases. From left to right, the StyleShare logo is a link to the home page, the envelope links to the inbox where other users send messages, the exclamation point links to recommendations that other users provide, the three links in the middle each go to separate pages for searching and browsing their respective topics, and the button/drop down on the right links to the user's closet and settings, and allows them to log out. The settings page is trivial and will mostly only include user log in information, so it was left out of the design process.

There is a center panel that scrolls through all of the user's friend's recent activity, to give the user something to 'chew on.' The updates only refer to items that the users 'made public,' and the wording we plan to use isn't set in stone.

The same featured areas remain at the bottom of the page. These boxes will cycle between a number of featured items; the user should see variety each time he/she visits the home page.

Let's assume the user clicks on the Find Clothes button in the top navigation menu:

The user is now presented with two new areas in the page, under the same navigation bar that remains constant throughout the website. To the left, the users clothes are shown. Any clothes shown here were added to the user's closet at some point. These items can be queried, but minimally since the purpose of this page is more oriented towards finding new clothes to add to the closet. To the right is the search engine for our clothing database, with a variety of query options and a search bar that can take a UPC or product name. By default, if the user followed the link from the navigation bar, the results will be organized by the popularity tier. Every item has levels of popularity based on certain attributes (# of recommends, # of likes vs. dislikes, # of users that own the item), and the most popular items, by some combination of the factors, will be returned first. This essentially makes our website community based. With time, people will intrinsically guide the fashion of one another to a certain degree by causing a change in the most popular items, which show up first in searches. The user can turn off this feature once he/she reaches the page by changing the popularity parameter. Either way, the user should be able to locate an item fairly easily given all of the constraints, even if he/she doesn't have a particular item in mind.

Once the user finds the item he/she can click on it and do a variety of social tasks such as like/dislike and recommend to a friend, or the user can add it to their closet or use it in a new outfit. Recommending to a friend will open a new window (not pictured) with the friends of the user listed for the user to select from. The format of this list can be found on the People page below, on the left hand side. If the user adds the item to his/her closet, the window will simply close and they can continue to browse. If the user wants to create a new outfit with the item, they will be redirected to the Outfit Edit page with a an outfit that contains only that item. The Outfit Edit page is pictured below:



Similarly to the Clothing page, the Outfit Edit page shows all clothing in the user's closet to the left side. To the right is a person-scaled layout of clothing item placeholders that can be filled with images to represent an outfit. The user has the ability to either drag and drop items from their closet onto the canvas, or they can directly select items and add them using a button. The user can also name their outfit, allow other users to view it (this will also put it on friend's home pages), and add category keywords that make the outfit easier to sort. Consider the user wants to mark a group of outfits for a vacation he/she is planning; all they need to do is insert a category keyword such as 'vacation' and the outfit can easily be located from the Outfits page by selecting that category from the Category drop down query. This feature probably can't be clearly understood from the interface alone, so it may make sense to reword the text inside the search to find something that works for new users. We could also add small bits of help to the website, such as tooltips or 'whats this?' links to describe this situation.

Moving back to the navigation bar, the Outfits page opens if the user clicks the Find Outfits button:

This page is similar to the Clothing page, except the user now sees his/her outfits (from their closet) on the left, and the database of outfits on the right. There are query parameters that help with search accuracy in both regions. It is important to note that if the navigation link is used to reach this page, the popularity tiers are again in effect, and the most popular outfits will automatically appear in the search results. This is intended to jump-start users in creative ventures.

Also, there is a plus in the top left of 'My Outfits' that allows the user to add a new outfit to their closet. This link redirects to the Outfit Edit page we looked at previously, as do the 'Add to Closet' links from the pop-ups generated by clicking the results of either search area.

If the user clicks the Find People link in the navigation bar, the People page opens:

This page shows the user's friends on the left, and all other people on the right. There are query parameters as usual, and once again popularity plays a role. The individuals with the most friends, the most highly rated outfits, the highest rated outfit, the most outfits, etc. will appear at the top of the results. As usual, this feature can be changed by the user with the popularity drop down menu.

Once someone is found and selected, the Closet page opens.

The Closet page can also be reached from 'My Closet' in the navigation bar, but in that scenario it represents the user's closet. If it is reached by clicking on another person's profile, it will show the public part of their Closet. Here is the page from the 'My Closet' link in the navigation bar:

The main panel pictured above displays either clothing or outfits from the user's closet, depending on which box is selected above the panel. Since, in this example, the image represents the user's closet and not another person's closet, the user can add items by using the plus button as in the Outfits page. Clicking items also presents the user with options to remove the items from the closet.

If this page was reached by visiting the profile of another person on the website, there would be different titles to indicate the closet is someone else's, there would be a 'Add as Friend' or 'Send Message' button, and add/remove capabilities would be disabled for items. The user still has the ability to browse through all of another person's public items and take them as their own to do what they please with, however.

If another user followed this procedure and added the user as a friend, he/she will then get a message to which a response can approve the friendship. First the user will see a notification on the envelope on the navigation bar, then they will click the envelope and the Messaging page will come up:

The Messaging page is very simple. It shows the history of messages and allows for a quick and easy response to any friendship requests or personal messages.

Lastly, there is a Recommendations page that is reached in a similar way to the Messaging page:



This page shows the recommendations that other users make to the user. Clicking the recommendations has an equivalent behavior to clicking items on the Clothing or Outfits pages.

That sums up the website. There are a few links that weren't covered, but they essentially loop through the same processes on the same pages and are explained in the notes attached to the balsamiq profiles.