Design prototype of shortlisted ideas

Among the 4 ideas we had in week 5, we conslidated and selected 2 ptototypes we want to test. These are:

1. News Feed Browsing
   • Tile Display
   • Cover Flow
2. Space Exploration

We would like to observe if the users can explore the functionalities naturally, these include the main function we want to provide (reading news or exploring the space) on the main screen, as well as the volume control function. Overall, we also want to know if the users feel relaxed when they are using the application. We also include additional UI designs for the 'News Feed Browsing' prototype to find out the most natural and intuitive layout for users to browse through the categories of the news feed.

1. News Feed Browsing - Tile Display

In this Wizard-of-Oz user test, we want to place our focus on the actual gesture interaction part, therefore, we cut the part which allows users to customize the environment according to their mood because we thought that the customization part is of lower priority comparing to the gesture interaction part that follows.

Description of the prototype

As a quick recap of the flow of the news feed reading prototype, the user enter the interactive space, which shows an array of news feed content. We would like to display the news in a simple, easy-to-read manner such that the user need minimal mental power to digest and read the content. In this design, we would like to provide a simple and efficient interface to the user such that she can keep herself updated with the happenings aorund the world in a relaxing environemnt.

• 1 You can choose news feed from different categories

• 2 You can then browse the selected news within the category by tapping on the tile

• 3 Tab to read the content

• 4 Tab the specker icon to control volume by raising or lowering your hand

Video of Wizard-of-Oz testing of News Feed Reading - Tile Display

Key Insights

Usability:

• The drawing of volume button seemed to be confusing. The user thought that it looked more like a bell and did not know that the pop up is used to control the volume of the music.
• User seemed to point at his selections rather than hover over it.
• The user suggested that the size of the texts was small.
• The user tried out gestures that related to zooming in and out, but there were not supported.
• When the user waved his hand horizontally, the wizard did not know which direction he wanted to navigate. There was confusion on the direction of scrolling.
• The user looked confused when he selected back button and the previous page poped up.
• The "holding 3 seconds to select" function was not clear and the user could not follow.
• The exit from the volume setting needed to be more clear. The user had to hover on the volume button to exit which was not intuitive.

Usefulness in creating a relaxing space:

• The user felt that the app was not relaxing as sometimes he needed to concentrate on how to select and what coming next after selection.
• The user was not sure of what the goal of the app was.
• The user suggested allowing users to customize the news feed.

2. News Feed Browsing - Cover Flow

From our first wizard-of-oz testing of the news feed reading prototype, we found out that skipping the mood customization part did not provide the user a smooth flow to dive into the interaction and start relaxing by reading. In the cover flow display version of this reading prototype, we included the mood customization part to observe the difference between these tests (with and without the mood customization).

Description of the prototype

- First, the user customizes the environment with her mood of the day with one song that best represents the mood

• 1.1 Customizing the space with a song that represents your mood

• 1.2 Based on your song, Spaatify adjusts lighting and music to reflect your mood

Then, after customizing the environment (music and lighting), the user see the categories of news feed in a cover flow layout

• 2. You can choose news feed from different categories by waving your hand to flip the covers

Video of Wizard-of-Oz testing of News Feed Reading - Coverflow Display

Key Insights

Usability:

• By choosing a song at the customization step, the user thought that she would be watching a video and did not know that the song was mapped to lighting and music.
• She didn’t realize that she was looking a news feed once she got on the “flipboard” page.
• The gestures to control the direction of scrolling was unclear.
• The user treated it as a touch interface at some point, rather than using hand to hover.
• The user was confused about the volume button.
• The user showed confusion as she couldn’t figure out how to exit.

Usefulness in creating a relaxing environment:

• The user liked the addition of music to the environment.
• The user didn’t understand the purpose of the app.

3. Space Exploration

Description of the prototype

The user enter the interactive space, which shows the view of the universe. In this design, we would like to create a serene and simple environement for the user while the user is enjoying the bathtub and navigating the universe with the hand and arm gestures.

