Math Done Write, a mobile app experience designed to help students practice and master grade school math via timed challenges, needed to create a visual language they could apply to rough wireframes. After basic discovery, however, it quickly became apparent that the initially proposed experience needed further depth in order to engage—and continue to hold—the attention of its intended users.
Overview
Math Done Write had built an experience to help children study grade school math via timed challenges— a prototype on an iPad, an idea with some code behind it. I was engaged to establish a visual style, but questioned whether or not the experience needed depth. The build allowed a user to create an account with a predefined avatar, and then practice math skills by answering basic problems based on grade, after which users could quiz themselves against a timer. Once successfully completing a timed quiz, users received a virtual "certificate" which was neither accessible via the UI nor carried much meaning.
My Role
Lead UI Designer for project, responsible for a pattern library/design system...but eventually contributed to revising the user experience in tandem with the developer/client.I was also integral in ideating a new achievement layer, wherein students could unlock new avatars and levels by successfully completing quizzes. I also introduced the notion of multiple users on a single device, and designed hi-fidelity comps to satisfy that need.
I was approached by the developer of Math Done Write to contribute visual design to his already existing tablet prototype. He had already designed a flow and the customer journey, in which grade school children could sign up for an account, choose a predefined avatar and then use a touch interaction to solve math problems, testing themselves at their grade level to then undertake a times quiz. Upon successful completion of the quiz, the student would receive a digital "certificate"...and that was it.
As a father of four kids raised on sports, apps and video games, I quickly noted that the experience seemed a bit thin. Thankfully, I had a built-in user base right at home. I walked my kids through the prototype, asking them about each step and watching as they interacted with the app. Then I did the same with their friends. I also asked them about the games they were currently playing, and about the educational apps they used at school.
Key insights included:
1. After trying the prototype, most kids insisted they would try it once, maybe twice and then move on.
2. It became clear that Math Done Write needed to offer a deeper sense of progression; a journey which presented the opportunity to not only better a student's skills, but rewarded them for their efforts.
• Validation for having successfully completed a test
• Reward or achievement for said completion, and;
• Encouragement or enticement to continue engaging.
3. Playing other mobile games in this age demographic, as well as watching my kids interact with learning tools such as Lexia Core5, IXL, Spelling City and games aimed at an 8-13 year old demographic (Subway Surfer, Disney Emoji Blitz), validated my hypothesis: each digital learning program or game provided a sense of progression and accomplishment via levels and/or lessons, tools that Math Done Write lacked.
4. The single-user aspect of Mathe Done Write failed families with multiple children but not with multiple devices. The ability to add multiple children on one device would be paramount to gaining broad use.
Timing was somewhat critical to the developer, so rather than craft a new set of app flows and customer journeys, I proposed revisions via hi-fidelity designs—combining the work in tandem with the UI/visual design—in order to create depth.
Key recommendations included:
1. The better a user did in their quizzes, the more awards they could obtain and in turn, the higher a level they might achieve.
2. In addition (math pun!), the experience would incorporate custom avatars that a user could unlock as they reached the higher levels, all triggered by the heart of the app functionality—the Learn/Quiz feature. The more awards achieved, the higher the level and the more unique/compelling avatars can be unlocked by which a user can better personalize their profile. This was inspired by popular video games, and apps like both Two Dots and Candy Crush (levels unlocked based on progression) now defunct turntable.fm, in which compelling avatars could be unlocked based on the popularity of a specific DJ.
Combining that with visual patterns geared towards a younger audience (bright colors, desirable avatars, rounded fonts) created a more compelling experience. Finally, I mapped a journey for multiple users sharing the app on a single device—for instance, charting separate progressions for my 7 and 5 year olds, both whom wanted to use the app on my iPhone.
Math Done Write released its initial offering via the App Store in May 2017. After viewing the product and testing it again with my initial, local focus group, I learned that while the progression was no compelling and contributed to increased engagement, the visual style was a bit dark for younger audiences.
I adjusted the design patterns to include a brighter color palette. As the developer has used different avatars than the ones I'd proposed and is ironing out the second user feature and avatar progression, I took it upon myself to prep a quick prototype to offer a sense of the overall flow and proposed interactions, as seen below.
As the app continues to evolve, and grade-school students the world over require an engaging, progressive mobile product to help brush up on math skills, Math Done Write is well-positioned to provide an attractive, compelling experience that will give them the tools to learn while also encouraging them to achieve and have fun.