Tutor Lantern: An AR e-learning platform that makes learning easy-UX Case Study.
Tutor Lantern is designed for students in secondary school (or high school). The target of Tutor Lantern is to provide students with a platform to facilitate learning various school subjects.
The aim of this project is to create an augmented reality (AR) education app for high school students. The app will utilize the latest AR technology to bring subjects to life and provide a more engaging and interactive learning experience for students.
The app will be designed for use in both the classroom and at home, giving students the flexibility to continue their learning outside of the traditional classroom setting.
“I have been able to successfully learn the body anatomy in Biology”- Participants testing Tutor Lantern
Challenge
The problem with traditional methods of education is that they can often be dry and unengaging for students, leading to a lack of motivation and difficulty retaining information. This is particularly true for subjects that require hands-on learning or visualization, such as science, history, and geography. High school students, in particular, need to be actively engaged in the learning process to fully understand and retain the material.
To address this problem, an augmented reality (AR) education app is needed that can provide high school students with a more immersive and interactive learning experience. The app should be able to present complex subjects in an engaging and interactive way that appeals to the visual and hands-on learning preferences of high school students.
The challenge in developing this app is to create an AR experience that is both educational and entertaining, and to ensure that the AR elements are seamlessly integrated into the learning experience. Additionally, the app should be user-friendly and accessible, so that students of all levels of technical proficiency can use it without any difficulty.
Objectives
The objective of this app is to create a learning experience that is both fun and educational, allowing high school students to explore and interact with the subject matter in a way that is not possible with traditional teaching methods. The app should be able to provide students with a more in-depth and personalized understanding of the subjects they are studying, leading to improved knowledge retention and performance in school.
Project Scope
- 8 Weeks (80 Hours)
Tools
- Figma, Illustrator, Google Meet
Team
- Rebecca Adisa (UX Designer, UX Researcher, Design )
- Adebayo Chike (UI Designer)
- Abisola Okunola ( UI Designer)
Design Process
Empathize
Research
Research allowed us to understand the users better. We get to peek into their everyday lives to understand their goals, limitations, frustrations, abilities, and reasoning. This would help give us a sense of direction to create a solution.
First, we conducted some secondary research to get a better sense of the market and demographics. Next, we conducted interviews to learn about students’ learning experiences.
Our professional experience in analyzing market positioning, evaluating S.W.C.D.UX.O. (Strengths, Weaknesses, Content, Design, User Experience, and Opportunities), and competitor analysis helped form the foundation of the secondary research.
Research Goals
- To identify Tutor Lantern's demographics and target audience.
- To discover the goals, needs, motivations, and frustrations of Tutor Lantern’s users.
- To analyze the current market trends in the education industry.
- To identify the strengths and weaknesses of Tutor Lantern’s competitors.
- Learn about the current trends of AR and how it’s being used in businesses and education.
- To discover users’ experiences with similar apps.
Assumptions
- Students only read to pass and not to understand.
- Students are constantly looking for platforms to learn and share ideas with peers.
- Tutor Lantern’s users are the younger generation.
- Students are expecting a better experience when learning online than the traditional teaching method.
- Students learn better and have improved retention when using e-learning platforms.
- Students taught using AR technology have better learning experiences than those taught with the traditional teaching method.
Methodologies
- Primary research (User Interviews)
- Secondary Research (Market Research, Competitive Analysis)
Secondary Research
Market Research
It is vital that we consider doing market research first before proceeding to design any product. To better understand the demographics and market trends of the educational institution, we started with market research.
In our research, we conducted user interviews and analyzed previous literature reviews. Through our research of the market, we were able to gain a more comprehensive understanding of the industry and fill in the gaps in our knowledge to better inform future design decisions.
E-learning and Industry
- Overall: There is a steady proliferation of e-learning platforms. The government and private sectors are trying to undertake different initiative programs to support e-learning. (Academia)
- The online learning platform has seen a steady rise in the number of learners in the past few years and is slowly replacing the traditional method of learning.
- Since 2000, the digital learning industry has grown by 900% making it the fastest-growing market in the education industry by a large margin. (KPMG)
- During 2020, demand for online learning opportunities rose exponentially according to a study by global market insights.
- The massive open online course industry is expected to be worth $374 billion by 2026. (Global Newswire)
Demographics
- Overall: Students, particularly Gen-Z, sort for easier and more efficient learning processes.
- The demographics represent 30% of the total population.
- 81% of students reported that eLearning tools help them to improve their grades. (Statista)
- Student retention rates for eLearning courses are 35%-60%. (Statista)
Trends and Considerations
- AR/VR in the education sector is expected to increase from 9.3 billion USD in 2020 to 19.6 billion USD by 2024. (Statista)
- These technologies are expected to shape a seamless classroom experience.
- 78% of people believe that learning online will give them more access to quality education. (eLearning industry)
- 41% of students reported that their eLearning courses were better than their in-person classes.
- Over six million students are currently a part of online programs. (Statista)
Key Findings
Competitive Analysis
In addition to learning more about the industry, it is also crucial to look at enterprises that have pioneered the market for platforms related to education, as their solutions to similar problems will help us gather insights into their strengths and weaknesses. We wanted to take a closer look at Tutor Lantern’s competitors and how they’re helping students become better.
We identified some top direct and indirect competitors within the industry: Solar Walk Free, 3D Brain, and Human Anatomy Atlas. Exploring each of their apps, we evaluated the strengths and weaknesses of each to see how Tutor Lantern could fill in any gaps moving forward.
Primary Research
User Interview
In order to gain an understanding of user preferences, thoughts, and feelings while using e-learning platforms, we recruited participants to learn more about their experience with similar apps.
For the user interview process, we designed an interview guide with 10 open-ended questions asking participants to share their stories and experiences.
A total of 6 participants (3 females and 3 males) were interviewed about their experience with online learning and AR (if they had experienced it before).
“Learning science courses has always proved difficult because most of the time I don’t understand what I’m being taught”- Matthew
“I remember doing so well on my Biology examination last term because my teacher went the extra mile to explain with videos and pictures”- John
“Students better understand difficult subjects and pass their tests and exams if they are taught theoretically and practically. This was what helped my classmates and I in the last W.A.E.C examination”- Sandra
Assumptions validated
Empathy Map
After conducting a series of user interviews, we summarized our findings by creating an empathy map using sticky notes. In order to gain a deeper understanding of Tutor Lantern’s users and their needs, we identified common patterns across all our findings and turned them into key insights.
User Persona
After having gathered information about the target audience, including their goals and needs, we wanted to know who Tutor Latern’s users are. An in-depth understanding of a target audience is fundamental to creating exceptional products.
Creating personas helped us answer the essential question, “Who are we designing for?” It is crucial to understand target users' expectations, concerns, and motivations to design a product that will meet their needs.
Let’s meet Cindy Williams, a high school student. She is a straight-A student but finds some subjects difficult to comprehend. She loves to read and play games in her leisure time.
Storyboard
As a next step from personas, we created a storyboard to help plan and organize the sequence of events in a story. The user encounters a problem relating to preparing for external exams and uses technology to solve it.
A storyboard helps clients visualize the solution in the context of how it will be used by users. Consequently, we are able to brainstorm how technology can even be utilized, and how it may enhance or affect a person’s life.
Define
How Might We
Having gained an understanding of Tutor Lantern’s target user, Cindy, we wanted to focus on the problems she faces. With the insights and needs collected from the empathy map, we began to dig deep into Cindy’s problems by creating point-of-view (POV) statements and How Might We (HMW) questions to guide our brainstorming.
The result was a brainstorming process that would best help us understand what Cindy needs.
Product Goals
Following our brainstorming session, we generated different ideas for these problems. The next step was to develop a strategy that will help determine the solutions we needed to prioritize in order to meet our goals.
We started by defining the project goals to get a clear understanding of what we’re trying to achieve and where the business and user goals align.
Product Roadmap
Following our brainstorming, we created a comprehensive checklist of product features for the solutions we came up with. These features were sorted into four categories, including Must-have (P1), Nice-to-Have (P2), Surprising and Delightful (P3), and Can-come-later (P4) features. The items were sorted by how effectively they helped achieve business goals and user goals.
An effective product roadmap turns vision and strategy into actionable projects and tasks you can accomplish each day.
Site Map
After researching and deciding which features to include, we set out to draft the overall architecture of the application. Through application mapping, we discovered and identified interactions between application components and their underlying hardware infrastructures.
Ideate
Task Flow
While we had a clear idea of how the app would be structured, we wanted to understand how Cindy would interact with key screens and features.
Our first step was to identify what key tasks the user would need to complete in order to use Tutor Lantern to accomplish those goals.
After that, we developed specifications for the key screens we would need to design to help our users accomplish these tasks.
Finally, we utilized this information in order to understand how our users interact with the app using task flows.
With these task flows, we were able to visualize how our users would complete these key tasks—what screens they would interact with and what actions they would take.
User Flow
Taking a closer look at Cindy’s overall journey through the app, we wanted to better understand what she will encounter along the way. By empathizing with the different scenarios she may encounter, the different decisions she might make, and the various paths she might take, we were able to identify the key tasks she had to complete. To do this, we created a user flow to step into Cindy’s shoes.
Prototype
Lofi Wireframe Sketches
We sketched low-fidelity wireframes of Tutor Lantern’s screens using our understanding of the user, our goals, the architecture, and the user’s interaction with the app.
Mid Fidelity Wireframes
As we developed the visual direction for the layout, we crafted mid-fidelity wireframes by adding more details and precision. Prior to applying styles, we created mid-fidelity wireframes to determine visual consistency and hierarchy.
As we created these wireframes, we included design patterns that have been tested on competitors’ products or elements that directly address users’ needs, frustrations, and motivations.
Throughout the design process, we referred to the Human Interface Guidelines from Apple.
Mid Fidelity Prototype
Taking the wireframes, we then worked on creating a mid-fidelity, limited functionality prototype, using Figma, to use for usability testing.
Test
Usability Testing
It is important to set up test objectives, subjects, methodologies, tasks, and rubrics before conducting user testing. Following the Nielsen Norman Group checklist for planning usability studies, we wrote a usability testing plan to define why and what we wanted to test and get prepared for the test.
Considering all test tasks are typical steps for e-learning, we expected to see a 100% completion rate. Furthermore, we expected a 90% error-free rate since the prototype is not fully functional and users might take alternative routes for completing the tasks.
Conduct Usability Testing
For usability testing, we conducted a remote, moderated Think Aloud test over Zoom. The users were asked to share what they were doing, thinking, and feeling while interacting with the prototype and trying to complete the tasks given to them.
We tested around the key tasks we identified earlier in the process, asking the user to choose a class from the dropdown, browse through the available subjects, read through the subject resources, and then use the AR feature to view the diagrams in their room.
Overview
- Method: Remote, moderated usability testing (Think Aloud)
- Participants: 5
- Age range: Millennials
- Average Time: 4.4 minutes
- Task Completion Rate: 95%
- Error-Free Rate: 99.4%
Affinity Map
An affinity map is a representation of mapping your research insights to organized information. In order to synthesize our findings from testing, we created an affinity map from all our notes and observations.
Using a simple affinity diagram technique helped us discover embedded patterns (and sometimes break old patterns) of thinking by sorting and clustering language-based information into relationships. It can also give us a sense of where most information is focused.
As a result of observing prominent patterns related to users’ pain points, we were able to provide specific recommendations related to design:
Patterns
- 3/5 users had difficulty finding out how to navigate the AR screen (5/5 users successfully used the AR feature when presented with instructions.
- 5/5 users said they easily forgot their live classes and homework (3/5 users especially complained about the classes they’ve missed.
- 5/5 users said they would narrow options down more if they could see all the subjects at a glance(4/5 tried to view all the subjects for each class)
Insights
- Clear guides help people learn how to use new features.
- People want to be able to get both in-app and external notifications of upcoming events, classes, and tasks.
- People want to be able to focus their search, especially around what they are looking for.
Recommendations
- Add instructions on how to navigate the AR screen when viewing diagrams.
- Add a notification card on the homepage for top-priority events and tasks so that users don’t miss vital information.
- Add a “see all” button on the user's subjects so users can view their subjects all at once.
Priority Revisions
Taking what we learned from the affinity map, we began to make revisions to our design based on the recommendations identified.
- Add instructions on how to navigate the AR screen when viewing diagrams.
When users were using the AR feature, they were able to successfully go through the flow without issues when guides were provided, however, they struggled when trying to navigate the AR screen when viewing diagrams (where no guides were initially provided).
To help the user learn how to use this feature, we added another guide that informs the user how to edit the item.
- Add a notification card on the homepage for top-priority events and tasks so that users don’t miss vital information.
During testing, users struggled with keeping up with the activities on the app, such as assignments, tasks, and live classes. To help, we added a notification section at the top of the home screen (and push notifications). This way, they get reminded about all the forthcoming events.
- Add a “see all” button on the user's subjects so users can view their subjects all at once.
When searching for a specific subject, many users mentioned how they wanted to be able to narrow down their options. To help the user narrow down the options, we added a “See all” button for each of the class subjects.
This way, the subjects are clearly communicated to the user, and they can click the link to view all the topics under each subject to narrow down the options.
Color and Typeface
Final High-Fidelity Design
Taking what we learned from my affinity map, we began to make revisions to the design based on the recommendations identified.
Final Thoughts & Next Steps
The most significant advantage of augmented reality is that it creates unique digital experiences that blend the best of the digital and physical worlds. Also, it does not need any special hardware or software to savor the experience.
Mainstream smartphones and mobile apps are sufficient to experience augmented reality. Therefore, sectors, especially EdTech, should consider including AR in their experience.
Design Implementation
Following the validation of the design, the design would be handed off to developers or other stakeholders for development. As part of the handoff process, we redlined and organized our design deliverables using Zeplin, and prepared to assist with any questions that arise.
Maintenance
Continuing updates and revisions will continue to exist in the future, and we’ll address them based on priorities. We would observe how people are using it and work on updating priorities and adding new features to the app.
Thank you for taking your time and having a look at this, it means much to me!
Contact me:
You can contact me via email, LinkedIn, Instagram, or Twitter.
