UI & UX Case Study
Expand Your Vocab!
Designing an AR based language-learning game for children, and creating a user dashboard in a cross-functional team to enable admin control of the platform by the game owner.
Project Goal
Otegeo is a gamified language-learning application that leverages AR technology or increased immersion to induce a more alert state of learning. The design team created the interface of the game for multiple platforms, including website and tablet. In addition, we design a back-end dashboard for admin powers of the game owner to have deeper insights on data gathered, creating an opportunity for further monetization.
Why Gamification?
Gamification has been shown to increase children’s engagement with course materials and improve their motivation, learning participation and collaboration (Nand et al., 2019). As a designer myself, I researched and tried to find games that are popular for children from the age of 5 to 10 on Steam and other gaming platforms. The key take-away was to adopt a visual approach that is colorful, vibrant, and playful
Why Augmented Reality?
Considering that children can only attain knowledge from two-dimensional forms like books and electronic documents, children with less experience are not able to really feel the outside objects, through reading books. Instead, children only attain limited knowledge, and realize the world through characters and pictures on the paper which provide no more than a rough and blurry description (Sun, Wu, Fan, Dong, 2019). Therefore, we aim at facilitating the perception of information and improving the capacity of understanding by implementing a more virtual approach for children, especially applying augmented reality
Roles & Responsibilities
I was a member of the UX/UI Design team. My key contributions were in the area of interviewing, user researching, user journey mapping and creating mockups.
User Persona
Tools & Methods
The interface of the game and dashboard were designed with Adobe XD. We collaborated closely with the client who had extensive experience in childhood-education, and incorporated their expert knowledge as we iterated our way through mock-ups and prototypes to the final product.
Problem Statement
How might we expand the vocabulary of children through interactive play using image to word matching?
User Flow
This is a flowchart of the user's journey in exploring the application
Challenges & Scope
The biggest challenge faced was designing the sequence each stage of the game would be played. Although designing the games was not within the scope of the design team, we worked closely with the owner to develop an interface and experience that was aligned with learning processes. For example, implementing the space repetition process created boundaries in the way we looked to design the user experience.
Competitive Analysis
In the competitive landscape, emerging VR language learning platforms such as FluentWorlds and MondlyAR were evaluated. These applications encompass essential language learning functionalities, including mechanisms like spaced repetition. However, their implementations of AR/VR technologies are not fully leveraged, causing a potential gap in their offerings.
Despite having a foundational VR/AR presence, these platforms appear to lack the more advanced or innovative features that can truly unlock the transformative power of virtual and augmented reality for language learning. The current state suggests an untapped potential in the AR/VR language learning space, highlighting an opportunity for innovation and further development.
A/B Wireframe Testing
To create an A/B test for two versions of the wireframe, I followed a systematic approach while incorporating the Laws of UX to ensure the interfaces are best used by children. I began by designing two wireframe versions that prioritized principles such as visibility, feedback, and simplicity, keeping in mind a child-friendly interface. Throughout the testing process, I collected user feedback to evaluate which version performed better in terms of usability and engagement. This approach allowed me to make data-driven decisions to create interfaces that best suit the needs of children.
Wireframes
I also created the low-fi wireframes to help visualize what I need to do for the high-fi mockups
For younger users of language-learning applications it is preferred to have more cycles of repetition. We had designed two iterations of the vocabulary workflow and tested it on a small group of 10 children under the age of 8 over the span of 3 days. Therefore, we designed and implemented interactive elements like the 3D illustrations, animated graphics, animations, and product working videos to deliver an informative UX.
A style guide or manual of style is a set of standards for the writing . formatting , and design of documents
Bold
Black
Regular
Content Design
We want to create a motivating and non-addictive application. Similarly, we thought about using more UI instructions vs tutorials for the mini-game. The interactions only include clicking and moving around. We enlarged the fonts and AR objects so it’s easier for children to see while in motion. We also included more positive suggestions such as “Perfect!“, “Almost there, try again!“ to encourage the children. After the game, we would show a Game Summary and Game Stats.
Track the progress of your child with analytical data such as game completion rate, progress rate, number of achievements, and more.
Kid Profiles
Game Dashboard
Navigate to “My Games” from the drop down menu to view a list of achievements in the top box, and the selection of purchased games that can be played. It also shows all games available to start
Game Play
Kids can start playing the game, the app will show up the AR image and multiple choice questions. The screen also has a timer, level, and score
Parent Dashboard
The dashboard presents 4 important pieces of information: the existing games, kids’ information, and recently played games. New games can be added through the dashboard from the top right button.
To bring everything together, we created an Admin Interface that brings together all the core functions of Oteogo. Users accounts can managed, data analytics are laid out in a presentable fashion, and game settings can be managed with more granular detail. Our users are empowered with the data analytics as they gain crucial insights on the progress their children are making. Unique to this game is the settings for 3D Image Gallery, where the admin can upload new images and tag them with name.
Early stage team collaboration and clear communication is a vital key to minimize final design revisions. Time is your greatest ally, an early project roadmap and well-defined high-level goals will help the team move faster and fail faster. Testing with real users will teach you how to improve and sell the best needed version of your product.
