Hero Section Project2

READTYCH

Designing an Intuitive and Accessible
Web App Experience

Designing an Intuitive
& Accessible
Web App Experience

Role

UX/UI Designer

Company/Client

READTYCH Corp

Timeline

Q1–Q4 2024

Impact

+40% stakeholder investment

30% faster navigation

Impact

+40% stakeholder investment

30% faster navigation

Project Overview

I redesigned an educational web app that had become cluttered, inaccessible, and frustrating to use. The old experience had cramped layouts, low-contrast colors, and disorganized navigation, making simple tasks feel like obstacles. By focusing on clarity and accessibility, I introduced a clean class-selection flow, streamlined dashboards, and a unified design system. The result: navigation time dropped by 30%, the app became easier for students and teachers to use, and the redesign helped secure a +40% increase in stakeholder investment.

The Problem

  • Cramped layouts that didn’t adapt well to desktops.

  • Poor accessibility (low contrast, color-blind unfriendly).

  • Inconsistent visuals across menus and dashboards.

  • Confusing journeys that slowed down teachers and students.

Old Design. Readtych WebApp

Old Web App Teacher Side READTYCH HDDesign portfolio

Design Process

Turning research into design meant sketching, testing, and refining:

  • Wireframes explored simplified menus and cleaner layouts.
  • Mid-fidelity prototypes validated flows with teachers and students.
  • Iterative cycles (4 rounds over 8 months) revealed insights each time.
  • Collaboration with developers and stakeholders aligned feasibility and vision.

Wireframe/ Home View- Department of Education

Home View- Department of Education

Design Iterations

Navigation Menu Redesign:

  • Before: cramped proportions, low contrast, icons blending into background.
  • After: clear hierarchy, improved contrast, accessible labels.
Navigation menu Re-design

Dashboard Simplification:

  • Before: visually overwhelming, too many elements at once.
  • After: “less is more” approach, focused on essential information.

Exploring scrolling dashboards. Two early versions where the left menu stayed fixed while the rest of the page scrolled.

Willow Elementary Student information Bob Stuart

During one sprint, I explored a scrolling version of the school dashboard. The idea was to pack in as much information as possible—performance metrics, attendance rates, class evaluations, upcoming events, and more—into a single view.

While it looked comprehensive, it quickly proved overwhelming. The amount of data made it harder for users to find what mattered most, and the scrolling layout didn’t fit the “at-a-glance” needs of teachers and administrators. Important insights were buried under layers of charts and widgets, and the screen lacked a clear entry point.

This experiment was valuable, though: it confirmed that the web app needed focus over volume. By trying the “everything in one place” approach, we saw firsthand why simplicity and prioritization were key for this product.

Dashboard Teachers Final result Q4 2024

Dashboard Teachers Final result Q42024

Information Architecture

Sitemap WebApp Teachers View HDDesign portfolio

Design System

  • Colors: approachable blues + calm neutrals.
  • Typography: Poppins for readability across grades.

  • Components: buttons, cards, and dashboards unified for consistency.

Design System READTYCH WEBAPP

I wanted the app to feel friendly but still professional, so I leaned on a calm blue palette with bright accents to make key details pop. Poppins was chosen for readability across different grade levels, and every component, from buttons to dashboards, was designed to feel clear and consistent. Building this system early on meant we could move faster later, adding new features without breaking the overall look and feel.

Visual Design

Materials. Teachers view

Materials View READTYCH webapp HDDesign portfolio

We kept some areas more blue and professional, and brought in color where we wanted things to feel more lively for students. The idea was to find a balance, serious enough for teachers and parents, but still engaging for younger users. Since the web app connects with the E-ink tablet, it was also important that both share the same look and feel. That way, no matter if someone is on the tablet or the web, it feels like part of the same space.

Inbox. Teachers view

WebApp Inbox READTYCH HDDesign Portfolio

Results & Impact

  • Navigation time reduced 30%
  • Stakeholder investment +40%

“The design overhaul was a game-changer. It resonated with our users and investors alike, enabling us to secure additional funding and significantly increase our valuation. I now have greater confidence in the process and the direction we’re headed. This transformation truly set a new standard for our platform.”

Reinaldo Rodriguez – CEO

Conclusion

This redesign turned a cluttered, confusing platform into an accessible and confident product for education. It proved that small usability shifts, like class selection and cleaner dashboards, can have a big impact on both users and business.

Next steps would be to work with developers to expand the build, deepen accessibility testing, and introduce additional features like the dashboard for the Department of Education, schools, and students, as well as teacher analytics, and improved mobile responsiveness.

next case study →