Osso VR

YEAR

ROLE

SKILLS

TOOLS

 

2023

Visual Designer

Visual Design, UI & UX Design, Prototyping, Problem Solving

Figma, Adobe XD


Log In Redesign

PROJECT OVERVIEW

The Product Team at Osso VR received user feedback about the log in page being confusing to navigate, as users were experiencing trouble locating the secondary log in option.

To help solve this problem I researched common log in designs and flows for VR and web, surveyed the login page and its contents, sketched up ideas for solutions, created wireframes and visuals, then prototyped the design to present the intended flow and behavior. The login redesign is making sure the design is suitable for both VR and web. I achieved this by making buttons large enough so users have a decent amount of surface area to press the button with their controllers.

Having an understanding of our users needs and an understanding of common design patterns for logging in created a successful outcome for this project that solved the initial problem at hand. The redesign received positive feedback from Osso VR’s B2B clients, such as Johnson & Johnson.

 

Image taken in VR

I thought of different ways to present the login options to the users by researching common login patterns, observing how other VR applications approach logging in and sketching different ideas on paper.

Because there are two ways to log in, it makes sense to have the different log in methods be buttons on the login page, so the user is presented with both options at once. The user can then choose which option they prefer to log in with, one being email and password and the other logging on with browser.

Examples of inspiration and sketches below:

 

From there, I went through the process of turning my favorite sketches into basic wireframes.

During this phase I included the use of icons to further communicate the log in options and how they present on the page to the user. Different copy options were also incorporated for feedback.

 

Sticking with Osso VR’s brand guidelines and existing design system for the launcher application, I added the visual design to the selected wireframe.

 

To show how the new login flow would work for the engineers, I prototyped the design to show how the user can click through the different login methods and return to the homepage if they need to go back. This version of the log in page will exist in VR only, whereas the web version will show the default email and password fields.

 

UI Redesign

PROJECT OVERVIEW

Users expressed difficulty with reading and accessing the UI in the VR modules. Modules had tooltips floating in space with no background which were hard to read, providing no separation between text and all of the 3D art and visuals. There were also mismatched pieces of UI throughout different modules and no unified design system to make UI feel cohesive from project to project.

Button states, colors, the look and feel of the UI, typography and layout were all carefully considered through out the initial phase of the redesign. The redesign was also tested for accessibility to ensure users with viewing disabilities can read and access the UI.

 

BEFORE

AFTER