Literator
Project Specs
My Role: UX Research, UX Design, UI Design
Project Timeline: 4 weeks
Constraints: iOS, current app branding, no access to in-classroom use
Context
I led data visualization efforts for Literator's new user flows, created a grid system for the platform, and redesigned the menu and secondary nav features.
Literator is an existing app for K-6 reading intervention specialists to use as part of their in-classroom student assessment process. This project aimed to research and design a separate interface for pre-K student assessment, addressing different skill needs and data visualization priorities than the existing app. As a former teacher, I was able to give insights into classroom interactions and flow for reading intervention specialists as well as help delineate communication channels between parents and staff.
Goals: Design a pre-K user interface with unique data visualization and student assessment inputs for incorporation into the existing Literator app.
Researching Data Visualization
The largest piece of this project was figuring out how to design a system that optimized data input and visualization. Before getting there though, our team needed to fully understand the problem space of Literator and what the needs of their users are.
Some large questions we set out to answer during user research were:
How are reading intervention specialists currently tracking student progress?
What pain points are the biggest hindrance to efficiently logging progress?
What processes do reading intervention specialists wish were digitized or even automated to make them more effective at their jobs?
Task flow for teachers moving students between reading groups.
Tracking Student Progress
Our user interviews with teachers from pre-K and K-6 classrooms gave us great insights about what reading intervention specialists need to be able to do in a classroom setting to effectively manage their job.
We synthesized a list of feature priorities, based on our research and Literator's current functionalities for older student groups, to optimize for pre-K skill sets:
1) Review past progress and current levels of individual students
2) Input new progress for individual students
3) Compare individual student progress to both group progress and state or federal benchmarks
4) Easily rearrange student groups to based on fluctuating individual student reading levels
5) Update parents and guardians about individual student progress
To address a majority of these feature needs, our team conducted focused brainstorming sessions for in-app data visualization options. This included sourcing a variety of existing data visualizations from apps and web platforms that we could mix and match to find the perfect synergy for Literator.
Data visualization brainstorming.
Rough UI sketches of student assessment interfaces
Lo-Fi Goals
Tackling user flow was the biggest priority for our Lo-Fi iterations. We also focused on navigation between data visualization and progress input screens, and switching between individuals and group assessment.
Because of time constraints for the project, our Lo-Fi was essentially Mid-Fi immediately. Although not ideal for minimizing user testing reactions to UI instead of UX, it did provide extra insight into how users were receiving data visualizations and interacting with inputs.
Due to limited access to our target users, we tested the Lo-Fi clickable prototype with designers and growth marketers using generalized navigational and data interpretation tasks. This limited our ability to gauge if our designed functionality aligned fully with target user needs, but provided valuable feedback about the app's functionality and intuitiveness.
Lo-Fi, v2
After validation testing our initial Lo-Fi design, we came away with a few key changes that needed to happen to make the app really functional:
1) Create a peek menu from the current static menu screen
Users were interpreting this as a home screen rather than a menu.
2) Integrate messaging to parents and notes into individual student tracking
Toolbar navigation was confusing for user as they expected to find the functionality grouped in the same place.
3) Make progress input more obvious as an interaction
Users couldn't predict what pressing progress indicators was going to do, or where they would be taken if it navigated to another location in the app.
Rough UI sketches of student progress and search menu screens
Hi-Fi Goals
Since some of the usual Hi-Fi work such as overlaying color palettes for visual hierarchy, object corner and stroke styles, etc were already determined earlier in the process, our team really focused on creating more polish in this iteration.
1) Implement heat map-style coloration for student progress tracking
2) Develop a grid & type system for the app
3) Resize and space all elements according to the grid
4) Emphasize interactive elements with shadow, etc
Reflections on Literator
Imagining the role of a reading intervention specialist in action without observing it first hand was one of the most difficult aspects of the project. While interviews with teachers and my past experience working in classroom settings allowed our team to make educated guesses about the viability of our progress tracking solutions, it would have been ideal to have an extended research window. The circumstances forced me to explore additional options and seek insights from populations that were the next best thing in order to move the product forward.
The piece of the project I was most passionate about was data visualization. I really dove into analogous research and grew my skills of thinking outside the box and looking to other industries for inspiration. Additionally, I worked with a stellar team and picked up new leadership skills and appreciation for the style of brainstorming sessions we conducted as a team in close conjunction with the company's founder.