Description

Mathconceptz is an interactive learning module that teaches math to elementary school students in a fun and exciting way.

Problem

Students need to learn at their own pace and require additional resources to learn math in a more visual way.

My Roles

UX designer
UI designer
User Research
Illustrator

Discovery

MathConceptz had a defined target audience and the goal was to get the math modules in the hands of students beginning the Fall 2019 school year.

Survey Key Results

5 public schools in New York City


10 teachers across all schools


40 students in each elementary school


3 groups: face to face instruction, MathConceptz only and face to face + MathConceptz.

Group 1 performed average

Group 2 performed slightly better

Group 3 performed significantly better

98% of students responded they would like to have a visually interactive module like MathConceptz accompany them in learning mathematics.

Brainstorming Flows

We designed the user experience to be intutitive enough that an elementary school student is able to quickly understand the flow and direct their focus on learning the math. We created user flows, performed A/B testing and iterated until we found the most intuitive user interface.

Designing

After establishing our user flow and conducting rigorous research it was time to move into designing MathConceptz lessons. We made sketches based on our research findings, user flows, and site maps.

User Interface Design

Our team decided that a light interface with ample illustrations would give the site a minimalist and inviting look and feel. Similar education technology content management systems inspired our decision to design a familiar layout.

Evoking Emotion Through Style

It was extremely important to us the MathConceptz application have a fun theme, so incorporating gradients into the design was something the team decided to tackle. Gradients can be a risky choice but with multiple iterations and many different gradients, alongside potential primary colors later, we eventually found the perfect pair. Our next step was to choose a typography that had a children illustration flare to it and we found that Comic Sans MS was the perfect fit since it looked fun and inviting.

Getting It Down On Paper

Now that we had a solid design direction, it was time to begin sketching and wireframing our ideas. Using my iPad I created multiple sketches with different versions, keeping in mind the user flows that we tested. After my sketch was complete, I ported my sketches into Figma and began wireframing my favorite ones. I am a huge believer in the iteration process which is why after multiple iterations, we had our finalized tested high fidelity wireframes!

High Fidelity Wireframes

Creating the high fidelity wireframes for the 8 lessons took the longest time but saved the most time overall for the team. And with that, our high fidelity wireframes were cohesive across all pages! Below is our high fidelity wireframes for MathConceptz.

Design Components

We designed the logo, avatar, buttons and each and every individual design asset to make the final product look like a digital children’s book.

Avatar Illustrations

This is the MathConceptz avatar, Jordan that I illustrated for the project with a closed loop feedback from the client! I started with drawing the Jordan illustration on paper then using a drawing pad to port it into Figma for the digital version and finally rendering it by shading and adding colors.

Final Design

Designing MathConceptz took team collaboration, creativity, empathy and above all else a lot of hard work, but the final result was nothing short of spectacular. My biggest takeaway from this project is the importance of user research and this realization genuinely excites me to help users solve their problem through design and software.