• 1 You will then see a large screen showing the universe

• 2 Move your hand to zoom in and rotate

• 3 Zoom-in view of the universe

• 4 Tab on object to view infomration

Video of Wizard-of-Oz Space Exploration

Key Insights

Usability

• The user used a finger instead of the hand to navigate for majority of the testing.
• The user leaned forward and backward for zooming, instead of using two hands.
• The arrows which hinted the use of two hands to zoom were misleading - user thought that they meant left and right rather than the zooming in and out
• The user was unsure about how to exit from the screen.
• The user did not know volume button was to control volume.

Usefulness in creating a relaxing environment

• The user found that the most of the gestures were intuitive.
• The user felt like that there was a bit too much movement in the bathtub so it wasn’t very relaxing.
• The user suggested the idea of a “tour of the universe” instead of active navigation.
• The user was not clear about the goal and structure of the app
• The user suggested that the exploration needed to be more engaging, for example, adding in label and relative position of the user in the space to give him a sign of status.

Lessons Learned from the First 3 Wizard-of-Oz Tests

After the three in-class tests we synthesized the following main points:

1. Our goal and functionality was not clear from the UI design
   • the users did not know what to expect with the app, and what the tasks were
   • a lot of attention was focused on the content of news, which seemed to be the important factor that determined whether the users can feel more relaxed after reading.
2. The flow of the tests was not very smooth and there was lagging when the wizard observed the gesture and made changes to the prototype at the same time.
3. We need to test the prototype on our target audience or at least provide the bathtub setting to mimic the atmossphere
   • most students don’t even have a bathtub or not using a bathtub daily
   • 2 out of the 3 users let us know that they don’t like taking baths and they wouldn’t necessarily read while bathing either

Based on the valuable insights we obtained from the first round of tests, we decided we need to re-work the prototype. The main rework tasks are:

• We need to do more of the initial research about what reading makes people feel relax
• The initial mood customization had to be re-deisgned because it is an important step to personalize and prepare the user to get ready to the relaxing the environment the app would provide.
• A better set-up (a spacious and quiet environemnt) and smoother flow of the test are needed.

Second Round of Wizard-of-Oz

Why bother to have second round?

Based on the feedback from our first prototype, we realized that despite the usability issues, it is hard to tell the more important feedback - how does user feel without the environment set. And due to the low fidelity of hand drawing, users also got distracted by trying to recognize what was the content on the screen. Therefore, we decided to do a slightly higher fidelity prototype using digital mock-up (since eventually our system is likely to be projected onto a wall, so hopefully this prototype would give us more realistic feedback).

Description of the new reading prototype

In this prototype, we made a couple of major changes based on our previous feedback:

1. Instead of using “Mood”, which can be quite hard to tell(say, it’s hard for a user to get in the bathtub and choose “I’m sad right now, and expecting music for sad people?”), we let user to pick different “Theme”, such as beach, picnic, forest and galaxy. After user picks a theme, the background image, music and lighting will be adjusted according to that theme throughout the rest of the experience unless they’re changed by user.
2. Restructured the content we want to present: previously we displayed news feed categories such as entertainment, tech, etc. However from the testing, our users suggested they would be more relaxing reading something less lengthy(like comics) or watch videos. So we reorganized the categories to see which ones caught more interest from the users.
3. The realistic feeling improves quite much - now we can actually simulate the mouse as controlled by the user’s “hand”, go to the corresponding theme as they picked, and display the “real” content for them. The purpose for all of this is to create the real scene as much as possible and see whether user can feel the relaxing environment.

• Video of Wizard-of-Oz Demo of reading prototype

• Video of Wizard-of-Oz Demo of space exploration prototype

1. Reading Prototype 2

2. Reading Prototype 2

3. Reading Prototype 2

4. Full mock up of wizard of oz testing in design school with design coach, Doug

5. Full mock up of wizard of oz testing in design school with Doug's friend