Ricky Yu | K5 Volume Component

K5 Volume

Component

My Summer Internship

UX Design

Responsive Design

Educational Technology

05/2018 - 08/2018

 

 

Overview

 

Last summer, I had an internship at an educational technology company called K12. Our mission was to create an online schooling experience as an alternative to the traditional brick-and-mortar style public school. Our users were the homeschool families. I was very lucky to join their user experience design team to work on several interesting projects.

One of my major tasks there was to design an interactive manipulative to teach K-5 kids about the geometric concept of volume. On this page, I'll talk about my design iterations and how I finally made it.

I also had some other projects during the internship:

1. I helped the design team build a design system, you can read more details here.

2. I created age-appropriate visual assets for their lesson opener, you can view them here.

 

Approach

 

I started by translating the research insights and product requirements to my design ideation. Then I mocked up my ideas, communicated with the scrum team and tested with potential users. I got exposed to agile methodology during the process. It was a iterative process with several rounds of tweaks and fixes. Then I got the approval from each stakeholder. I can finally hand it to the visual design phase.

Users
Research
Understand research insights & product requirement
 
Agile
Design iterations
Wireframe
 
Product owner
Developer
Visual Design
Design system
CSS specs
 
UX
mentor
Instructional designer
 
Requirement Analysis

Problem Space

 

Volume is an abstract concept. It might be hard for children to understand without a visual reference. Some interactive toolkits might help them understand.

 

Our traditional way of learning this is to use jars, containers or blocks to give kids a tangible sense of volume. Furthermore, the textbook will usually use an illustration of a rectangular prism containing several blocks of one cubic unit to teach how to count the volume.

 

 

An illustration used to teach how to count the volume

 

 

So how do we recreate this learning experience in an online homeschool environment? How do we creat a virtual prism to help kids with learning volume? How can we utilize the interactivity of computational media to make this experience interactive? How can we create an active learning experience with our design?

 

 

Understanding Our Users

 

Our users are the 3-5 graders. We were designing for K5 online school. Based on the research conducted by K12, the kids of this age have the following characteristics:

Cognitive

  • Are able to think logically about concrete things;

  • Difficulty understanding abstract thought;

  • Starting to understand symbols and representations, reversibility, and inductive logic.

 

Physiological

  • Static visual acuity (ability to see small, static details) is still developing;

  • Figure ground perception is improving;

  • Fine motor skills in tapping, aiming, reaching consistency are not to adult levels until age 10.

 

Technology

  • Students are first learning how to use the website at a very young age;

  • ​Sometimes, they might need help from adults;

  • ​Children who play computers is more experientially driven. They are more into quick entertainment.

 

 

In this way, the design for this age group should meet the following requirements:

 

1. Simple to navigate;

2. Easy to manipulate (big buttons, immediate feedback, and clear visual affordance);

3. More symbols instead of pure text with abstract concepts;

4. Fun & engaging.

Parents or legal guardians (we call them "learning coach") are also our users because they will provide assistance to their kids. But there is something about them that we should notice:

Distracted

  • Learning coaches might need to work while taking care of the children;

  • Learning coaches might have several kids to take care at the same time;

 

So, our design should also give the kids' autonomy, allowing them to use without learning coach's help.

 

 

Understanding the Scenario

 

Our use case is in the homeschool scenario.

What does a typical day look like for a K-5 student?

​​Schedule

  • 8AM - 3PM;

  • Lunch & play breaks determined by LC;

  • Special needs or students in treatment will have more dynamic schedule.

Study Context

  • Typically a school desk, table, or counter either in a dedicated room or a central room like a kitchen;

  • Often ergonomically incorrect;

  • When a learning coach notices their student needs a change in focus, they will let their child move around the house;

  • Children in treatment need to anticipate studying in treatment rooms or a temporary apartment.

 

For the technology involved, some computers the users have are pretty old. Mobile devices, like phones and iPads, could be used when they need to move around the house or as a complementary screen to the computer.

 

In this way, responsive design is very important. The component I would design should fit in different sizes of the screen.

 

 

Understanding Educational Instructions

 

Our instructional designers claimed that this interactive component can be used in the following ways:

 

1. Lesson introduction: at the beginning of the lesson, it could make kids first exposed to this concept and explore on their own;

2. Assessment tool: it could be used in or after the lesson as an assessment to ask kids either to find the volume based on the length, width, and height or to build a prism of a certain volume.

 

