UX/UI | BRAVRY Concept App
A VR app you can entrust your personal journey.
CLIENT: Personal Project
TIMELINE: March - April 2018
ROLE: UX/UI, User research, Product Concept
TOOLS: Sketch, Illustrator, Photoshop, Invision
Case Study
For this project I developed a concept for BRAVRY, a mobile VR app aimed at helping people work on personal problems, fears, addictions, and personal growth in general. It does so by fully immersing users into five-minute VR experiences in different categories. I conducted user research, created persona and user journey map, design system, and high-fidelity mockups in Sketch and Invision. Because the area of mobile VR is relatively new, I tested a lot of assumptions, investigated best UI practices, and, of course, always thought about my user.
Problem Definition
There are lots of successful apps like Coursera or Lynda that help people master skills that they can use to build their careers. Meanwhile areas like self-improvement and personal growth are neglected. After doing the requisite research, I came to the following conclusion:
There are currently no mobile apps that help users address psychological issues, fears and phobias, and provide users with a secure network of like-minded people.
I think one of the best ways to solve this problem is by incorporating VR technologies because they are already proven to be effective in treating some mental problems. My hypothesis for this project was - lots of people are aware of their psychological issues and will be willing to solve them with a mobile VR app.
Concept Testing | Survey
To test this hypothesis, I conducted a survey that was sent to 108 users recruited through Amazon Mechanical Turk.
The research questions for this survey were:
a) How interested are you in mobile VR apps where you can resolve your psychological issues, addictions or phobias?
b) What is your mental model in regards to the VR apps like this?
The findings of this survey are presented below.
KEY FINDING 1
The majority of the respondents - 79% - are aware that they have psychological issues, and want to resolve them.
KEY FINDING 2
The top 10 issues are Anxiety; Stress; Feeling isolated, alone and withdrawn; Internet addiction; Fear of public speaking; Shopping addiction; Lack of concentration; Anger issues; Video game addiction; Smoking addiction.
KEY FINDING 3
The majority (69%) of the respondents will use the app like BRAVRY to solve their psychological issues.
KEY FINDING 4
The majority of the respondents would use an avatar and won’t use their real name in the app.
KEY FINDING 5
The majority of the respondents - 71% - would invest $15 and more into a VR headset to use the app.
KEY FINDING 6
The majority of the respondents would prefer a subscription model.
Survey Analytics
Survey Analytics
Persona | User Journey
After the survey I moved on to the development of the main persona for BRAVRY. I would imagine it will be someone who is old enough to be aware of their issues. Someone who has tried many other methods of solving the issues and was not satisfied with them. Someone who wants to be a better version of themselves. That’s how Amy Smith was created.
I determined that there was no need for a secondary persona just yet because it seems like very different types of users may emerge once the app is live, and more analytics will be needed to do that.
Follow Amy on her journey with a journey map!
Primary persona, BRAVRY
Journey Map, BRAVRY
Paper Prototype
Once I had a persona mapped out along with her journey map, it was time to start designing a paper prototype. Based on Amy’s needs and on the survey findings, I could hypothesize about the possible UX in BRAVRY. I started off with the sketches that turned into a paper prototype that was tested with three users.
Some of the findings? Home screen needs to reflect user’s progress on the courses. User needs to know where she stands in her current courses, and perhaps get some encouragement on how to proceed. Users want to start with the tutorial and then register, and have the option to create an avatar (onscreen representation).
Paper prototype in test, BRAVRY
Low-Fidelity Prototype
Next followed the low fidelity prototype, another round of testing and iterations. A couple of problems came up during testing the low fidelity prototype. Tutorial “circles” were too flat, and users didn’t know if they should tap on them. After the tutorial users expected to be taken to catalog and not to upload their profile picture; they felt it disrupted the flow. Also, users expected to be taken to the recommended section in Songbook. Bottom navigation icons needed to be more clear and up to the point. After completing the course, users were prompted to chat now, which sounded too pushy. These problems were addressed in the medium fidelity mocks, and tested as well.
Tutorial screen, low-fidelity
Course screen, low-fidelity
Catalog screen, low-fidelity
Medium-Fidelity Prototype
Next I developed a Design System. I initially decided to use different shades of blue and purple because purple is often associated with power, creativity, wisdom, devotion, ambition, and magic. I also used images and not illustrations because I thought that people would prefer them better. During the user testing it turned out that people thought that the app looked too depressive and dark because of the purple elements and the gloomy VR screens. The Library screen looked like a Music Catalog. People wanted to know how secure the network is and if there will be any Hotline available.
BRAVRY tutorial screens, medium-fidelity
BRAVRY app screens, medium-fidelity
BRAVRY chat screens, medium-fidelity
Design System
Based on the usability testing findings, I redesigned the Design System. The font chosen was still Avenir Next, which is an updated version of Avenir that added new weights and widths, and an italic design, and seems a perfect fit for BRAVRY because of its clean and distinguished shapes. For the color palette, I switched to yellow and orange to make the app look optimistic, fun and encouraging. I decided to use illustrations instead of the images to make the app more fun, playful and more abstract. The logo is an origami bird, and this is a symbol of setting yourself free from your internal stories and behaviors that don’t work. It is also a 3D object, which goes hand in hand with the concept of a VR app.
The final prototype was tested with three users, and no major issues were observed. People loved the yellow colors in both the app and on the VR screens.
BRAVRY Design system
Wireframe Flow
The final scope of the project contained 70 screens, and the wireframe flow looks like this.
BRAVRY Wireframe flow
Design Solutions
Here are some final screens for BRAVRY broken into users’ needs and how they were addressed.
OPTIMISTIC COLORS
Now the app colors are primarily yellow and orange to inspire optimism, well being and joy. This is true for the tutorial flow, modals and VR content screens.
BRAVRY screens
TRUST AND SECURITY
The app lets the user know during the sign up flow that privacy and security are its key values. Users are prompted to agree to Terms and Conditions, and they should upload an ID to use chat. There is a 24/7 Support Line available from the Home screen as well to the report an issue button.
Set up, Chat and Home screens with the focus on security and trust, BRAVRY
CUSTOMIZATION
Based on users’ needs for using avatars instead of real pictures, the avatar creation flow was designed that allows users customize their gender, skin and hair color, hair style, emotions, and clothing.
Avatar creation flow, BRAVRY
GUIDED VR CONTENT
I tried to incorporate plenty of guidance in the app in general, especially during the VR flows. Users should know what’s going on and how to view the content in VR. Also, the VR content screens were made more cheerful after the medium-fidelity prototype testing.
VR Chat tutorial screens, BRAVRY
DETAILED INFORMATION ABOUT COURSES | RECOMMENDATIONS
After the tutorial where users are prompted to select areas of interest, they see course recommendations. Also, users are provided with all the important information about the courses - who designed the course, what the course is about, course outline, and associated VR chats.
I stylized the icon for the courses like a postal stamp, which goes well together with the overall emphasis on the user’s journey and traveling to incredible VR places.
Tutorial, Recommendation, Library and Course info screens, BRAVRY
Click to play a walk though video of BRAVRY.
Final Notes
This project was fairly challenging because it’s innovative, and there were not many similar apps around to look up UI patterns and paradigms. The most challenging part was redesigning the design system to a more cheerful tone - primarily because it was very hard to “kill the darlings”. The most enjoyable part of the project was seeing how my hypothesis about whether people would use an app like this get validated during the survey. If I were to go back and rework anything, I would do more user research sessions (such as ethnographic research) to understand users’ needs in more depth and see if we should have more user personas to work with.
View my other projects on Behance!