Wireframing Toolkit
Using a design systems approach to streamline the ideation process across siloed teams.
Company
Age of Learning
Product
My Math Academy
Role
Senior Experience Designer & Thoughtful Colleague
Skills
design systems, UX/UI design, Figma component libraries
Tools
Figma & Miro
Part of designing educational games for My Math Academy includes translating complex learning objectives and performance indicators into contextualized games for kids. Our cross-functional teams will design the basic gameplay, narratives, and activity flow around a math topic, which are then proposed to senior curriculum leadership for approval before proceeding into game development.
TLDR
Our larger product team is comprised of smaller, cross-functional teams, each of which work on designing and developing My teammates and I were able to streamline the approval process and drive efficiency in the pre-production stage by establishing a universal design language amongst teams and a library of components for reuse.
Our teams experienced friction when communicating their designs to stakeholders for approvals. Our stakeholders had trouble understanding the different styles of mockups that were presented by different teams.
Introduction
Project Context
This project came to fruition at a time when our product was gaining traction in schools and teachers and students could not get enough of My Math Academy. It resulted in one thing being our top priority: generate as much games as possible, and fast. With our ambitious goal of some 400 performance indicators to turn into games by the next school year, our team made a lot of changes to support this goal - switching to a scalable, templated development framework and reorganizing into smaller cross-functional teams that would focus on nimbly pumping out content.
With the new teams, fast
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Key pain points we discovered
Inconsistencies in design approach:
Friction in communication: Different siloed teams, meant different designers with different styles of expression. Our stakeholders had trouble navigating the different styles of mockups presented by different teams.
Feedback on unnecessary elements: Although contextualizing math concepts is a important part of our pedagogy, sometimes themed elements of an activity would get in the way of properly assessing the design of game mechanics.
Execution
Paragraph heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragraph heading
Approach - cover the interaction patterns most commonly used in our games, make it tappable vs draggable/prompts vs answers elements easily distinguishable. Create assets at the minimum usable size so that they could always be scaled up. Create an organizational chart with components and autolayout so that activity flows charts can be
Iterations - first made components in miro, since thats where GD and curr will ideate - once tested and it felt like a good process I was tasked with iterating and improving the tool kit and moving it to figma libraries so that we can achieve better management as we evolve and allow it for use in lo-fi prototyping as well.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paragraph heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Outcomes & Next Steps
Outcomes
Overall - a much shortened pre-production process:
Stakeholders were more easily able to view a wireframe and understand the intended design - we cut down time spent in meetings as discussions were more effective and decisions were made more quickly.
Easier hand-off to art and dev teams, and unified source of truth for all members of product team for game design documentation
More time for UX designers to focus work on global asset library implementation and new interaction patterns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Team Credits
Tammy Gray - Experience Designer
Jeff Short - Game Designer
Alexei Othenin-Girard