ReMo

I led the design of an accessible web application and visual identity for our client, ReMo. ReMo is a unique web application that enables teachers to foster a safe space for students to explore their reading identity. It provides a personalized way for teachers to follow their students’ reading progress and for students to tangibly track their own progress, aiming to mitigate stigma around reading and move away from the achievement-based learning model prevalent in K-12 education. We designed two versions of the app, one being teacher-facing and the other student-facing.

Scope

Product Design
UI/UX
Visual Design
Information Design
Data Visualization

Year

2023

Team

Project Lead: Kate Tuohy
Design Lead: Naomi Desai
Designers: Jenny Chen, Jyaleen Wu

The Problem

There is a prevalent stigmatization of reading among K-12 students and many existing reading tools follow an achievement-based learning model that only further discourages students.

ReMo's preliminary app was hard to navigate, with misleading labels and limited data display options. Educators couldn't view it from a student's perspective, and poor accessibility required multiple clicks for important pages.

The Challenge

Redesign ReMo's desktop web application, focusing on the information architecture, data visualization, and overall user experience while straying away from achievement-based models and indicators.

Defining ReMo

We began this project with a client meeting with the intention of understanding more about ReMo, their brand mission and personality, and how we could apply their core values to the design system and app.

Research and User Stories

After defining the ReMo brand, we conducted some competitor research to familiarize ourselves with similar existing platforms such as Book Buddy, Liblib, Epic!, Classroom Checkout, and Booksource Classroom. Then, we created user stories to get a better feel for the needs and wants of ReMo users.

Information Architecture

We spent significant time on site mapping and building ReMo's information architecture, creating separate organizational structures for both the teacher and student-facing versions, as well as developing an onboarding workflow. We renamed pages for clarity, simplifying the previously disorganized and complex app to make pages easier to find and access.

Lo-Fidelity Wireframes

Design System and UI Guidelines

In developing our visual design system, we used initial brand exercises that defined ReMo as conversational, celebratory, and unconventional. The final system includes a versatile color palette with fun colors resembling school highlighters. We iterated to ensure sufficient color contrast for accessibility, maintaining a playful design that aligns with ReMo's brand personality and distinguishes it from competitors.

Hi-Fidelity Wireframes

Strategic Design Decisions

Educators wanted to view the app from a student's perspective to better educate their class, so we added a toggle on the teacher-facing interface to switch to the student view.
‍
Given the app's data volume, users wanted various display options. We added dropdown menus, allowing reading data to be viewed as charts, graphs, and tables, giving users the autonomy to toggle between different views.
‍
To meet user demand for quick access to their most-visited pages, we created a home page dashboard with quick links and essential data. Research guided us in identifying the most important pages, differing for students and teachers.
‍
During the design process, we dedicated significant time to testing and iterating based on feedback. In the later stages, we refined smaller features, like the reading progress bar, to accurately reflect progress, discovering that certain colors and icons could discourage students and lead to frustration.

Handoff to Developers

Lastly, we created detailed development notes (such as hover states and other interactive features) along with a working prototype of the app to guide the developers after handoff.

Conclusion and Impact

The new web application significantly improved ReMo's ability to engage students and support educators. By emphasizing user-centered design and accessibility, we enhanced the app experience for both students and teachers. The engaging design system strengthened ReMo's brand positioning, setting it apart from competitors. This project not only supported ReMo's mission to foster a love of reading in students but also demonstrated the importance of effective collaboration and user-centered research in creating impactful educational technology.