Unwind VR Part III: Interactions and Illustrations

This is the third part of a series about the design of UnwindVR.

The First Edit

Onboarding at the right place right time

We realised that the measurement of breath needed to take place before every experience so as to customise the measurement per session. It was not a process that would take place when the user first downloaded the app.

At this point, we noticed that it was incongruent to include an ‘About’ page in the carousel, however it would also have made no sense to put it in a hamburger menu. We decided that we were going to create a hamburger menu in the future with settings and other features. However, it was not a priority at the time.

Illustrating module previews

One of the goals that we wanted was for the visual design of the UI to tie together the various experiences. It was also important for each of the illustrations to be a kind of gateway into virtual world; to be a microcosm of what the user would be transported into.

Note: all these illustrations were conceptualised, drawn and illustrated by me. No third party assets used.

Lotus (left) and Savannah (right)

Meditating Man (left) and VR or Not VR (right)

Choosing time

One of the issues that we noticed in our user tests were that our users had trouble understanding when to get out of the experience, and whether there was an endpoint. We also noticed that users meditated differently, for varying time periods.

I used Origami to create a few iterations of time choosing UIs to test with users.

Our users found Iteration III to be the most intuitive and simplest to use. Iteration I restricted users to only three options, while Iteration II was too complex an interaction for some users.

To VR or not to VR

Measure Button Microinteraction

This was one of the most difficult problems we faced in the project. What was the best way to communicate the concept of measuring someone’s breath? How to make an interaction that was both measurable and accurate? Was it possible?

Left— this was the first version I illustrated, however we found that users were confusing the big ‘phone’ with large touchscreen panels, and did not associate the button. Right — this was the version that was more literal towards the actual pressing of the button. The colours were also changed to be in line with the other illustrations

The ripple was designed to be a reflection of the calm nature in the VR experiences. We also paid attention to various states — unmeasured, measuring and measured.

Final Screens

This story was re-appropriated from my portfolio. For more content like this, see www.manglerot.com

Continue your reading with Part IV: