Phonics VR
UX Design for Android
COLLABORATION：2 Engineers · 1 Design Lead · 1 Manager
DURATION ： Sept 2020 - Feb 2021
PLATFORM ：Figma
MY ROLE ：UX/UI Designer
At-a-glance 👀
I worked with a VR company as their UX designer for over 6 months throughout 2020 and 2021. I worked to redesign the mobile app of PhonicsVR to tailor the user experience to young ESL learners through four rounds of wire-framing, prototyping, and testing. In 6 months, I delivered an end-to-end of responsive mobile design, a detailed design system, and worked with the front-end engineers to bring the design to life.
RESULT
15% increase in registration rate.
94% task completion rate.
TASK & RESPONSIBILITIES
A redesign of their mobile experience, specifically tailored to the needs of ESL kids ranging in age from 5 to 12.
They aim to have a mobile interface that is easily responsive and consistent with their current brand guide.
Scrum process, documented user stories and acceptance criteria.
PROBLEM 🤔️
VR Company’s old interface design has the following problems:
High dropout rate during the onboarding process
Low user retention rate - kids are quitting after a couple of classes
A lack of aesthetic usability, scalability issues, poor content hierarchy
For investors, they are unlikely to invest in a product that doesn't solve the problems for their target audience.
(Below are the original screens for the app.) 👇
SOLUTION ⚡️
I redesigned the interface so that it has a clear hierarchy and a simple user flow for the young users.
Instead of laying out all the features, I highlighted the three key features: classes, guardian's control and reward system. Virtual reality applications require the phone to be inserted into the headset for optimal use. As a result, most of the screens have been designed horizontally.
DESIGN CONSTRAINS & CHALLENGES 🔒
In this project, I was given the design constraint that the web design has to be consistent with the other brand assets of the company.
A kid-friendly interface must be designed carefully, taking into account many factors, including cognitive development, motor skills, attention span, language barriers.
It should also incorporate child-friendly graphics and language, and include features that encourage exploration and learning.
DESIGN PROCESS
UNDERSTAND THE USER 🧒
To understand the users, I carefully read through all the company documents and previous research. I initiated three meetings with the founder to clarify the user situation and the user problem. The company did not plan to conduct another round of user research or user testing, so I worked within the constraint and made full use of existing resources.
To understand kids as users, it is important to consider the following factors:
Age: It is important to consider what is appropriate for their age group and what they are capable of doing.
Cognitive abilities: Create interfaces that are easy to understand and use, and that engage children without overwhelming them.
Play and exploration: It is important to create interfaces that encourage them to play and experiment due to the kid’s nature.
Parental involvement: Children's interactions with technology are often guided by their parents or other caretakers.
INFORMATION ARCHITECTURE
A framework for the IA was laid out in order to better understand the content and optimize the user experience.
LO-FI PROTOTYPE
I then brought my idea to an interactive digital low-fidelity prototype and brought it the key stakeholders to collect feedbacks.
After getting some ideas on paper, I mapped out the flow of how (Christine - imagined persona) would interact with her lessons on the device.
Two main user flows are presented to the user: one where she starts the lesson and another when she completes the tasks and reaches the reward system.
DESIGN ITERATIONS ♻️
I redesigned the interface so that it has a clear hierarchy and a simple user flow for the young users.
Instead of laying out all the features, I highlighted the three key features: classes, guardian's control and reward system. Virtual reality applications require the phone to be inserted into the headset for optimal use. As a result, most of the screens have been designed horizontally.
1 Graphics > Texts
Considering some children may not yet have developed strong reading skills, making graphics a more accessible and effective way to convey information.
2 Improved grouping for better navigation
Grouping helps simplify the structure of information and makes it easier for users to find what they are looking for.
By grouping similar items or topics together, users can quickly identify relevant categories and locate specific information without having to sort through a long list of items. This improves the overall usability of the product and reduces the time and effort required for users to complete tasks.
3 Improved hierarchy
In their original design, the performance page are lack of organization.
Improving the hierarchy of the navigation and make it easier for users to understand the relationships between different categories. This can increase user engagement and satisfaction, as well as encourage users to explore the product further.
HI-FI PROTOTYPES ✨
Communication is 🔑 key to a good design.
Throughout my time working with the VR Company, I’ve learnt the importance of using all resources possible to work within the constraints.
When collaborating with software engineers, I learnt that not all designs can easily be coded, I will always consider technology feasibility when making design decisions.
As I didn't have direct user feedback available, I had to communicate with stakeholders and consult other companies' solutions for guidance.