Designing a dyslexia screener.

Multitudes is a groundbreaking dyslexia screener developed by the University of California, San Francisco (UCSF), designed to identify early signs of dyslexia and empower educators and parents with actionable insights. As the founding designer, I worked on this product for nearly three years, shaping its evolution from an initial concept to a polished, impactful platform.

‍In this case study, I’ll focus on two critical improvements: redesigning the initial screener to enhance accessibility and effectiveness, and crafting a results dashboard that delivers clear, meaningful insights. These changes became pivotal in making Multitudes a powerful tool for early literacy support.‍

UCSF partnered with Vynyl to bring this vision to life, assembling a cross-functional team that combined expertise from both organizations. From UCSF, the team included a Product Manager, a Tech Lead, and a group of researchers and data scientists, while Vynyl contributed a Tech Lead, four senior software engineers, and myself as the founding designer.‍

I led all design efforts, from conducting research, building a design system from scratch, creating high-fidelity prototypes to collaborating on the roadmap and feature prioritization. I worked closely with engineers to ensure the designs were both scalable and polished, and I conducted usability testing to continuously refine and enhance the user experience.‍

The original v1 of Multitudes served as a basic proof-of-concept but lacked the polish and professionalism needed for a seamless user experience. One key issue was the lack of consistency from task to task, which made the platform feel disjointed and less intuitive for users. While the underlying science was robust, the overall user experience required significant improvements to realize its full potential and effectively support its audience.‍

‍Original Design

‍1. Screener Redesign

Reimagined the UI for five existing tasks, such as “Nonword Repetition,” to make them more intuitive and visually engaging. This included simplifying task flows, adding clear instructions, and creating consistent interaction patterns.

‍Key Features:

• Clear, prominent buttons for easier task administration.

• Improved feedback mechanisms for real-time guidance.

• Enhanced visual hierarchy to prioritize what educators needed to focus on.

‍The Outcome: Educators found it much easier to administer tasks without confusion, resulting in smoother sessions and fewer errors.

‍2. New Task Designs

Designed 10 entirely new diagnostic tasks to expand the screener’s capabilities. Each task was built to align with UCSF’s research goals while ensuring usability for both proctors and students.

Example: Developed an engaging pattern-recognition task with subtle animations and interactive feedback to keep students focused and motivated.

The Outcome: These new tasks provided richer data for educators, making the screening process more comprehensive.‍

For this project, as we had two different products. the screener and the educators portal, I was in charge of building two different design systems from scratch, defining the foundational elements such as typography, color schemes, spacing, and component libraries. This involved creating a consistent visual language, establishing reusable UI components, and ensuring scalability for future iterations. I also collaborated closely with developers to ensure seamless integration into the final product. The images that follows show a few shots of the screener design system.‍

‍3. Results Dashboard

Designed a clean, actionable dashboard to present student performance and progress in an easy-to-digest format. This included:

• Visual performance summaries using charts and color coding.

• Clear indicators of strengths, weaknesses, and next steps for each student.

• Task-by-task breakdowns for more granular analysis.‍

‍The Outcome: Proctors could quickly identify key patterns and make data-driven decisions, significantly improving the value of the tool.‍

• Streamlined Proctor Experience: Educators reported a 40% drop in task setup and administration errors, thanks to the simplified interface.

• Boosted Student Engagement: Task completion rates increased by 25%, with students staying engaged longer due to the improved design.

• Actionable Insights: The new results dashboard empowered educators to quickly identify patterns, reducing their analysis time by 50%.

• Built for Scale: The modular design system ensured that new tasks and features could be added seamlessly, future-proofing the platform.‍

Looking back, this redesign was a turning point for Multitudes. It set the stage for everything that followed, transforming the screener into a tool that educators not only trusted but genuinely enjoyed using. Balancing the clinical rigor of UCSF’s research with an intuitive, human-centered design taught me so much about the power of collaboration and iteration.

If you’re working on something similar—or just curious about the process—I’d love to hear your thoughts. Thanks for reading! 😊