PMP Mobile App

Challenge

It is no secret that PMP tutors have an incredible impact on young learners' lives. But, there's a lot that goes into being a successful Interventionist. Interventionists are required to "clock in" when they arrive at their shift as well as track each of their students' progress after every session. Some Interventionists are also Site Leaders. Site Leaders are responsible for making sure the Interventionists they oversee "clock in" and submit their students' progress reports on time.

Ask

After years of using notoriously error-prone pen-and-paper tracking methods, PMP is going digital with a mobile app that allows Interventionists and Site Leaders to track and submit everything in one place. After working with a team of UX designers to determine functionality and create initial wireframes, PMP tasked me with carrying the product to a production-ready state. I was asked to create a scalable design system within the confine of the MP visual brand guidelines and apply that to the UX wireframes to create high-fidelity mockups and prototypes for the entire product.

Client

Practice Makes Perfect provides summer schooling and in-class tutoring to under resourced NYC public schools to eliminate the educational achievement gap and level the playing field for minority students and students from lower-income households.

client

  • Practice Makes Perfect

Year

  • 2019

Role

  • UI Designer

Tools

  • Sketch
  • InVision
  • Principle

Challenge

It is no secret that PMP tutors have an incredible impact on young learners' lives. But, there's a lot that goes into being a successful Interventionist. Interventionists are required to "clock in" when they arrive at their shift as well as track each of their students' progress after every session. Some Interventionists are also Site Leaders. Site Leaders are responsible for making sure the Interventionists they oversee "clock in" and submit their students' progress reports on time.

Ask

After years of using notoriously error-prone pen-and-paper tracking methods, PMP is going digital with a mobile app that allows Interventionists and Site Leaders to track and submit everything in one place. After working with a team of UX designers to determine functionality and create initial wireframes, PMP tasked me with carrying the product to a production-ready state. I was asked to create a scalable design system within the confine of the MP visual brand guidelines and apply that to the UX wireframes to create high-fidelity mockups and prototypes for the entire product.

Client

Practice Makes Perfect provides summer schooling and in-class tutoring to under resourced NYC public schools to eliminate the educational achievement gap and level the playing field for minority students and students from lower-income households.

Role

  • UI Designer

Year

  • 2019

client

  • Practice Makes Perfect

Tools

  • Sketch
  • InVision
  • Principle

// Functionality review... //

style exploration

We started with inherited UX assets including wireframes, which we each then restructured according to our assessment of the problem statements and user profiles. I decided the information architecture needed some work and as a result some screens needed a functionality tweek.

original UX wireframes
re-structured ux wireframes

updated app map

After restructuring the wireframes, I created an app map to help simplify the user's journey for myself as well as for our client during our first pitch meeting.

// Exploring styles within the existing brand... //

established brand guidelines for graphic & print design

PMP had a thorough brand established for marketing assets, so my challenge was to explore these guidelines and create an interface style which complemented and enhanced the marketing style.

brand overview: logos, colors, typography, iconography
examples of brand application to digital infographic design

style exploration

I began exploration by defining two directions the visual style could go in, naming them "Prestige & Success" and "Achievement & Growth." I tested these mood boards and style tiles with users who were overwhelmingly more drawn towards the darker interface. After pitching these to the client, they were in agreement with the users.

"Prestige & success" mood board
"Prestige & success" style tile
"achievement & growth" mood board
"achievement & growth" style tile

// Applying style to function... //

High fidelity mockups of key screens v1

In the interest of time, we chose four key screens to mockup for the initial round of user testing. In creating these, I began establishing the design system, using gold as the active state and red as an informational accent color.

Report student progress
scan in for shift
shift and class schedule
track reports and attendance

High fidelity mockups of key screens v2

After user testing, I iterated on these designs and further developed my design system. We then pitched each of our high fidelity mockups to client, explaining our decisions, and taking feedback for further iteration.

Report student progress
scan in for shift
shift and class schedule
track reports and attendance

// Final high-fidelity mockups... //

After the final iterations, I expanded the design system and applied it to each screen, paying close attention to the user's experience in order to help mitigate the inevitable learning curve and get the user through the process as quickly as possible. I used step-by-step feedback to guide the user to the next action they need to perform or information they needed to consume.

Login & sign up

loading screen
log in
sign up
create password

profile

profile
profile

scan in for shift

scan in prompt
scan in successful
scan in error

view schedule

timeline schedule
monthly shift calendar
overview of day pop-up

track interventionists and students

track inter-ventionists accordion
track inter-ventionists
track options
track students
track student accordion pre-reports
track students accordion post-reports

Report student progress

unfilled student report
absent student report
present student report
notes pop-up
filled student report
submit student reports pop-up

// Design System manual... //

Lastly, to ensure efficient handoff and future growth, I created a thorough Style Guide that explained the design system in detail.