Rocket Science - GR3

First Iteration

After discussing in detail what we wanted to incorporate in our first draft from GR2, we integrated the best of all three of our designs and streamlined it into our first iteration. This application will be a platform for users who are looking to get a tattoo for the first time. The goal of this application is to assist these users to not only learn more about the different types and styles of tattoos, but also find an artist who can match his style and preferences.

We carefully made our paper prototype out of a hard card-material, and made sure that it had the basic functionality such as ability to 'show' different pages, etc. Below are the photographs of our first iteration.

Default First View - Browsing for tattoos

Preference Analysis View

Browsing for Artists

Sign up page

Profile Page with Saved Preferences

User Testing

With our first prototype in hand, we proceeded to the session organized by 6.813 (as well as a few other subsequent sessions with users in our own time) to conduct our first few user tests! We gave them the following briefing, gave time a set of fixed tasks to do, and proceeded with our observations. The detailed observations are recorded at the end (Appendix), but we have summarized the main things we observed.

Briefing

This is the briefing we gave to the user. We give the briefing orally to give the purpose of the application, the background information about the domain, and finally some other things:

• Our application is designed for users who are looking to get a tattoo for the first time. They do not know anything about the tattoo process, and may not have a good idea of what they way. The goal of this application is to assist these users to not only learn more about the different types and styles of tattoos, but also find an artist who can match his style and preferences.
• Our target user base is the young adult population who are most interested in getting a first time tattoo. Imagine that you are part of this population and age group (which you are). 
• Finally, we would like to say thank you very much for helping us test our system. Note that:
  • We are testing our system, not you. Our system is a prototype and we need you to help find these problems.
  • If you run into some difficulties, that's great because it means there is some problem in our system
  • We will be taking notes on what you are doing so we can improve our system, but you will not be voice or video recorded
  • Finally, you can stop the test and leave at any time!
• Ok let's begin!

Scenarios Tasks

We created 3 main tasks which we presented to each of the users (6 users in total). The first two scenarios involve the user to use our application as a first time user who are looking to learn more about tattoo process, while the third one involves a user retrieving their saved preferences after a busy week.

1. Learn about the different styles of tattoos, and find the category which best fits your aesthetic preference.
2. Find a suitable tattoo artist who will best fit your preference.
3. You saved your tattoo preferences (collected designs and suggested styles) on our website last week. In this task, retrieve these information before heading to a tattoo parlor. 

Observations and Prototype Iteration

Positive Observations:

• Two out of three users commented that the use of the ‘box metaphor’ as a place to store their tattoos was intuitive and ‘is a familiar’ interface design.
• All three users commented that they liked how ‘clean’ and uncluttered the interface was. We appreciate that and improve it one step further by removing unnecessary buttons and using tabs instead (see changes we made).

With our first prototype, we conducted tests with 3 different users. We collected a set of observations and feedback. Based on this, we improved our prototype. These are the main changes that we made and their associated observations:

Observations Leading to Improvement and Changes:

