Technical Specs, Interaction Design
Project Overview
For many students, fraction is very hard to learn. It is a very abstract concept, and the numerator/denominator system is sometimes counter-intuitive. Many research has shown that a clear visual model represented by a numerical fraction is powerful in conveying the meaning (as opposed to only numerical fractions). Especially if there are tools that allow students to create visual representations of fractions step by step. Therefore, the goal of this project is to build a series of interactive tools (gadgets) that can be used inside different lessons to help users develop the meaning of fractions.
My Role
I was the lead designer of this project starting in July 2019. I worked alongside 2 product managers, 4 editors, 1 UX designer, 2 UI designers, 7 developers and 4 QA engineers. These fraction gadgets were launched alongside 44 grade 3-5 digital lessons in the Back to School 2020 season.
My major responsibility was to determine the functionality and variation of each gadget (interactive tool) and to define their similarities and differences from a technical and systematic perspective, so that we can find the most efficient way to develop them given the time and resources constraints. I was also the lead designer for interaction design.
Planning and Research
I first started by working closely with the instructional design team (math content experts) to define the pedagogical requirement of this project. At the same time, I worked with a team of developers to estimate the developmental effort needed, as well as the technical estimates we could deliver based on time and resource constraints.
Creating Assets and Development:
“Gadget” is specific terminology used inside the company to describe an interactive tool that contains a unique interaction pattern for certain pedagogical needs. For example, a multiple-choice tool can be a gadget (users select the correct card); an input box can be a tool (users enter words and numbers).
All the gadgets can live inside the current lesson Multi-Part Template (see image below). This allows us to use a component-based approach throughout different lessons, meaning that each interactive gadget can be either used stand-alone or combined with others, so that they fit a variety of pedagogical needs and instructional contents. At the same time, the efficiency of technical development can be significantly increased.
Constraints:
This project was kicked off in July 2019, we only had limited time and resources to finish all the gadget design and assets production so we could successfully launch all the fraction lessons within the fraction project in the Back-To-School season – Fall 2020. During the planning phase, I worked with the project manager to define the timeline and estimates for each phase. Based on the technical resources available, we could determine how many gadgets we could design and develop within the timeframe.
- Available team resources: 2 product managers, 4 editors, 2 UX designers, 2 UI designers,7 developers and 4 QA engineers
- From conceptualization, to design, development, QA testing and launch, we only had 18 sprints (9 months) to complete the project.
- We only had approximately 12 sprints ( 6 month) for actual development time (12 sprints × 7 developers = 84 sprints of time).
- Estimate time for different size of gadgets: Large (8-10 sprints): Medium (5-7 sprints): Small (2-4 sprints)
Pedagogical Requirements:
Through initial research, we divided the fraction content into four major content groups (understand fraction, compare fraction, add and subtract fraction, multiply and divide fractions). Each group contains a series of learning goals and a series of digital lessons that covers all the pedagogical needs.
Brainstorming Gadgets:
I worked with the editorial teams to go over the learning objectives of each lesson and create user stories so that we can understand the core interaction needed to teach certain fraction concepts. Based on the core interaction, we can decide whether we need a new gadget.
Below is an example of lessons from content group one: understand fractions. In the “potential gadget” column: green cells indicate that a new fraction gadget is needed to meet the pedagogical need of that lesson; white cells indicate that the pedagogical need can be achieved through generic gadgets such as multiple-choice, input box, etc.
Define Gadgets Based On Constraints:
Through initial brainstorming, we came up with a variety of gadgets. However, given the constraints, we needed to give up on some gadgets. Note that we only have 12 sprints × 7 developers = 84 sprints of time, and here is the gadget estimates based on sizes: Large (8+ sprints), Medium (6 sprints), Small (4 sprints).
Here are the final gadgets we decided:
Large (8-10 sprints):Area Model, Number Line
Medium (5-7 sprints): Length Model, Iterate Model, Multiplication Model, Equivalent Model, Generic: Sorting, Generic: Matching-Array, Generic: Matching-2Column
Small (2-4 sprints): Sub-Partition Model, Subtraction Model, Generic: Input Box, Generic: Multiple Choice, Generic: Table
Fraction Gadgets
Fraction gadgets are used to teach students the core pedagogy of different fraction concepts, such as understanding the meaning of fractions, how to compare fractions, how to add and subtract fractions, and how to multiply and divide fractions. My responsibility was to determine the functionality and variation of each gadget (interactive tool). I was also responsible for the interaction design of these gadgets.
Area Model
The Area Model gadget allows students to make models of fractions by partitioning shapes horizontally and/or vertically and shading the resulting part. Models can load already partitioned, student-only shades; or student-only partitions; or both open at the same time. There are 6 layouts variations (Square 1, 2, 3 and Rectangle 1, 2, 3)
Example Screen Layouts: https://xd.adobe.com/view/3e58798e-fecd-4676-502a-800213c71231-4869/
In addition to the interaction design, I created a technical user-flow diagram to specific possible user behaviors and associated conditions & outcomes. Also, in order to make this gadget fits different pedagogical content and fraction values, variations of authorization options were defined and specified.
Length Model
Length model gadget allows students to make models of fractions by partitioning shapes vertically and shading the resulting part, length model contains multiple units. Models can load already partitioned, student-only shades; or student-only partitions; or both open at the same time.
Number Line
Number line gadget allows a student to partition a number line and plot 1-2 points on that number line. The gadget can also be used just to plot points, given a partitioned number line. Partitioning and plotting can be done simultaneously, or one at a time.
Equivalent Model
This gadget has students make an equivalent fraction, or a set of equivalent fractions with a common denominator.
Subtraction Model
This gadget provides students an opportunity to subtract pieces from fraction models, either requiring regrouping or not.
Multiplication Model
This gadget allows students to model a multiplication problem involving two proper fractions, a/b x c/d, and visual the product as an area.
Iterative Model
Students iterate over a starting fraction with the aid of a number line until they have reached the desired ending fraction.
Sub-Partition Model
In this gadget, students start with a shaded model, partition the shaded part into subpartitions, and shade a certain amount of those subpartitions.
Combinations
In order to further increase development efficiency, I analyzed the core interaction and similarity of the fraction gadgets, so they can be mixed and used together to meet certain pedagogical needs, instead of creating a completely new gadget.
Area + Equivalent + Multiply Gadget
Length + Subpartition Gadget
UI and Animation
After establishing the UX and interaction pattern of the gadgets, I collaborated with UI designers to determine the color, pattern and animation. We came up with an accessible color palette so that all models are accessible against the background color. In addition, we added different patterns to different colors, so that colors are accessible against each other.
Generic Gadgets
As mentioned before, we use a component-based approach to build lessons to move towards a modular experience. Each gadget is a dynamic component and it can be combined with other gadgets, they all live inside a template (MP-T3). The template can hold many gadgets. These generic gadgets support the main fraction gadgets and provide flexibility to teach a variety of mathematical content.
Matching-2 Column
Matching-Array
Sorting
Multiple Choice
Programatic and Image Assets
In addition to increasing the efficiency of gadget development, I worked with developers to explore how to increase the efficiency of assets creation so that we can save designers’ time as well, and allow us to easily modify assets without going back to the design software.
PAX (Programatic Assets)
In order to increase production efficiency, especially to save time for UI designers to create image assets, we created a system of PAX (Programmatic Assets). They are used as a drop-in replacement for an image asset. They are usable when we have a quantity of static assets that all follow the same template. Also, they are able to have callable mechanisms to change the visual appearance of the asset.
Image Assets
In order to contextualize the fraction problem and make the lessons fun, I worked with UI designers to design a series of illustrative assets that can be used inside MP-T3 template and in adjunction with other gadgets.
Putting Them All Together: How does a typical lesson look like?
NO.5.7600: Multiply a Fraction by a Fraction
Learning Goal: Interpret the product (a/b) × q as a parts of a partition of q into b equal parts; equivalently, as the result of a sequence of operations a × q ÷ b. For example, use a visual fraction model to show (2/3) × 4 = 8/3, and create a story context for this equation. Do the same with (2/3) × (4/5) = 8/15. (In general, (a/b) × (c/d) = (ac)/(bd).
Results & Summary
In sum, we have created 8 main fraction gadgets, 6 generic gadgets. They were used in creating 44 grade 3-5 digital lessons that teach students fraction math problems for the Back to School 2020 season.
Through performance data gathered from Aug. 1, 2020 – Feb. 14, 2021, there are 72% of lessons that have a 90%-100% pass rate, 16% of lessons have a 80%-89% pass rate, and 12% of lessons have less than 80% pass rate. This makes our fraction product the most effective fraction product among our competitors in the K-8 education in the U.S market.