woo_design

Kevin Woo

The idea of my design is simplicity. There should not be too much clutter on the pages so that the user can focus on a single task. However, information that can be grouped should be displayed together. Furthermore, I believe pretty javascript features should be kept to a minimum. Sometimes sites are cluttered with pretty javascript that it actually interferes with the content of the site. It also allows those with older computers to browse the site more easily.

Below are the primary services the site will provide. Please note that in the examples below, I have listed my name in several places. This was just for demonstration purposes, but names will be replaced by usernames so that all users will remain anonymous.

1) Main page

When the user visits our page, tis is what the user will first. There are four components: a login, a signup, a description, and a quick example of a stylish clothing set. The login is located at the top right, like most websites have. There is no extra menu screen to jump through or any other hassle to sign up for the site. All one would need to do is place their details very quickly on the signup form and they will be automatically registered. A description of the site is provided, and can be expanded to show more details about the site if the user chooses. This component is primarily used to convince the user that we offer a creative service for them to use as well as an explanation of what exactly our service does. There is an image on the right side which shows the most popular style currently voted on by registered members of the site. This serves as a live example of one of the site's features.The site also has a footer with three links. Each of which will explain their content in a new page. For example, we will list our policy on privacy when the user clicks on the Privacy link in the footer.

2) Profile Page



This page provides the user details of their profile. To simplify the profile information, there are three buttons, each of which will take the user to another page where the user can then edit their respective attributes. For example, the Account Information is the place where the user can edit their name, email, birthday, etc. Privacy will contain items such as setting who will be allowed to see your digital wardrobe, whether to publish your username when voting or suggesting styles to others, etc. Backup Settings will allow the user to download a copy of their entire wardrobe on Style Share to their machines.

3) User Page



This is the page the user will see after a successful login. It provides a basic summary of your experience on Style Share. On the left, there is an image of the most popular style of clothing you own (voted on by your friends or the public). There is an activities list, where it shows you all the recent events regarding your style share profile. If you've received messages, it would list it under Activities. There is a news section, where users can post news fashion industry. There is also a bar at the top of the site listing the services Style Share provides. Here, it lists Browse, Wardrobe, Find Friend, Messages, Settings. Each of these will be explored below. There is also a search bar at the top right, so if the user wishes to search for a style, but is unsure of what the name is, Style Share can provide a best-match type of style based on the input.

4) Browse



When a user clicks Browse, it allows the user to browse the entire styles on Style Share (provided that the users that published them have given permission to do so). One may sort the list by Popularity, Season, and submission date. There may be other options, but that can be added easily later. Each of the images represents a particular style, voted by other users. Each image has a title which is provided by the user who created the style. One can click on a picture to see it in more detail. For example, clicking the highest rated style (the first item if sorted by Popularity) will bring you to another page that lists the clothings that make up the style, the title, a description, a price, and other attributes associated with a style. This is explained in more detail in the Individual page. A vertical scroll bar is necessary to list items that are not within view. Although not shown, the user may vote on each individual style so that the style can be pushed up or down the popularity list.

5) Wardrobe



This is the digital wardrobe. A wardrobe is defined as a set styles. One can create wardrobes using the "Add New Wardrobe" button. Each wardrobe is for a particular purpose, which is defined by the user. If the user feels that winter styled clothing should be grouped, then those clothing styles can be saved under the wardrobe Winter Clothing. Here, I have listed some example uses, but the type of wardrobe is ultimately up to the user. There is a share all checkbox at the end of each wardrobe. This makes it easy to share the entire wardrobe with other users, depending on how you've set the privacy settings. Clicking the Share All will make public every style within the wardrobe (as defined by the privacy setting). There is an 'X' button at the top right of each wardrobe image. This allows the user to delete a wardrobe entirely, including all its styles within the wardrobe.

6) Styles



When the user clicks on a particular Wardrobe (in this case the "Winter Clothing" wardrobe), the user is brought to this page. Each of these items are styles. A style is defined as a set of clothes. Here, Snowy Day Clothes represents an entire style, which would include a hat, a sweater, a jacket, snow pants, snow shoes, etc. Blizzard Clothes could have a different style, such as a face mask, heavy duty jacket, water-proof pants, etc. Each of these styles within this wardrobe also has a share button. By default, these are unchecked meaning these are not shared. If checked, it would be shared based on the options you've selected in the privacy setting. A new style may be added by clicking the button "Add New Style". The features of this button is explained below.

7) Individual Style



A new style is created here. When the user clicks on "Add Item", it brings up a form which asks the user to input several attributes. For example, some key attributes would be type of clothing, and cost. After the user submits this, the attributes are summarized to the right. You can see the Hat costs $4, the title of the Hat (Just 'Hat' in this example), and a thumbnail of the hat image. Each time the user finishes creating the clothing item, the larger image to the left is autogenerated. The hat will automatically be placed at the top, the sweater will be placed in the middle, the pants will be placed underneath the sweater. This is to give the user an outline of the style in one complete view. This feature can be applied to other clothes if the user provides, such as scarfs, ties, belts, etc. Our model should determine this automagically. There is also a title to name the particular style the user has created, a description describing the style, and a summation of the prices of each individual clothing. This is the basic layout, although we may we want to add in more general attributes for the style later. Constructing layers of clothing is possible too.

8) Find Friend



This page allows the user to find their friend as well as locate their existing friends. The style here is similar to Facebook, where a friend's profile here is shrunk down to an image and a name. Users can add people they find using the Find Friend searchbox. Existing friends are listed on the right side. Clicking on the names will bring the user to the friend's public page. People can be added to the friends list once they've been located.

9) Messages



Primary communications are done through Messages. This design was borrowed from Facebook, where a message consists of an image of the sender, their name, a title, and a display of part of the message. Each of these messages can be clicked on and fully expanded. It will also have a reply box so that the user can reply back.