About Engage
Our clients based in Michigan envision Engage as an engaging K-12 learning learning platform to help students close the achievement gap.
Team
3 UX designers and 1 product manager
Time
September, 2021 - December, 2021
Tool
Figma
Miro
Zoom
My Role
As a UX designer on the Engage project, I delved into the world of students and parents, conducting insightful interviews with 3 pairs. Armed with their feedback, I brainstormed and iterated on the design. To ensure its effectiveness, I put the platform through rigorous usability testing, refining it based on real user interactions. In addition, I devoted my efforts to crafting a more visually consistent and intuitive UI after the project ended.
PROBLEM & SOLUTION QUICK LOOK
An engaging platform. Become story-driven heroes.
Problem: Students Get Distracted Easily
Harper Woods, a suburban city near Detroit, has students struggling with focus and engagement in learning. Harper Woods Public Schools, serving 2,464 students from PK to grade 12, exhibits lower proficiency in math and reading. Students find learning unattractive and boring. The objective is to make learning more engaging and captivating for them.
Solution
Experience
Personalized
Learning
Gamified
Performance
Visualized
Tailored Learning Experience with Interests
The app provides a user-friendly onboarding process to generate personalized lessons based on students' interests and areas for improvement.
Be the Hero of a story: feel inspired and learn more
Looking for a break from math? Engage offers a unique opportunity to apply geometric knowledge in exciting missions that assist NBA star Kevin Durant. Students can gamify their learning experience while helping figures in these missions.
Track Progress and Celebrate Achievements Together
Engage provides visualized performance tracking for every lesson, allowing students to easily see their progress. Weekly reports are generated, highlighting areas for improvement. With just a single click, students can effortlessly share these reports with their families.
STAKEHOLDER'S EXPECTATIONS
Dig into clients' preferences.
Fill in the gaps with research.
Our clients approached us with a concept to help struggling students catch up in school. To better understand missing information and refine the design scope, we created a board listing known and unknown factors. This will ensure we meet their needs effectively and also narrow down the design scope.
As our clients were still in the process of seeking funds, they faced challenges in providing answers regarding technical constraints, the final product's appearance, and specific subject syllabus. To overcome this, we adjusted our approach and asked them about products in the market that they found inspiring or interesting. Subsequently, we conducted a competitive analysis to gather valuable insights.
Clients like products that...
By summarizing the preferences of our clients, we obtained a comprehensive design guide that offered detailed insights and directions for our project.
INTERVIEW STUDENTS AND PARENTS
Games excite students.
Lack of confidence hinders full engagement.
After aligning ourselves with our clients, we turned our focus towards middle school students as our target user groups. We conducted interviews with four student-parent pairs and two middle school teachers, inquiring about the students' most engaging learning experiences and their learning challenges.
Persona-Based Design
Using take-aways from stakeholder meetings and user interviews, we defined two main users based on their learning goals and styles.
According to pre-set product goal, helping students who are left behind, we focused on the persona Kevin in our later designs.
Then, we combined the persona with clients' and students' likes and dislikes to create final design principles.
BRAINSTORMING
Combine learning and gaming.
Use captiviating storylines.
With detailed design principles in mind, we started to brainstorm about possible gamification for our product. Each team member brought up one possible design solution.
Due to the lack of syllabus, we concentrated on buidling the product framework and left out the concrete learning content.
Reach a concensus on product concepts
Our team then voted for storytelling or features we liked in each design and combined those features into a new product idea. We decided to use a mission-based learning games where students receive help requests from historical figures and go back to help them solve problems.
Develop a user flow
After setting down on the game idea, we developed a whole user flow based on our initial sketches and features we want to keep, which includes 4 parts: the onboarding process, home, wishlist details (requests), and feedback.
TEST DESIGN IDEAS
Clients like the concept but...
To gather client feedback on our product idea, we swiftly created a visual layout for the stakeholder meeting. Fortunately, they were enthusiastic about the "I need your help" concept. However, they expressed a desire for additional personalization and a more polished homepage.
Design Iteration
Customize Onboarding
Upon revisiting the interview notes, we discovered that students exhibited great enthusiasm when discussing their after-school hobbies. This revelation has sparked our consideration of integrating interests with subjects.
More Gamification
To make the game more immersive and personalized, an avatar creation step was added to the onboarding process. Users can use their avatars during lessons to participate in sessions and complete tasks.
Homepage Redesign
In the previous design, the course lists and homepage were intertwined. However, in the redesign, we have utilized the homepage to showcase users' goals and progress. This allows students to conveniently resume their lessons and stay informed about upcoming activities.
Students' feedback: it's engaging!
We conducted usability testing with five middle school students, with our clients and their parents present. Using clickable high-fidelity prototypes, we obtained feedback on their product preferences, areas of confusion, and desired improvements.
INDIVIDUAL UPDATE
Make it beyond functions.
Unfortunately, due to time constraints, we were unable to iterate on the product as a whole team. However, there is still ample room for improvement based on the valuable feedback received from students during the usability tests. As a result, I have taken the initiative to work individually and enhance the product beyond its existing functionalities.
UI Style Guide
FINAL DESIGN WALKTHROUGH
Customized Learning Content
At Engage, we know that everyone's passion and learning progress is different!
To help students improve in the way they want, we use grade, interests and learning goals to orient the customized learning content that works best for them!
Feeling fatigued by math? How about leveraging your knowledge of geometric shapes to assist Kevin Durant in his NBA season preparation? At Engage, students have the opportunity to create their unique avatars and collaborate on enjoyable tasks alongside renowned personalities in their respective fields of interest.
FINAL DESIGN WALKTHROUGH
Become the Hero of the Story
FINAL DESIGN WALKTHROUGH
See Progress. Share Progress.
At Engage, we take pride in celebrating the progress made by our students and ensuring that it is visible to both children and parents. To facilitate targeted improvement based on individual preferences, we utilize grades, interests, and learning goals to guide the customization of learning content that best suits each student's needs.
SUCCESS METRICS
Students & educators like our product.
In March 2022, we received an encouraging email from our client, Adrienne, expressing their satisfaction with our products. It was truly gratifying to learn that both students and educators appreciate what we have to offer.
We also thought about if our product is launched,
the success would be...
MY LEARNING
Balance needs and desires.
Face uncertainty.
Balancing Immersion and Functionality
The incorporation of avatars and gamification elements demonstrated the potential to enhance user immersion and engagement. However, it is crucial to strike a balance between these immersive elements and the functionality required for effective learning.
Using fast iteration to deal with uncertainty
One important learning from this project is the value of embracing and effectively dealing with ambiguity. The fast iteration approach proved to be a powerful solution in navigating uncertain or unclear aspects of the project. By quickly creating and refining prototypes, gathering feedback, and making iterative improvements, the team was able to address ambiguities and enhance the product based on real user insights.
More Projects
Ooh, you have reached the end of the page.
But our creative journey doesn't have to end here. Let's take the next step together and create something truly captivating. Reach out and let's transform ideas into visual realities.