Problem
When I was first tasked to redesign the student experience of TenMarks, the interface and design was very academic, sterile and uninspiring. Both students and teachers voiced concerns that it wasn’t very engaging and students had a hard time staying focused. The goal was to create an experience that gave students a sense of ownership through choice and progression while providing the proper feedback to motivate them.
Research
In order to gain a better understanding of the challenges and pain points facing our students and teachers I worked with my product managers and conducted extensive research in the form of interviews and observational studies. We interviewed 5 teachers and 26 students. We also observed students using the TenMarks product in their natural classroom setting.
Key Insights
■ Choice in work gives feeling of freedom and confidence
■ Appropriate support when making mistakes is important for learning
■ Like the feeling of completion
Using empathy maps, story share and clumping, we distilled patterns to form the following Personas:
Solutions
Based on the insights and personas derived from the research, we formulated hypotheses and design objectives that would help us focus our redesign efforts and guide our product roadmap.
■ Introduce Gamification to hook students in learning
■ Create an experience that kids felt was tailored to them
■ Give students a sense of choice, progress and completion
■ Provide relevant support at the appropriate times
Below are some of the early sketches where I conceptualized and fleshed out ideas based on these solutions.
Prototypes and Testing
After brainstorming and sketching a variety of solutions, I narrowed in on a few of the more promising ideas such as:
■ Introducing Gamification through points, positive reinforcement and rewards
■ Created a set of monsters to act as mascots and guide students throughout the process
■ Implemented a number line that allowed students to choose which questions they did first
■ Brought hints and videos to the forefront
I created wire frames to implement in InVision. A team including myself, my PM and a small group of developers were involved in testing the prototype in four different schools. Based on our observations and findings, I iterated and fine tuned the designs.
I created wire frames to implement in InVision. A team including myself, my PM and a small group of developers were involved in testing the prototype in four different schools. Based on our observations and findings, I iterated and fine tuned the designs.
Design & Production
In the final phase of the process, I created high-fidelity mockups, specs and documentation to hand off to developers. Along with the documentation, I worked alongside developers to create a living style guide from which they could pull relevant css, including typography, colors and other established design elements.
Conclusion
The redesign was launched during TenMarks’ Back-to-School launch of 2015. We were able to track the engagement of students through how many more assignments they started and completed compared to previous years. Another metric of success we established was how many videos and hints a student used during their time on TenMarks. In some instances, assignment completion doubled, especially for grades 3 and above. We also saw videos and hints usage increase by over 20%. Later that year, TenMarks was awarded the “2015 SIIA CODiE Award” for Best Mathematics Instructional Solution.
Finally we gauged the success of the redesign through customer feedback garnered by our Customer Service team. Some choice quotes from teachers in response to the redesign:
"After checking out the new updates, TenMarks is not only much more visibly appealing for both the teachers and the students, more user friendly. The updates will make it easier to navigate through the program. The instant feedback for students is a fabulous idea. Excellent idea!"
"It's like having a cheerleader for the kids while they're doing math"
"The second try makes it feel 'normal to make mistakes' in math"