Nishad Patne

Projects / iSTART Early

Active

iSTART Early: leading design on a learning portal for young readers

1 / 4Onboarding: the first screen a teacher sees, one step from setting up a class

Product
iSTART Early, a reading tutor for grades 3 to 5
Role
Designer, then design lead
Team
A design team of 3 (Nishad P and 2 other designers), 1 product manager, 3 researchers, 4 engineers
Timeline
2023 onward, in bursts alongside my other work at LEI
Status
  • Live
  • both interfaces sit behind a login
Made for
ASU's Science of Learning and Educational Technology (SoLET) Lab, then ASU's Learning Engineering Institute (LEI)
Built with
  • Figma
  • Bootstrap
  • CSS variables
  • Angular
  • TypeScript
  • Articulate Storyline

iSTART Early teaches children in grades 3 to 5, five comprehensive reading strategies and helps their teachers run the class.

It's one system with two interfaces: students learn in one, teachers manage in the other, and teachers can open both.

I joined as a designer and grew into the design lead, mentoring the other designers and reviewing their work. When I joined, the student interface was a one-page prototype and the teacher interface was still to be designed.

01

Both are live

I designed the teacher interface from the start, made the student prototype user-ready as a full portal, created 3 games and 5 lessons and revamped 10 more games, and made the design system both interfaces are built on.

  • 18people

    two usability rounds

    Both are live, and were tested in two usability rounds inside LEI with 18 people.

  • 14papers and talks

    Research

    The 14 papers and talks since I began at the lab name or credit the iSTART-Early grant, and build on the groundwork of 14 earlier ones

02

What I did

Teacher interface

Registration, class setup and management, assignments, lessons and teacher onboarding.

1 / 5Onboarding: the first screen a teacher sees, one step from setting up a class

Student interface

The prototype was a single page: a journey map where each strategy is a planet. I fixed its old bugs, then designed what's inside each planet; how students reach games, practice and lessons; how they reach their assignments; a dashboard; the avatar; and more, all in one portal.

The journey map, where students pick a strategy planet

The avatar shop, legacy version: a full-body figure built from body, eye, hair and mouth parts

Games and lessons

I built them as artifacts in Articulate Storyline, a tool for interactive lessons. Each lesson ends in a quiz. The 10 existing games had no easy way to fix bugs or plug into iSTART Early, so I revamped them and kept them running. Storyline exports HTML, JS and CSS, so we connected each one with a few calls to APIs the engineers built. Students play and learn; teachers see their activity and scores.

1 / 3A lesson quiz in Storyline, with the call that logs a student's activity to the backend

Design system

I made a Figma system, a modified Bootstrap and CSS variables, which the engineers built both interfaces from.

1 / 3The design system in Figma (colour, type, shadows, spacing), next to the SCSS colour variables the engineers built from
03

Reflection

This was a long-term project, and one of my first as a professional UX designer. Before it I was a developer; I learned design hands-on, here and on WAT, LEI's writing analytics toolkit. I taught myself Articulate Storyline to make and fix the games, then taught it to two other designers and two developers so they could build in it and connect it to the backend. Today, learning surfaces, user expectations and what graphics can do are all changing, and the spirit of the project grows with them. The theory iSTART Early rests on, SERT (Self-Explanation Reading Training), is still relevant.

It's the web application that needs to sunset: to grow into something new, or make way for another.