1. In the Artist Search mode, two out of three users did not use the drop-down filter for artist selection. We realize that the drop-down menu looks small, so we increase its prominence and position.
2. In the splash screen help message, all three users did not seem to notice or click the ‘Lets Go’ button. We fix this by animating the help sequence, and changing the ‘Lets Go’ button to ‘Click here to Begin!’.
3. We have a ‘Smart-resize’ function which automatically resizes the gallery images based on their preference when users select images they like (these fly into their inkBox). However, two out of three users were initially bewildered as to what was going on, but they actually soon realized that the images were being resized. We believe this can be solved by animating the resize in-place. In order to make this less bewildering, we improved our initial help message, and we add a “Turn off Smart Resize” checkbox.
4. All three users seemed to be slightly confused about the different modes of our application in the top right buttons. For example, there was confusion with “Browse Gallery” and “Find My Preference” - two users said aloud that they did not know immediately which to click and simply clicked to find out what each button leads to. In order to make it explicitly clear that each button uses a different mode, we changed these buttons into tabs instead and this will make the modes much clearer and further cleans up the interface. Lastly, the Login/User Profile page was also confusing (two out of three users were not sure if it was a popup or not), so we incorporated it as our third tab.
5. All three users commented that they wanted more details in the Artist Profile, such as contact information. One of them tried to click the address with the hope of getting a map. We improve this by adding more contact information in the artist’s profile.
6. Two out of three users were not sure what to do with the Analysis results. We therefore change the wording of the results given in the analysis, to explicitly say that the results are based on the selections of the user in his inBox and are just meant as a suggestion.
7. Only one out of three people used the ‘inkBox’ button. We think that this will be less of a problem in real life by making it animated. Also, we make it more noticeable by adding an obvious floating rectangle around it to separate it from the rest of the page, and improve the visibility of our welcome splash help message.
8. All three users think that the front page (login page) which had 3 options was confusing. We therefore simplify it into two options: [Login] and [Browse as Guest]. We use one button “Begin Exploring” in the Browse as Guest part. This leads the user directly to the Gallery mode of our interface, along with the splash help screen to guide them along.

Second Iteration

Based on the feedback we received, we modified our prototype extensively. Below are photographs of the new paper interface with the changes highlighted. We have omitted some of the changes we made in the photographs, but we we did indeed implement all the changes as described in the 8 points above.

The new Artist Search interface. Notice the new tab interface (blue box) to prevent mode errors and the more visible filters (yellow box). This not only simplifies the design, but also renders salient some important features we want the users to take advantage of.

The improved Sign-In or Sign-Up page. The user is now presented with a more conventional login page. The user can choose to either login, register, or browse as guest on this page.

User Testing Result in the Second Iteration:

1. The users were still confused with the splash screen help message because we used clear transparency to model it so the users didn't realize that they have to remove the help message first.
2. Zooming functionality is missing in browsing tattoos - a feature that many users wanted, or at least expected. We added it on the fly, but the gesture we came up with conflicted with select tattoo action. We also have to work out how zooming would work in different part of the application, because the tattoo images appears in different places, which have different actions associated with it.
3. The sign up form in our first page caught our user's attention perhaps too well. When given the third task where the user had to login, the users were compelled to type into the sign up form instead the login form. Given that our users might not be logging in repeatedly to our application, especially after they have gotten their tattoos, we need to provide more affordance to the login feature. However, it is interesting to note that many online web services have the log-in function quite difficult to find, example in Dropbox where the login button is really tiny.
4. The smart resize checkbox option still seems to be difficult to be noticed. We were unable to animate the resizing event, but increasing the size difference might be helpful.
5. The inkBox covers parts of the tattoo browser. Some users tried to scroll horizontally, without realizing that s/he can collapse the inkBox for a full view. We think that the collapse behavior needs more affordance, or we should rework how we section the screen real estate to display the inkBox and the tattoo browser.
6.  Users looked for functionality beyond just simple artist look up. Many of them were still confused what to do once they had  We think adding printing-your-result functionality can be a good closure of our user experience once they are done with our application. However we note that search tools such as Yelp do not really go beyond simply providing a result and a map.

Conclusion

Iteration 1

It was difficult to synthesize the essence of our three very different designs we came up with in GR 2 and in developing our first prototype. We wanted to include many features but many of them were not very cohesive when we put them together, and this showed during our user testing. Because we had individually designed the different parts of the user interface, we were unable to see some of the problems. Therefore, our first round of user testing helped significantly, leading to some very good changes that we implemented subsequently in our second iteration.

Iteration 2

From everything that we learned, we changed some parts of our interface, mostly streamlining it and removing many unnecessary features which we realized made things too confusing or were not used at all. After this, the results were much better and we believe we greatly improved the usability. However we also found some new problems (as well as repeated comments) on both good and bad features. Based on this, we will continue to tweak our design, but we think that the current iteration is reasonably good given the feedback we have received so far.

nce once t