Designing DreamBox Math Interactive Lessons - Released Product
We needed to ship math content that addressed understanding fractions with unlike denominators. Unlike competitors providing digitized worksheets or "light" interactive learning modules, DreamBox lessons provide students with means to explore and understand mathematical concepts by interacting with "virtual manipulatives". DreamBox's teaching philosophy is to allow students to explore, experiment, and make mistakes in a "safe space" to help build conceptual understanding of mathematical concepts.
I took on the UIUX, Art Direction, and Visual Design tasks and collaborated with our Sr. UX Director, curriculum designer, and engineering to design the main interactions and user flows. I was also able to build on early UX prototypes that our Senior Artist had created when we first began collaborating on this project. Towards the end of the project, I was able to hand off the core UIUX design to another UX Designer for further refinement towards release, and our Artist created the necessary assets and animations. I also documented all designs and specs for the team to reference during development and QA testing.
Additionally, I designed the new Lesson Help feature during this project's development. You can view the project on Behance.
These "Unlike Fractions" lessons were released and are now part of DreamBox Learning's curriculum content.
Released Product
Sample footage of lesson play using the "Bar" model.
Sample footage of lesson play using the "Numberline" model.
Design Process
Whiteboards and Brainstorm Sessions
The curriculum designer, engineer, UX Director, Senior Artist, and I met for several sessions to go over the curriculum and brainstorm how we could translate the learning goals and vision into an interactive experience.
Wireframes
I then captured and organized ideas and outcomes that resonated with the group and translated them into wireframes and early clickables. At that time, XD, Sketch, Figma did not exist, and I collaborated with the Senior Artist in creating the clickables using Adobe Animate. For each of the models required for these lessons (bar model, equation model, numberline model), I covered all the various use-cases including localization, layouts when the on-screen keyboard is used, touch/tap targets for smaller screens, and various curriculum requirements to support maximum equation strings and an expandable history view within the lesson layout.
Prototyping Complex Interactions and Flows
The curriculum vision was to have the student interact with these components in a similar fashion to what would be taught in an actual classroom. We wanted students to be able build a numberline, drag/drop blocks based on money/time contexts and open values, view a history of problems solved to identify the mathematical pattern, and solve for equations. These interactions also needed to work within the broader lesson flow. Clickables built with Adobe Animate.
An example of the bar model interaction after several iterations.
An early version of numberline interaction.
A later iteration of the numberline interaction flow.
An iteration of the equation model interaction flow.
An iteration of the history feature.
Visual Design
Since these lessons were for fifth grade onwards, the visuals were based on the "age-agnostic" art direction and visual style (which I established and can be viewed on Behance). The goal is to have a clean and minimalist approach and for the visual language to support the interaction pattern.
