My product design process for a SaaS early education product.
Product: ABCmouse's Assessment Center
Goal: To develop a multi-platform companion product for parents to assess their child’s math and literacy skills and prescribe activities for where the child is less proficient.
Step 1: Empathize
Purpose: To gain an empathic understanding of the users and the problem you are trying to solve with your product.
In this example: We considered the needs of parents who are short on time and children who are short on attention span. The team conducted online parent surveys and in person interviews. Insights were: parents want to set their child up and have them play on their own and children respond well to rewards, ‘me’ and ‘my’ identification, and seek to express themselves.
Deliverables: Artifacts such as online survey results, market research, focus groups, interviews, and personas and point of view statements like: “As Abbey (child), I want to... so that I can...” or “As Abe (parent), I want to... so that I can...”
Our users.
Step 2: Define
Purpose: To synthesize a team consensus on what was learned from the first step to more succinctly define the core problem or design challenge.
In this example: We needed to support the parent’s objectives of easily assigning an assessment and clearly see a report of the child’s scores. We also needed to create an engaging child in-assessment experience. However, we needed to limit the visual design as not to distract from educational efficacy.
Deliverables: A few focused “How might we…” problem statements that will jumpstart the product design ideation phase. For example:
- How might we help a parent discover their child’s strengths and weaknesses?
- How might we motivate a child to complete an assessment for a skill or grade?
- How might we entice children to complete the prescribed learning activities?
What is the problem we are trying to solve?
Step3: Ideate
Purpose: To “go wide” on various ideas to address the “How might we…” problem statements. This phase is characterized by divergent thinking creating volume and a variety of options.
In this example: For parents, we considered a central dashboard to track their child’s progress, coding proficiency scores with traffic light colors. For motivating children to complete a 10-26 question assessment we explored character, colorful backgrounds, avatars, and animation.
Deliverables: Post-it notes of the team’s ideas and rough sketches of page layouts and user flows. Volume and variety is key.
Idea generation.
A sketch we later called the "heat seeking missile" user flow. It quickly identifies which skills need improvement and recommends the next assessment if proficient.
Step 4: Prototype
Purpose: To generate rapid cycles of divergent thinking and convergent thinking, to progressively innovate, circulate for user and stakeholder feedback, and then refine.
In this example: We identified key pages, creating inexpensive wireframes to investigate problem solutions, addressing the "How might we..." problem statements into prototypes to be shared with users and stakeholders. Iterative feedback rounds led to a comprehensive clickable high-fidelity prototype along with red-lines and functional spec documentation for developers.
Deliverables: Journey maps, user flows, wireframes, and ultimately a high-fidelity prototype that passes stakeholder approvals and user testing satisfactorily.
A more defined user-flow of the "heat seeking missile" concept.
Wireframe of the child-experience.
Avatar progress bar’s ‘start’, ‘in-progress’, and ‘end’ states.
Parent dashboard.
Child experience.
Step 5: Test
Purpose: To conduct iterative cycles of prototyping and user-testing. These iterations of “design, test, and repeat” help ensure that you are designing empathetically to find the best solutions to your problem statements.
In this example: Kid testers would often surprise us with either a complete lack of comprehension or with keen intuition to easily navigate complex UI patterns. Isolating user tests to focus on specific pain-points helped rule-out some solutions. With kids we tested the in-assessment experience. With parents we tested the dashboard experience.
Deliverables: Usability test findings and once live, data analytics. In user-testing one identifies pain-points and then applies affordances, clues of how a feature should be used.
Results: After successful user testing and the launch of the avatar progress bar and other UI/UX improvements, we happily saw an increase of assessment completion rates from 40% to 91% within a period of 6 months.
Kid testing. Photo: A. Golden
Step 6: Implement
Purpose: Refining or “gold-plating” the design. Animations are implemented. A comprehensive UI pattern library or product style guide is often created to ensure consistency and speed production of new content.
In this example: We devised IxD patterns and custom iconography for over 80 different templates for skills such as Place Value, Addition/Subtraction, Reading Comprehension, Telling Time, and Counting Money to name a few, ranging from preschool to 2nd grade.
Deliverables: Final icons, color palettes, type standards, final key art, UI pattern libraries, animations, and a product style guide.
UI pattern library.
Assessment Center subscription sales page.
Blending Agile with Design Thinking
In an Agile workflow environment the design thinking process can be executed in such a way that the design team isolates a very specific problem offering small improvements of shippable product. The time constraints of say a 2 week sprint focus the design process into additive improvements of isolated features. It is however sometimes necessary to have a design sprint prior to a development sprint.
