Table of Contents

1) The Problem / My Role

5) Usability Testing

6) High Fidelity Mock-ups

7) Conclusion

My Role

For this project, I partnered with Shaye Jones, another junior designer. We were left to divide up the workload as we saw fit. While we were both involved in all aspects of the design, I focused on secondary and background research, sketches, and prototyping. Meanwhile, Shaye focused on a heuristic analysis of the existing test, wireframing, and illustration. We both performed usability tests and worked on the final hi-fidelity mockups.

Discovery

HEURISTIC ANALYSIS

We began with an analysis of the test as it stood, focusing on three heuristics from the Nielsen Norman Group’s list of usability heuristics: Visibility of System Status, Error Prevention, and Aesthetic & Minimalist design. These were all areas we felt needed improvement to satisfy the project brief.

The test has three distinct sections with three different objectives. We found that the current design was inconsistent in alerting users as to which stage was currently active. Furthermore, the naming convention used did not precisely establish each stage’s objective. We felt this could inhibit understanding each section’s significance, making it more challenging to hold a user’s attention.

On one screen, three buttons were placed at the bottom right of the screen to allow navigation between sections. On another screen, three identical buttons in the same location offered the opportunity to re-do the stage, move on, or quit. While we recognized the importance of these features, this particular UI created an unnecessary opportunity for slips. Users on auto-pilot could all too easily click the wrong button.

Finally, we found instances where extra steps in the flow could likely cause a user’s attention to waver. Extraneous screens encourage users to speed through the flow to reach their objective. Users can become confused if they miss critical information provided by a screen they only skimmed due to a waning attention span.

RESEARCH

I sought to explore UI best practices for educational games aimed at ages 3-7 and young teens. Apps I evaluated included ABCMouse, Prodigy, Khan Academy Kids, Adventure Academy, and the games on the PBS website. Finally, I spoke with some parents of children who play computer games and an expert in early childhood development.

UI OBSERVATIONS

• Most apps have some background imagery — either one that tells a story, gives a sense of place, or at the most basic level provides some visual candy. I believe this helps improve engagement in two ways: 
  • it gives something other than a harsh white screen to focus on, and
  • it increases immersion in gamification tactics.
• The apps utilize heavy typefaces, often with colorful outlines.
• The apps utilize bright and bold color schemes.
• Words in copy are short and easy to read and comprehend
• Copious use of animation.

GAMEPLAY OBSERVATIONS

• An effort is made to hide the true meaning of the game (while the underlying purpose of the game may be to develop shape recognition and spatial awareness, the child thinks they are just playing a cool game about repairing a spaceship)
• The initial introduction and instructions (i.e., the “Listen” section) are brief — in all games I observed, there is only about a minute of instruction before the interaction begins.
• The initial interaction (i.e., the “Try” section) is part of the game. Instead of a full rundown of game controls, a tutorial guides the player through the game’s first level.
• The bulk of the gameplay (i.e., the “Go” section) appears after the player completes the first level and records an achievement.

INTERVIEW NOTES

• Gamification works most optimally when there are distinct rewards throughout the game or test.
• Children up to the age of 9 years-old do not necessarily have letter recognition.
• It could be useful to color-code the letters (colors must remain consistent throughout the test, as changing them could confuse the subject.
• Children take letters at face value, so “SS” could imply two distinct sibilant sounds.
• Younger children often have difficulty when faced with many choices.
• Children over age ten should be able to use an interface designed for adults.

   

SYNTHESIS

Armed with this information, we created some user personas, a new user flow, and defined some rules for the design:

PERSONAS

• Sam has been diagnosed with ADHD and sometimes gets in trouble for disrupting class, but he tries his best to do well.
• Loves playing games on the tablet that he got as a present last year.
• Wants to do well in school, but sometimes struggles to focus.
• Favorite activity is watching cartoons on his tablet.

• Tilly generally gets good marks in her classes
• Doesn’t have her own phone yet, though she desperately wants one.  Parents allot her 90 minutes a day of tablet time after she finishes her homework
• She spends time on YouTube watching music videos, and sending funny things to her friends.
• Has no problems completing tasks on computers.

• Has owned a smartphone for a couple years, spends 3-4 hours a day using it.
• Quite independent when it comes to internet usage; loves editing silly videos with his friends and putting them on TikTok.
• He’s understands computers better than anyone else in the family. Tylar is pretty much the family’s resident IT guy.

• Has worked as a primary school nurse for 20 years.
• She is one of two nurses for a student body of 700+ children.
• Works with school computers regularly and knows enough, but doesn’t consider herself “good” with technology in general.
• Excelled in her SCPHN programme, and isn’t afraid of learning new things.

We decided to focus on the younger age range as they will be the primary demo using the product and require unique design considerations. Future iterations will focus on being more appropriate for older youth.

USER FLOW

RULES

1. Text and buttons should stand out with contrasting colors.
2. The flow between stages needs to feel organic.
3. Student’s should be given a positive response after each correct answer.
4. There should be consistency in how the sounds relate to the image.
5. Only use one letter, unless two are required (ie: “M” as opposed to “MM”)

Sketches & wireframES

I sketched out some screen designs, which became the basis of the wireframes.

USABILITY TESTING

Using the wireframes, I created a prototype, which we used to perform a round of useability tests. This product is to be used by small children and adults alike, so we recruited two children (aged 7 & 8 years), and three adults ranging from their 20’s to 50’s. The tests largely validated the design, with only two minor flaws:

1) Some adult users thought that they were to click the back button labeled “Rules.” We wil adjust the label to include the word “Back”

2) One of the children had difficulty finding the next button. We will fix this with our button design.

HIGH FIDELITY MOCK-UPS

Feeling confident after our successful usability tests, we set out to create our high fidelity mock-ups. I created a progress bar that would fill up incrementally with each correct answer. At my suggestion, the revised illustrations featured different skin tones for each person depicted. We utilized the existing brand colors.

conclusion

When designing an interface that will hold children’s attention, it is important to keep in mind the early stages of development, and tailor the design to their unique needs. Simplicity is critical. Bright colors, large text, rewards, and a way to keep score will keep their interest and encourage them to see the process through to the end.