So, it should be able to be placed along the lesson materials. The assessment section should automatically generate appropriate questions and provide feedback.

 

Our product requirement states the volume component should include three different modes:

 

1. Explore mode: a free-play mode that allows kids to explore and play without requirements;

2. Find mode: an assessment mode that asks kids to find the volume of a prism with known length, width, and height. It should have interactive features to help kids find the correct answers.

3. Build mode: an assessment mode that asks kids to build a prism of a certain volume. It should have interactive features to help kids find the correct answers.

 

 

Understanding Technical Constraints

 

The thing I was going to design was not an app or website but an interactive component in a lesson container. And it could be used in various layouts to fit in the course contents. Some examples are shown here:

 

The smallest size of the component is 355 × 375px and the biggest size is 1200 × 480 px. That's the range which this component should be responsive within.

 

 

Other Features

 

My design will focus on the interface and flow of the three modes mentioned above, explore, find and build. Moreover, the product owner also wants to add two toggles, X-ray and expand, available in each mode to help kids. 

1. Expand toggle will allow users to disassemble the prism into several panes to help with counting the blocks.

2. The X-ray toggle will allow users to see the prism in semi-transparency to help with identifying its inner structure and counting the blocks.

 
Responsive Layout Iterations

After fully understanding the requirements, I started to sketch out my design ideas. I decided to divide the three modes into three different tabs. And I'll use sliders to give users control on the length, width, and height of a rectangular prism. They can use sliders to change how many blocks in each dimension. 

I designed the basic structure of the component with three sections:

1. Mode switch: a top bar to switch modes;

2. View Zone: the main zone containing the rectangular prism;

3. Control panel: a side panel where users can control the prism or do the assessment.

Version 1.0: Inconsistency between Desktop and Mobile Views

My first version of the Explore Mode looks like this:

Switch the modes here

Change the sliders to change the length, width and height of the prism

"Expand" toggle to expand the prism to several panes

"X-ray" toggle to view the prism in transparency

This looks fine in the desktop view. But does it still work in the mobile view?

The mode switch simplified into a hamburger menu

Two toggles simplified as icons

Here are the layout of Find Mode and Build Mode:

 

