top of page
SEAN MALONEY
Graphic Designer + UI Designer
MathWhiz
MathWhiz is an app that is aimed to make math learning more fun while suiting all ages and skill levels. By completing challenges, learning in your spell book, and leveling up over time, anyone can become a math wizard! Originally an older project of mine, I spent an entire summer rebranding and improving MathWhiz in Figma and Adobe Illustrator.
I started by coming up with various user personas of different backgrounds and reasons for using the app. To make a truly successful math learning experience, I wanted it to be for a diverse set of ages and previous experience in math: kids that need review on certain topics for an upcoming quiz, parents that are re-learning concepts while helping their kids with their homework, and people who simply want to learn something new and challenge themselves.
Once the personas were created, the next step was mapping user flows to illustrate how these different types of users would navigate through the app, beginning to brainstorm what types of screens or features the app should have. I color coated each user flow to correspond to the personas I developed earlier.
After this was finished, it was time to go into Figma and create a low-fidelity wireframe, mapping out each screen along with the positions of their components. This then continued to develop into a high-fidelity prototype including everything but the icons, illustrations, and color schemes. I also mapped the flow of the app (which screen leads to which) with red arrows.
I knew from the beginning of this project that I wanted MathWhiz to be fun, engaging, and welcoming in contrast to the traditional intimidation and mundaneness that math learning can come with. Using Adobe Illustrator and my knack for drawing, I created a library of 38 original illustrations that would become the face of this app. I came up with a central character, the Math Wizard, who makes his appearance through the app as he helps you learn lessons, solve challenges, and level-up to become a fellow Math Wizard. The dragon is a secondary character and companion who works together with the Math Wizard to make the app visually engaging and playful for all ages, but especially for the younger demographic.
MathWhiz is sprinkled with accessibility features. The preliminary questionnaire asks the user to select their language, age, and grade as well as enter their name and log-in information. Language selection allows accessibility for people from many non-English speaking backgrounds. Age and grade allows the app to determine what difficulty or variety of topics to have available depending on the year of schooling. Another component of accessibility is the audio feature in the camera scan and lesson sections for those that are visually impaired. In settings, the user can also increase or decrease the text size as well as manage sound effects and haptic feedback in the Preferences section.
_edited_edite.jpg)
_.jpg)
The Home page contains a fun fact that changes daily to keep the user engaged while having a break from the mostly arithmetic-based learning across the app. The Camera feature allows MathWhiz to live-scan any computer screen or worksheet and guide the user through a step-by-step solution with explanations. The Spell-Book contains the curriculum of lessons that are assigned based off of the preliminary questionnaire, however more specific topics can be selected. When a lesson is started, there is a progress bar in the top-right corner of the screen to track how far the user is in the lesson. The first half of the lesson is teaching-based and the second half is do-it-yourself where you input solutions.
MathWhiz Wordmark Logo
MathWhiz App Icon
bottom of page