Literator is a tool for teachers to track student's progress in class and plan better educational strategies.

We created a flow with the aim to make the process of teaching pre-k more efficient. The goal was to make complex information accessible and to create a responsive dashboard that engages the user.




Literator team conducted the research and handed over the results to our team.

Results indicated that users are dealing with complex data and they need to:

  • Easily create profiles and update them.

  • Easily interact with assessment tools in the app.

  • View student information and easily compare them. 

  • The ability to take notes and follow up with parents.

My role

I was on a team of 4 designers and I participated in all phases of the project with a special emphasis on:

  • Create an easy navigation flow.

  • Improve users interactions and data input methods.

  • Create an interactive dashboard to compare and view data.




Lack of flexibility in creating profile

Teachers can only create classes of students, and there is no option for customizations for smaller groups.

Difficult interactions with Assessment tools

In the existing app, a binary assessment is used for updating student's levels, and this method lacks accuracy.



To understand our targeted user, I created a scenario with a provisional persona called Melanie. Our persona is a pre-k teacher who is having a hard time tracking students.

LO-FI Sketching

We conducted a design studio to brain storm ideas for Literator's new flow

During a design studio, we brain stormed ideas and came up with solutions to achieve:

  • More flexibility in creating profiles (Creating new groups and easily edit them)

  • Responsive dashboard (That can be updated)

  • Easier data update (Through one tap on the progress indicator) 




LO-FI Wire frames


Based on the design studio feedback, we moved our ideas to Sketch app to create a clickable prototype. We divided the flow into 3 main levels that can be edited and compared.

Classe level ,Group level, Student level.


Overview of the flow through the app

see detailed screens below



We conducted validation testing with the Invision clickable prototype. 



  • Navigation: The new flow had different levels of information, so it was hard for users to navigate.

  • Clickability: The interactions were confusing as the taps did not seem clickable.

  • Discovery of progress tracker: Users had to scroll to view the rest of the dashboards.




HI-FI Prototype

We iterated on our design and created another prototype to solve the issues from Lo-Fi. Here is the main feature of each flow (Class-Group-Student).


Class flow


The class level provides a high-level view of the students' information:


  • The user can create groups of student profiles.

  • The user can view and move student profiles between groups.

  • Providing the user with recommendations, and auto-generate groups.





Our team conducted another round of validation testing.

Results were positive, except some issues. Most of the major pain points have been resolved.






Click anywhere to interact

© 2018 by Aya Khalifa

  • email-icon-vector-niEKXzMiA
  • linkedin_circle_black-512
  • 540524_03ad1450dea24e52b57fc352c09d3c65-mv2_d_1600_1200_s_2
  • Twitter - Black Circle
  • 49403