StyleShare+-+Prototype+1

=Aisya Aziz's Prototype=

Sketch & Balsamiq Prototype
Side Note: When doing the Balsamiq, I realized that I should have a more consistent top menu - so, I decided to change some of my top menus from the sketch to a more default top menus. However, the top menu doesn't seem to fit a few pages - so, I kept some top menus and changed some. Most top menus are the categories of our outfits or styles. Only when the user reached the overall friends' overview, the top menu changed to the friends' list instead.

1. Log In Page
 * [[image:cmsc434-f11/photo_(8).JPG width="448" height="334"]] || [[image:styleshare7.png width="531" height="322"]] ||
 * Sketch Overview || Balsamiq Overview ||

2. Default Home Page After they are logged in, they'll be able to see this as the default homepage. The side menu is the navigation to other pages. The box on top ('Cali Trip', 'Class', etc) are the current categories of outfits we have. the main box is simply the new suggestions given by people and favorite look that week.
 * [[image:aisyasketch_2.JPG width="448" height="333"]] || [[image:cmsc434-f11/styleshare1.png width="514" height="273"]] ||
 * Sketch Overview || Balsamiq Overview ||

3. Visually Assembling the Clothes If from (2), you click on the category of outfits. (e.g. 'Cali Trip'), then it'll bring the user to this page. The user will see the title of the category. In this case 'Hangout 1' under My Closet. Here, at the side, we can navigate through our closet. In this case, we are currently in 'TOPS'. The two arrows is for us to navigate through other types (e.g. bottoms, accessories). The boxes below them are depending on the types. When the user click on the specific clothes he/she wants, it'll go to the main box. The clothes are default to be put in their own 'space'. (e.g. tops on top of the bottoms).
 * [[image:aisyasketch_6.JPG width="448" height="334"]] || [[image:styleshare2.png width="540" height="272"]] ||
 * Sketch Overview || Balsamiq Overview ||

4. Overview of friends' closet
 * [[image:cmsc434-f11/aisyasketch_5.JPG width="448" height="334"]] || [[image:styleshare5.png width="541" height="285"]] ||
 * Sketch Overview || Balsamiq Overview ||

If from (2), the user click on the side menu 'Friends' Closet', the user will be seeing this. They are basically the list of friends' closet. In each line, the boxes are simply clothes they have. (not outfits) But, they'll be able to see the latest outfit the friends tried on at the 'Latest' under the list of clothes.

5. Comparing Outfits (your pick and your friends' pick)


 * [[image:cmsc434-f11/aisyasketch_3.JPG width="448" height="334"]] || [[image:cmsc434-f11/styleshare3.png width="540" height="266"]] ||
 * Sketch Overview || Balsamiq Overview

I added the arrow while doing Balsamiq to accommodate more than 2 friends picking out the clothes for the user. || From (2), let's say the user clicks on the 'New Suggestions for You', he'll see his own picks and the friends' picks. With this, user can compare between many people's picks and choose the one he wants. The tick and the cross at the bottom is for user's input. If let's say, the user clicked 'cross', the outfits will no longer be available.

6. Helping friends assemble their outfits
 * [[image:cmsc434-f11/aisyasketch_4.JPG width="448" height="334"]] || [[image:styleshare6.png width="534" height="332"]] ||
 * Sketch Overview || Balsamiq Overview

When I did the Balsamiq, I think the friend's pick (in this case, lauren's) should be on the left, considering she's the owner (more prioritized) and for us to look at the idea of what kind of clothing she has her idea on. (and top that)

Sidie Note: Although the top menu seemed similar to mine, it's actually the friend's outfits or styles. (In this case, it seems like Lauren has the same categories of outfits I have. E.g. California Trip, Class, Interview, Rainy Day.) ||

From (4), if the user clicks on the friends' name (either on top or in the main box), the user will reach this page. Here, the user can see the available tops (in the friends' closets) and the idea the friend was thinking of for that specific category. So, in this page, too, you can give out your idea/picks for your friends' category. If you click on the 'Comments' at the bottom of the friends' idea 'box', you can see and add a review on it. The arrow around 'TOPS' is to navigate between tops/bottoms/etc.

7. Search/Browse for clothes
 * [[image:photo_(14).JPG width="448" height="333"]] || [[image:styleshare4.png width="514" height="270"]] ||
 * Sketch Overview || Balsamiq Overview ||

This is simply the 'search engine' to search for clothes to be added up in the user's closet. The left part is basically to show what the user already have in the closet. The top box is to show which type of clothes is the user currently on. (e.g. Top/Bottom/etc) From here, the user can also search according to the color, price, etc.