StyleEye. The Team: Jia Le He (Dev Lead) Katy Hulsman (Documentation) Sunny Peng (Webmaster) Jennifer Sloan (Design) Derek Tseng (Project Manager)

Size: px

Start display at page:

Download "StyleEye. The Team: Jia Le He (Dev Lead) Katy Hulsman (Documentation) Sunny Peng (Webmaster) Jennifer Sloan (Design) Derek Tseng (Project Manager)"

Gloria Parrish
5 years ago
Views:

1 StyleEye The Team: Jia Le He (Dev Lead) Katy Hulsman (Documentation) Sunny Peng (Webmaster) Jennifer Sloan (Design) Derek Tseng (Project Manager) Problem Description: 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. Solution Overview: Our proposed solution to this problem is a mobile searching application that utilizes crowdsourcing 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 Task] Search for an item you see in your environment and want to find. Imagine you are walking on University Way and girl wearing a leather purse that catches your eye. You wish you had one just like it. StyleEye allows you to quickly take a photo of this purse and find similar styles. Just press the camera button, take a photo, crop it, and submit it along with an optional text description of what you are looking for. Within minutes, you could receive suggestions for items that resemble the purse. We chose this task because it is the main draw of StyleEye: to be able to find clothing and accessories in styles that you want. [Moderate Task] Stay up-to-date with the style of a person whose style you admire. You follow Jessica Simpson on StyleEye because you are interested in her style. StyleEye gives you the ability to stay up-to-date on the actions of users you are following. Simply press the My Style button, which is visible at all times, press the Following tab to display a list of all the people you are following, and click on anyone on this list to see their profile and submissions. We chose this task because we wanted to foster a community amongst StyleEye users that allows them to draw inspiration from one another. [Difficult Task] Browse the latest popular styles to find a style that you would like. As a curious StyleEye user, you are interested in what the community considers to be the best styles, and you would like to find a style that you like amongst the most popular so that your style doesn t become outdated. Press the Popular button. This brings you to a screen that displays a feed of styles that are on the rise. We chose this task because users can find inspiration from current trends not only in their smaller following/follower community, but also in

2 the larger StyleEye community. Overview of UI Design Changes: We changed our platform from ios to Android because we decided that we liked the look and feel of it better. We feel that this platform change will make it easier for us to implement our interactive prototypes later on, and we will be able to deliver a more polished prototype to use for our user testing. However, for this high-fidelity prototype, it was rather difficult to get all the widgets from JustinMind. We did manage to remove all the ios back buttons and move this functionality to the Android back button on the phone itself. We also changed the dialog boxes to the Android style. Most of the changes we made concerning usability were made in order to clear up any misunderstandings about what certain parts of the app did, or what should be entered in a certain field. In the My Style section, we clarified the differences between the user s submissions and those of the users they follow. We did this by adding different color borders for the two types of style submissions (green for user s submissions and blue for the users they follow). [Figure 3] We changed the names of several things in the Camera section, including the section s name, in order to make their functionality more apparent to the user. We also added a new error prevention mechanism to the process of submitting a photo. We decided to keep the submission process simple and largely streamlined. In the Popular section, we made changes regarding how the user manages the people that they follow and the people that follow them. We also changed the navigation at the top of the section to make its filtering properties more evident. In terms of aesthetic changes, we changed the several labels. The center Camera button was changed to Take Photo, the Cancel button while taking a picture was changed to Retake, and the Submit button on the submission page was changed to Submit and Add to My Style to make it clearer to the user what tasks the buttons are for and what the consequences of pressing those buttons are. The Your Style top label on My Style tab was also changed to say My Style to be consistent. To further enforce consistency, all of the main labelling except for the bottom bar buttons was changed to have Title Case. [Figure 3] There were also a few aesthetic violations that we did not address in this revision because we did not see them causing problems. For instance, we were told that our contrast was too low, but it did not seem that way to us. We were also told to make our style submission process a little more visible and to give the user a few more directions, but we felt that the buttons we use and the text box prompt were good enough guidelines. Major Usability Problems Addressed:

3 Level 3+ Violations from Heuristic Evaluation 3. [H2-7 Flexibility and efficiency of use] [3] No edit function in my style or for following and followed. Users may want to be able to, for instance, delete someone that they are following. We chose to fix this problem by adding an option to every user s page to choose whether you want to follow or stop following ( unfollow ) a user. Additionally, there will be a block/unblock option added to every follower s page. By blocking a follower, the user prevents that follower from seeing their updates. [Figure 1] 4. [H2-7 Flexibility and efficiency of use] [3] Both following in the popular section and following in the my style section have the same names but different serve different functions. The following in the my style section essentially serves as a management screen for the following page in the popular section. These should be unified to make it clearer that one affects the other. We chose to fix this problem by, instead of having a following tab in the popular section, instead having the option to view only those you are following by selecting (or checking) a following checkbox. We will also be adding an option for users to view only those within a certain region--perhaps by radius or by country. [Figure 5]

4 Other Violations Addressed Instead of StyleEye starting out at the Popular tab, which was the rightmost tab, the app now starts at the My Style tab, which is a little more intuitive at least for Western users, who would expect to start from the left. In the My Style section, we made several changes, mostly concerning following other users and being followed by other users. In the Following tab, the text in the search bar was changed to read Enter in a username to follow instead of Enter in a person to follow, as each username will be unique, but two people might have the same name. We also made it a little more clear that submitting a search also adds it to your style. [Figure 2] Additionally, we used different colors to separate a user s submitted styles from the styles that they have reposted from other users. [Figure 3] In the Camera section, we added a little more in terms of flexibility as to allowing a user to take a picture that satisfies them. When a user has taken a picture but has not elected to crop or has not finished cropping before navigating away, they would lose their picture without warning before. Now, however, a pop-up appears informing the user that they will lose their picture if they navigate away. Also, the cancel button is now called the retake button to help the user understand that they can retake the picture if they did not like the previous picture that they took. [Figure 4] In the Popular section, we made it easier for the users to interpret what the information they re given means. We removed the blue circles that had shown how many matches were found for a given item, as users seemed to find their meaning ambiguous at best. [Figure 3] In the previous prototype, dialog boxes would sometimes take you to a new page when you

5 clicked on the OK button, and other times they would leave you on the same page. Users found this inconsistency to be confusing. To give the user more freedom and control, we changed the dialog boxes so that they now have two options, allowing the user to choose where they will navigate to. [Figure 6] When an item was being looked at in detail before, users were presented with information about reposts and style matches. We decided to change style matches to matches found to indicate that it is not just the original submitted style, but rather any matches found by others, as well. [Figure 7] Screenshots: Figure 1

6 Figure 3 Figure 2

7 Figure 4 Figure 5 Figure 6

8 Figure 7

StyleEye. Interactive Prototype Report

StyleEye. Interactive Prototype Report 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