Project: Aging Up — Grades 3-5 (and the In-Between)
Grade 3 Phonics Lessons
Users Prefer No Character-Usage
User research indicating that grade 3 students prefer more “sophisticated” visual design without the use of characters.
Simplified Interface and Payoff Approach
Instead of animated character pay-offs (as used in K-2 lessons) we developed “micro-moment” animations that were satisfying but completely tied to the interface itself as opposed to a larger conceit.
Academic Skill Focus: Phonics
User Level: Grade 3 (but may be older students who are further behind in Phonics skills)
Problems to Solve: How can we use existing renderers (activity code) and update look and feel for Grade 3 with minimal changes? How do we design these activities to live “between” the K-2 and 3-5 brands (as these specific users vary most in age)?
Solution: Student research indicated a unique range of users for these lessons. Students are either above-grade level in K-2, or are below-grade level in grade 3 or above. We determined we’d focus the design on chronological grade 3 students and referenced user personas for this group.
The existing renderers for K-2 were branded with our characters, Plory and Yoop, and all background designs were developed to fit a space-technology-theme. At this time, these designs were outdated and the activity flows problematic, so we designed new visuals and optimized the UI/UX where possible.
For the activity design, characters were removed and the layouts were simplified to give a focus to the task at hand and instructional intent as opposed to any flourish or distraction. A subtle yet mature “spacey-tech” background pattern was implemented to provide subtle texture as well as a nod to the K-2 background designs.
Grade 3-5 Vocbulary Lessons
Grade 3-5 visual design is a departure from the K-2 brand in several key ways: no character usage, more complex interactions acceptable, more text on-screen (varying font sizes), additional UI components required (i.e. glossary tab, stem question, etc.)
Color Palette
The 3-5 palette was designed to be bright and cheery — hues were based on the K-2 palette but more deeply saturated and vibrant. A subtle gradient persists across the activities to add some dimension. Since the content for this domain is heavily text-based (no-to-minimal images), we wanted the color to be a main focal element that compliments the text elements. We designed the stem question (top band) to have a consistent light background and position and the central work-space/interactive area is colorized.
We also determined that there should be a palette differentiation between the instruction component (beginning of the lesson) and the quiz component (end of lesson). All quiz activities (same code and design are instruction) are color-coded using a deep indigo hue (more serious and calm) to alert the student to the potential change in attention and focus.
Developing More Complex
Interactions and UI Elements
With more complex lesson content came more complex interactions (i.e. multiple drag-and-drop submission) as well as a need for more content boxes on-screen at a time, sliding panels, and tools.
The goal was to maximize space for text and utilize the user’s more sophisticated sense of UI to develop tabs/sliding panels to expand information at point-of-use needed.
