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.
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?
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: