StyleEye Interactive Prototype Report The Team: Jia Le He (Dev Lead) Katy Hulsman (Documentation) Sunny Peng (Webmaster) Jennifer Sloan (Design) Derek Tseng (Project Manager) Problem and solution overview Sometimes, people will see an image, a pattern, or a style that they really like and will want to own something in that same style. Unfortunately, there is currently no easy way for people to find items with a specific style that they are looking for. Our proposed solution to this problem is a mobile searching application that utilizes crowd-sourcing to find its results. The application will allow users to take pictures of styles that they like and will use a crowd-sourced AI such as Mechanical Turk to allow other people to try and find items that are identical or similar in style to requests that users submit. Tasks Simple: Suppose that you admire Jessica Simpson's style and that you want to stay up-to-date with her StyleEye submissions. Go to your following page and add her to the list of people that you are following. Her username is JessicaS. Medium: Imagine that you are walking down the street and you see an item that catches your eye. Take a picture of it and, without cropping, add a personalized description indicating what you like about the item, or what you would want to see changed about it. Submit this for a search and then look at the details for the submission you just made. Complex: You are interested in seeing what styles the StyleEye community currently considers to be the best, and you would like to find a style that you like amongst these. Look through the latest popular styles, find something that someone else has posted, and re-post it to your style. Then, go to your style page to see your re-post. Revised interface design To conform to Android 4.0 design standards, we chose to use the Holo Light theme. The overall color scheme is sleek and subtle, so that users are not distracted by overwhelming graphics.
We did add some color to the text so as to make the application look a little more bold and exciting, and to make StyleEye unique and stand out from other applications (See Figure 1.1). We used to have three buttons at the bottom of our application as an action bar: MyStyle, Camera, and Popular (See Figure 2.1). The Camera button was slightly larger and more prominent than the other buttons, as submitting style searches was a major use of the application. However, this did not conform to Android design standards. Additionally, we decided it would be easier to include an area solely for the user to manage who they are following. Now, we have four buttons at the action bar in the bottom that conform to Android design standards: My Style, Camera, Popular, and the newly-added Following, in that order from left to right (See Figure 2.2). We initially changed our Following page to have a + button next to a text box with placeholder text telling the user to enter in a username to follow. We believed that this was a clear but concise indicator that the username entered would be added, and the hint for entering the username disappeared when the box was clicked (See Figures 3.1 and 3.2). However, we decided that the textbox looked out-of place with the rest of the layout, and did not conform to Android standards. We instead chose to have an adding icon at the top right corner of the screen, and when the user clicks on it, it would display a dialog box into which the user can type in the username of the person they want to add to their following page using the phone s soft keyboard. This got rid of the necessity of having the text box at the top of the page (See Figure 3.3). For the MyStyle and Popular pages, there are still two rows of three items, but they are a little bigger than before to make the text more readable and so that the user can see a clearer image of the item without having to go to the specific item page (See Figures 4.1 and 4.2). Also, we implemented a paging system so that the user can swipe right-to-left to see more results. This swiping motion makes use of our clothing rack metaphor, since clothing racks can move left and right, and it would not make much sense to scroll up and down on a clothing rack (See Figures 4.3 and 4.4). We made our process of taking a picture with the camera into a process funnel to make it easier for newer users and streamlined for experienced users. We now have three buttons that are displayed after the user takes an image: one for the as-yet unimplemented cropping, one for the option for re-taking the picture, and one to continue to add to My Style. Now, cropping is not required every time a user submits a new style; if the user does not crop, the app will automatically center the picture for the icon that displays on other pages. If the user wants the entire picture to show, we want to facilitate that (See Figures 5.1 and 5.2). For the Following page, we were unable to implement a few things that we would like to eventually include. First, we wanted to clearly divide the list of usernames being followed by first letter (See Figure 6.1). We also would have like to have had a search function that allowed for the list to filter as a user types in a person s username. In the MyStyle and Popular pages, a small UI feature that we have not yet implemented was a particular look to the individual item images that would have a semi-transparent box that overlays the lower portion of the image where details about the submission will appear (See Figure 6.2).
Storyboards: Simple Task: Medium Task:
Complex Task:
Prototype overview The tools, their advantages, and their challenges: We used the Android SDK and emulator for Eclipse to create our prototype, and we chose SVN as our version control tool. The tools were easy and intuitive to learn. Some basic elements of the user interface could be dragged and dropped, but we wrote the majority of the XML manually. Images specific to StyleEye had to be added in by hand and scaled properly. While the XML was long, it was fairly easy to read through and to understand. For Eclipse, getting SVN set up was very difficult. While making the repository seemed easy, the majority of our team members had various issues when it came to committing changes and updating to HEAD for nearly the entire first week we had to work on the prototype. Most of us had to uninstall and reinstall our respective SVN clients, as the most recent version contained a bug and did not work with Android. Once we did get the SVN up and working, getting the emulator to run properly was also a bit of a struggle for some team members. Some parts of the Android SDK did not seem to install properly in Eclipse, leading to the virtual device manager being unable to create an emulator for our project. Once that hurdle was over, the emulator was extremely slow, and really slowed down our coding process, as it took a relatively long time for us to see the changes we made in order to verify that we had the expected behavior or look. Overview of the implemented UI Users are first brought to their My Style page, where they can look at their previous submissions. Users can swipe the screen left and right to move between pages. Users can see if any matches have been found for a submission by clicking on the submission image. They can view the details of a specific match(whether their own or that of a response) by selecting it From there, users can use the action bar at the bottom of the screen to navigate to additional pages. They can take a picture and submit a style by clicking Camera, see what styles are popular on StyleEye by clicking Popular, and manage who they are following on StyleEye by clicking Following. If the user selects Camera, they are then able to use their phone s camera to take a photograph of the style they would like to search for. When this first picture is taken, they are shown a page where they can opt to retake the picture (and where they have the option to crop the photo they just took, but the functionality for that is unimplemented). Once they take a photo that satisfies them, they can then add a description and submit their style search. From there, they can choose whether to submit a new style search or go back to My Style to look at their submission. If the user selects Popular, they are taken to a page that resembles their My Style page layoutwise. Insteaad of containing submissions that the user has posted, the Popular page instead contains the most popular submissions of all StyleEye users. Users can again swipe the screen left and right to move between pages. As with My Style, they can also select submissions to look at them in greater detail. They can also repost these styles to their own My Style page if
they wish. If the user selects Following, they are taken to a page that contains an alphabetical list by username of the users they are following. At the top right corner of the page, there is a button that they can click which allows them to input the username of another user they would like to follow. Once they press enter on the popup soft keyboard, the new user will be added to the list. Please see storyboards for screenshots. What was left out and why We considered and then decided not to implement a searching functionality on the Following page with autocomplete for searching for followed users because we simply did not have the time to put it together on top of all the other changes that were absolutely necessary to make. Dynamic filtering while entering the search query would have been very nice, but with the way our list is currently designed, it would have been very difficult to achieve and we decided that it was not a high-priority feature. Under Popular, we also wanted to have filter options at the top of the page to single out users by location relative to the given user and users that the given user is following at that time. The rationale behind this was to allow users to personalize what popular items they wanted to see, as they might want to focus on the fashion of a certain region (in terms of the location filter), or they might follow only people with certain styles (in terms of the following filter). We decided that this was not integral to our application, and would not have integrated well with our current layout. We also did not have the time to implement some minor details involving submissions. When a user reposts a style onto their My Style page, the author of the submission should remain as the user that it was reposted from. With our current build, the author is changed to Me. Descriptions that are entered in by the user during a submission or a repost are also not displayed on the details page of that submission/repost. We did not have the time to implement these features, and we feel that they are minor enough that they are not necessary to accomplish our three tasks. Any wizard of oz techniques required to make it work We have created the illusion that other users have been using the app, and that even the user who is working with the app has used it before. Both the user and other users already have predetermined style data posted in their style pages, and responses to some of these searches already exist. Also, all of the items that show up in the popular page are randomly generated each time the user navigates to the page. Prototype screenshots (as many as needed to document entire UI)
Figure 1.1: New MyStyle page, showing Holo Light theme. Figure 2.1: Bottom action bar on previous prototype. Figure 2.1: New bottom action bar.
Figure 3.1: Adding a new person to the Following list on previous prototype. Figure 3.2: 1st revised design for adding a new person to the Following list. Figure 3.3: 2nd revised design for adding a new person to the Following list. Figure 4.1: MyStyle page on previous prototype.
Figure 4.2: New MyStyle page. Figure 4.3: Paging implemented, first page
Figure 4.4: Paging implemented, next page Figure 5.1: Camera buttons on previous prototype.
Figure 5.2: New camera buttons.
Figure 6.1: Sketch of unimplemented separated list for the Following list. Figure 6.2: Envisioned look of each of the items found on the MyStyle and Popular pages
Figure 7.1: Brainstorming sketches for StyleEye page
Figure 7.2: Brainstorming sketches for Camera page