Math Star
iOS Mobile Application and Responsive Website
Challenge
During the months of May through August, students get a summer break. Many students get back to class during Fall and will have to spend a month and a half relearning all the last’s year lessons. We were tasked to come up with a solution to create an engaging application for kids from grades 1 through 5 to help them retain their math skills.
Approach
With Math Star, we created a reward system for students, high engaging activities, numerous math levels, and the ability for parents to see the student’s progress. These tools helped Math Star’s experience feel like a game, rather than an annoying educational chore.
My Role
UX Designer and Lead Visual Designer
Participated in workshops, created information architecture, wireframing, prototyping, applied design, user testing, and collaborated with remote development team.
My Deliverables
Information Architecture, Interface Design, Personas, Usability Testing, User Research, User Flows, Design Systems, Prototyping, Visual Design, Wireframing, Brand Design, and Illustrations.
My Tools
Discovery
Myself and another designer met with an educational stakeholder. She was able to educate us about ways students learn and the recurring issue she experienced every fall after the summer break. During our first discussion, we were able to create a Lean UX Canvas.
We also did a few workshops to understand who the users were and to get a better idea of how she wanted her app’s visual look to be. To expand on the personas, we did empathy mapping to get a clear perspective on these individuals.
Experience
Math Star had two users, the student, and the parent. It took numerous iterations, but we were able to capture a great experience for both of these groups. We created a wireframe through Sketch and prototype with InVision.
Parent or Guardian
For the parent’s user flow we had to come up with a solution by showing value during the onboarding experience. As they provide the student’s information, we gave them the opportunity to play a demo made of math problems that reflect their kid’s grade level. This painted a better picture of the student’s experience and provided the app’s value to the parent.
First iteration of parent flow for demo.
Once the parent was done creating an account and adding student profiles, we provide the opportunity to purchase the grade levels. Each grade level has all the lessons, activities, and quizzes The parent could purchase the grade level of the student or an entire bundle of all 5 grades. Without the purchase of the grade levels, the student would not gain access to any of the lessons and games. Once the parent purchased the lessons, they would get an email with a summary of the student engagement. This weekly report card included the student’s progress, average score, and time spent on each lesson.
First iteration of parent flow for parent account.
Student
The student user flow was a lot more complex, and we were given a challenge to make this app feel like a game. The summer break is typically a time when a student wants to have fun and math is not a desirable subject. We collaborated with the stakeholder to establish that each lesson would take 15 minutes per day.
We created an interactive way to solve math problems. Each screen was made up of one math problem and would have a few answer options. If the student picked the correct answer, the next screen would have a celebration or a happy face acknowledging their success. If they picked the wrong one, they would get another opportunity to get the right answer.
First iteration of parent flow for demo.
At the very end of each lesson, they would get a summary screen with their results. They would also get a few awards that they can collect daily. This helped it feel more like a game and made students get back to the app each day.
User Testing
We were able to get our prototype in front of elementary school teachers and students. We gathered some great data and made changes to our flow. Overall, we got a great response from both groups.
As the lead visual designer, I wanted to gather a response from our subjects in regard to our visual approach before applying a concept to all the screens. There were 3 concepts for Math Star and each had a unique style. The app is composed of avatars, illustrations for backgrounds, award icons and vibrant colors. My approaches consisted of:
Option 1 — A space theme made of “Numericons”, or numeric astronauts. The backgrounds consisted of nebulae and planets.
Option 2 — A beach theme concept to reference the summer vibes. The avatars were made of funky student illustrations.
Option 3 — This concept focused on sun rays and the ocean. The avatars consisted of expressive sun emojis.
The teachers and students concluded that option 3 was more vibrant. Also, the sun avatars were funnier and appealing because their faces are more universal.
UI Implementation
The UI was made of vibrant colors, buttons, avatars, awards, forms, typography, and abacus symbols.
Students from grades 1-5 tend to have shorter attention span so our color palette needed were made of primary colors. The color palette is listed below:
Typeface
The font selected was approachable and friendly for families. The Nunito typeface fit both of those descriptions and was well received by both groups during user testing. The typeface can be found in the UI kit.
Final Thoughts
Math Star was the first app that I built from the ground up. It was a major challenge since I had to learn a new tool (Sketch) and I had to build an app in such a short time frame. Overall, I’m glad I took this challenge. I've gained experience that helped me grow as a UX and UI designer.
This app has been in the app store for a few years and it's done very well with students. In 2019, Math Star won Gold (Apps-Education) from Horizon Interactive Awards.
