Case Study: Elementary Digital Learning
K-4 Login: Research & Usability Testing
Research
I researched elementary cognition and elementary digital learning websites by studying published materials and competitive analysis. I analyzed more than 30 elementary education websites and reviewed our existing student application, which was designed for middle school students. I focused on identifying areas of our current assessment site that needed UX & UI adjustments to better suit a younger audience.
Identified areas for impactful change:
Login and Authentication
Navigating the Dashboard
Assessment Workflow
Question and Answer Experience
Technical Errors and Notifications
Design Ideation
Goal: test and prototype the most impactful part of the online assessment experience
Below is a compilation of my design ideation in Figma. It includes sketches/ideas of new ways to approach the in-assessment experience, login UX/UI, visual planning and comparative analysis.
We determined with our client that LOGIN would be the most impactful part of the user experience to change and test for elementary student participants.
I tried out different UX/UI ideas for login before determining the final 3 solutions we would test and finalizing our test approach. Many versions of prototypes were made to ensure whatever was presented to students felt realistic as possible while staying in the logic constraints of a prototype.
Usability Testing
We A/B tested 3 solutions for elementary login:
Number pin
Pattern entry
Symbol pin
We also tested error messaging and observed student UI preference on entry correction. General info
10 students were tested nationwide, mostly in person and a few digitally. In-person sessions were crucial to gauge younger children's response to index-sized paper login cards as password keys, providing valuable insight on the analog and digital login solution tested.
Cards were tested at 3 different sizes. Consideration of legibility, administrative overhead to print and cut out cards were all considered for this part of the login. The design of the card follows the sequence of the natural steps in the login process. Placement of the student’s name in the top right corner on 2 cards was intentional, geared towards best scalability to ease a teacher’s job of card distribution.
Usability Testing: Round 1
Version 1: Numbers
The number pin method was a popular way to enter passwords. Students liked being able to type or use the keyboard to navigate, or click the keypad to enter. It was also the most practical solution for meeting accessibility requirements.
Version 2: Pattern
The pattern password gave the students the most open option, since entry was non-linear. Many students enjoyed this unique experience and said it was “like a game” and fun to do.
Version 3: Symbols
I used simple black symbols for the symbol pin to ensure clarity when printed in schools, as most things there are printed grayscale. Using more complex images would have been unclear without color printing, and it could confuse students before they even reached login.
Findings
Testing yielded valuable insights. As anticipated, in-person testing proved superior to virtual testing due to our participants' ages, ranging from 6 to 10 years old. We swiftly identified problem areas, including difficulties with the symbol pin's layout input and the page's easily missed corrective buttons. There was a lot of focus on the monster characters. Several students expressed they thought the style of the monster illustrations felt too young for them and their peers.
Usability Testing: Round 2
All findings from Round 1 were taken into consideration.
Round 2 changes included:
1. Visual design, update character design
2. Increase button sizes & change placement/styling
3. Layout adjustments to symbol pin input
4. Error message: stronger visual prominence
Below are design adjustments and visual iterations that were shown to our second round of recruits to gauge favorite visual styling. The visual alterations were done with ease since I designed the site to be theme flexible from the start.
Results
After extensive testing, we found that numbers worked well for older students (grade 3+) and symbols were better for younger students (grade 2 and below). Numbers also were best for ensuring WCAG compliance and tabular navigation. Students preferred 3D graphics and enjoyed themed experiences more.
Space themed login was a big hit, and pairing that with a child astronaut character created an identifiable relationship between students and the character.
Kids loved the pattern solution, noting that it was more like a game. However, this was the worst performing solution in terms of entry speed.