Gamifying the Student Journey of LQ Learners
Problem statement
Design a gamified student’s learning journey with LQ Live that would include past and upcoming sessions summary and a strong value proportional student performance report for parents and students
Final Design Preview
If you are in a rush, I have recorded video of the prototype. Check it out! 👇
Explore
To gain insist and inspiration I went across multiple Ed-tech platforms and even attended multiple free trial classes to get more understanding of end-to-end flows
Listing a few down below-
- Whitehat
- Campk12
- Mastree
- Topper
This helped me understand and compare the common page-level navigation and some general components
Key Highlights 👇
For me, it was a fun learning process to check multiple platforms I liked how thoughtful and detailed the platforms were but a few things I found common and can be improved were
- They were following a structured vertical or horizontal listing view for their upcoming and past sessions which is even fine in some cases but can be disturbed with care
- Most of them were not journey-focused as to when and how the student started his journey with the product
- Most of them were content-focused rather than journey-focused
Pen and paper time!
After going through multiple inspirations and tweaking their design I started zoning multiple elements across the screen according to our needs and goals to get a quick idea of how might the entire environment look like
Initials Challenges!
Being a new product the ideas and product requirements were constantly changing and evolving and with that in mind I planned to move with mid-level wireframes and started placing different content on the screen to get a basic idea of how the entire product flow would be and improve the UI along the process
Concepts Brainstorming 🧠
Note: The typography, images, icons, and illustrations are not final in the below concepts they are just to set the direction and have been picked from open source with an objective to close the overall architecture first.
Concept I
Since the majority of the flows and goals were around sessions I started breaking down and segregating the types of session details based on the user requirements
Note: Like always the PRD were also in progress/constantly changing and to get the overall product goals and requirements on track as a first step I intentionally picked performance elements Items like Avatarz, Gifts, star, rocket, etc) from the community to save time in this step and decided to design them accordingly in the next steps.
Concept II
The majority of the goals were around session, rewards, and performance a quick variation with the tab bar page-level navigation were added with the intention of making the entire screen cleaner and organized by reducing information density
Concept III
Concept IV
Following the idea of using thread as a journey/track, I tried to quickly experiment and prototype on Figma a moving element along the journey with the intention to show the progress and current state of the user
Concept V
Making learning fun and Engaging
Since generally kids are found more engaging and motivated in games I even went across games like Angry Birds, Subway Surfers, etc, and some animated movies as well for references to learn and incorporate elements that can help us elevate the kid's motivation and engagement with the platform and make learning more fun engaging
Concept VI
Concept VII
A dedicated section for the session and student performance with light and dark mode
Why different colours?
Since the branding(colour, fonts, etc) was also in progress along with the project. I tried incorporating multiple colour variations on the actual screen simultaneously over all the interactions to check whether the colours were aligned with the product tone and vision or not.
Final Layout
After multiple iterations and discussions, we decided to move forward with this style with the idea of having 2 strong core sections on-screen ie journey and student performance
Final Student Journey
After iterating multiple sets of ideations and concepts it didn’t just help me to get the visual direction to move forward but eventually, It also helped me list down the required content across the screen.
Highly engaging and interactive journey for students which includes two major components
1) Upcoming sessions/Ongoing sessions
2) Past Sessions
There were three different colour variations that were used to differentiate and denote three different card states where the upcoming session card was made slightly more prominent in comparison with the other two since it was expected to be the major action and goal on the screen.
Detailed Session Summary
Includes
- Performance in that individual session: Coins, rank, stickers, and total Stars out of 5
- Homework: Three major use cases were homework Not Started, In Progress, and Completed(remaining stars earned/not earned).
- Activities: Includes the total no of activities done during the live session and their summary
What is an activity? Click down below to learn more
Prototype
Click here to view the prototype
Student Performance
Being an Ed.tec platform performance was one of the core to creating trust and value with parents as well as for the student to show how we as a platform are helping him learn better with that in mind the performance was distributed and made with the collection of following items
Top-level Performance
Proficiency Score
PS would be one of the top-level scores for students which would be calculated based on the total no of stars that the student where total stars would be 5 which would also be linked with different competency levels like beginner, intermediate, advanced, etc
Rewards Items
Items like Coins, stars, stickers, badges, etc would come under rewards which would be given by the teacher during the session and can also be earned post-session by solving homework.
Leaderboard
A strong gamified component to show student rank across LQ students and groups. The intent of including only 5 students upfront on the leaderboard was because the live session also included 5 students per session and we wanted it to be more precise and also at the same time elevate the importance of the first 5 ranks
View Detailed Report
The entire report was divided into 2 core sections Progress and Skills
- Progress
2. Skills
Leaderboard
The leaderboard was segregated into two major sections Global(Students across platforms)and Your group(Students participated during the live session)
A Journey Before Enrolling
“You wouldn’t purchase a car without test-driving it, and you wouldn’t buy a house without seeing it first.”
Would you? Same as we assumed a free trial would be a great initiative for us To create more value and trust in our platform we kept the trial class free so that parents could see how the entire ecosystem works and at the same time experience what their child would get to learn during a lesson.
In the case of the trial class, we made the journey more compact and limited to paid users only
The majority of use cases were
- Trial Not booked
- Booked
- Session started
- Completed
- Absent/Missed
To Conclude
Challenges I face 🏋️
- Moving forward we added and experimented with multiple items like (Attendance, Homework, PTM, etc) but due to the small size of the cards, It became difficult to add and prioritize content.
- Since the branding was also in progress while working on this I had to experiment with multiple styles, colors, and themes at the same time.
Things I would like to add/improve
- Information architecture could have been done in a better way in the initial phase to reduce unnecessary iterations.
- A few more screen previews here for the Session detail overlay if I have more time.
- Measured APIs (Homework completion, session joined, etc) post-development to learn how engaging the home journey is and how to make it better.
Aaandd, that’s a wrap!
Thank you for reading my case study till the end. I hope you found it informative and helpful, would love to hear your thoughts or feedback on the same!
If you have any feedback or questions, please do not hesitate to reach out to me on LinkedIn or Twitter.
Click here to view the product and experience the design in real⚡️
Let’s Connect 👋🏻
I am always looking for new opportunities to collaborate with talented people. I would be happy to discuss how we can work together on a Discovery Call if you have a project in mind.
I look forward to hearing from you.
Good day 🌤️
PS: If you long hold the clap button, you can give up to 50 claps on Medium