(in this section, we mainly focus on Explore Mode, we'll talk about the interaction flow of Find Mode and Build Mode in next section)

Find Mode: the control panel changes to a prompt, a user input and a "Check" button

Build Mode: the control panel changes to a prompt, sliders and a "Check" button

After a team review, I found out the problems of this design:

 

1. The mobile view and desktop view is inconsistent in control and design patterns;

2. Too many icons at the top in the mobile, which might cause cognitive difficulty for kids;

3. No labels for the two toggles in mobile view. Kids might not be able to understand.

I realized the reason why this problem happened was that I designed the layout of desktop view first then I designed the layout of mobile view. These two were separate and didn't have a connection. 

Version 2.0: Let's Do Mobile First

I was advised to apply mobile-first methodology to do the responsive design. So, my second version started with the mobile view. After I managed to fit everything in that small area, I stretched to the desktop view to make sure everything is consistent.

Deleted hamburger menu

Adopted tabs in mobile view

Added label to the icons

Lay the icons vertically to save real estate

Expand the mobile view into desktop view

It looks very well this time! But there are still some issues:

1. Icons took too much real estate in mobile view

The icons laid vertically may intersect with the control panel when there are so much stuff in the control panel.

In the Explore Mode, the icons and control panel almost intersect

In the Build Mode, I needed to add a prompt and a "check" button in the control panel.  (Details of designing for Build Mode will be in the next section)

 

This made the panel gets vertically larger. It intersects the icons in this way

2. Icons too close to the control panel in desktop view

The icons in desktop view is just right beside the control panel. The control panel is the major zone that users take actions. But the toggles are also something they can play with. It looks like a clutter to put all of those action buttons together, which makes it too busy.

It's an imbalance to put all of the interaction on the right

Version 3.0: Almost There

After talking with my scrum team, we thought the "help" icon I had in my design was not necessary in this component. We needed to make the design intuitive enough to get rid of the "help" icon. So, I deleted the "help" icon. In this way, it saves enough real estate for Build Mode's larger control panel.

On the other hand, I moved the icons to the left side of the component to avoid the clutter in the desktop mode.

What's more, one people on my scrum team pointed that I needed to add marks to the sliders so that it would be easier for kids to manipulate and understand.

Explore Mode

Find Mode

Build Mode

Responsive Reflow

Version 4.0: Visual Design

My mentor finished the visual design after I left. In the final version, they decided to get rid of the mode switch bars since the product owner decided not to let three modes available at the same time. Moreover, they fold two toggles into a new "layer" icon to further save real estate. They also put the control panel at the bottom in the Explore Mode in order to give kids a larger sliders to manipulate.

Mobile view

Desktop view

 
Interaction Flow

Find Mode and Build Mode are the assessment mode. It gives users a prompt then the users need to find the answer to the question. In this process, the correct feedback is very essential to help kids know their current status. I'll mainly talk about the iterations of the interaction flow in these two modes in this section.

Version 1.0: Tooltips?

In my first version, I used tooltips to give kids feedback about their answer. When they input an answer, they clicked "Check", a tooltip will pop up and tell them if their answer is correct.

Flow of Find Mode

View zone gives kids a visual reference

A prompt with known length, width and height

An input and a "Check" button to assess answers (It's disabled until an number has been input)

Wrong answer

Correct answer

Input becomes disabled

"Check" button turns to "Next" button

Users can click it to go to the next prompt

If they're wrong for the second time, "Check" button will turn to "Show" button

Users can click "Show" button to view the right answer

An example of how tooltip looks in desktop view

Flow of Build Mode

View zone gives kids a visual reference

A prompt with known volume

Sliders to build a volume and a "Check" button to assess answers

Wrong answer

Correct answer

Sliders become disabled

"Check" button turns to "Next" button

Users can click it to go to the next prompt

An example of how tooltip looks in desktop view

Problems

The problems of this design is very obvious: 

 

  • Failed to clearly convey the current status. It has three different statuses in these two modes, "correct answer", "incorrect answer", and "show me the correct answer". But the tooltips i designed can only differentiate them by text. It's not straightforward and not age-appropriate. Sometimes, users may get lost and don't know what is going on.

  • Tooltip is usually used for explanation in K12 design pattern. It's not the most suitable pattern for giving feedback.

  • Users didn't know how to proceed after making the mistake for the first time. When they got the tooltip telling them their answer was not right, I assumed they would directly go to input a new answer to retry. However, in reality, when the tooltip popped up, most of the users was lost and didn't what they should do next.

In order to solve these problems, I needed to redesign the whole flow and figure out a new pattern to show the three different statuses.

Version 2.0: Red, Green and Yellow

I referred to some existing components, I figured out they have used different colors to indicate different statuses. Considering accessibility design, I should also incorporate other elements to inform statuses other than just colors.

Flow of Find Mode

Added units

Wrong answer

Correct answer

SFX:

"DING! Correct!"

SFX:

"GLONK! Please try again!"

Red color and an 'X" to indicate incorrect answer

Green color and a check to indicate correct answer

"Check" button turns to "Next" button

Users can click it to go to the next prompt

"Try Again" button gives user a clear indication of what they should do next

 

It will clear the input box and allow users to re-answer

If they're wrong for the second time, "Check" button will turn to "Show Me" button

Users can click "Show Me" button to view the right answer

SFX:

"GLONK!"

Yellow color, blue dashed line, and a check to indicate "Show Me" status

Three different feedback patterns in desktop view

Flow of Build Mode

Wrong answer

Sliders become disabled

Labels with current volume and feedback pattern pop up

SFX:

"GLONK! Please try again!"

Correct answer

Sliders become disabled

SFX:

"DING! Correct!"

"Try Again" button gives user a clear indication of what they should do next

 

It will reset the sliders and allow users to re-answer

"Check" button turns to "Next" button

Users can click it to go to the next prompt

Three different feedback patterns in desktop view

Finally, this new design works well and gets approved by the team and sent to the visual design phase.

Visual Design

Find Mode in mobile view

Find Mode in desktop view

Build Mode in mobile view

Build Mode in desktop view

 
Bonus

I want to shout out to every people I have met at K12. Everybody was so friendly and gave me lots of help. And I learned so much about how to play a team role, how to do the presentation, and how to talk to people with different backgrounds.

Thanks so much for making it so far! I know this is a very long case study and pretty technical without many fun stories to tell. But there's an easter egg at the bottom!!!

I put some illustrations I created for K12's lesson opener here. It's about Montessori inspired five great lessons. ENJOY!

Designed by Fangxiao Yu,

last updated in February 2019