PIA Student Tracker

Streamlining business operations through a unified database, dashboard, and profile experience

PIA Student Tracker — Streamlining PIA's business operations through a unified database, dashboard, and profile experience

PIA Student Tracker — Streamlining PIA's business operations through a unified database, dashboard, and profile experience

OVERVIEW

Plant it Again is a San Diego-based nonprofit creating fulfilling careers for adults with developmental and intellectual disabilities while recycling drought tolerant plants back into the community. My cross-functional team delivered a 0 to 1 web-based database for helping the organization efficiently manage their growing student base. With collaboration as a priority, I led a team of designers, defined and evolved the project direction, and prototyped the user interface. This project has challenged me to reduce complex ideas into simple, elegant design solutions.

ROLE

UX Design Lead

TIMELINE

November 2023

to May 2023

SKILLS

User Research

Product Strategy

Design Systems

UX Design

TEAM

3 Designers

1 Product Manager

10 Developers

PROBLEM

PROBLEM

Reliance on makeshift spreadsheets

Reliance on makeshift spreadsheets

Reliance on makeshift spreadsheets

Plant it Again's (PIA) student base had doubled in the last four months, rendering their current makeshift spreadsheets system inefficient at organizing student information, taking attendance, and carrying out other routines. PIA approached our consultancy for a digital solution because they needed more infrastructure to grow.

Initial workflow: individual spreadsheets and forms

SOLUTION

SOLUTION

Hub for tracking and managing students

Hub for tracking and managing students

Hub for tracking and managing students

To help Plant it Again scale their organization, we delivered a web-based database to track students, programs the students are part of, and other relevant information. We designed within the technical constraints of the platform's MERN (MongoDB, Express.js, React, Node.js) tech stack.


In a one-month timeframe, my design team covered user research and prototyping of 48 high-fidelity, interactive screens for desktop, tablet, and mobile views. We delivered on time for our engineering team to begin implementing by the hard start date of our first agile development cycle.

SUCCESS METRICS

SUCCESS METRICS

Setting success metrics

Setting success metrics

Setting success metrics

Data completeness

Percentage of complete student profiles. Measure the extent to which student records contain all necessary information.

User satisfaction

Average satisfaction rating from program staff users. Provide insights into the database's usability and functionality in core features.

Accessibility Compliance

Compliance score with WCAG standards, which make web content more accessible to people with disabilities.

QUALITATIVE RESEARCH

QUALITATIVE RESEARCH

Stakeholder interviews

Stakeholder interviews

Stakeholder interviews

After our Project Manager met with two of our stakeholders to start a product requirements document (PRD), my design team came prepared with additional open-ended questions including:

Digging into pain points and goals

Q: What steps in your current system do you find most cumbersome?

Q: How does your mission statement translate into your services?

Q: Who are our primary users? Any specific accessibility considerations?

Q: Clarification on terms: "intake notes," "parent vs. emergency contact"

Key insights

What was working: progress notes, PDF forms, program setups.

Data-related pain points: lack of data centralization, security, and scalability.

Efficiency-related pain points: spreadsheets used be a quick solution; however overwhelmed by the influx of new students

🧩 User need: heightened accessibility standards for students with dyslexia. Suggestions included simple fonts and color contrast.

TARGET USERS

TARGET USERS

Implications for Team vs. Admin users

Implications for Team vs. Admin users

Implications for Team vs. Admin users

Plant it Again has one office and ~15 students, which saved us from making many assumptions about our end users. Thus, our stakeholders specific different capabilities they wanted for Team vs. Admin users:

QUANTITATIVE RESEARCH

QUANTITATIVE RESEARCH

Product discovery survey

Product discovery survey

Product discovery survey

We obtained the contacts of 8 current PIA Admin and Team members and sent them a survey to rate their priorities for filtering and sorting options. These results informed the content included in the database.

Filtering student profiles in the database

Fewer than half wanted

  • By dietary restriction

More than half wanted

  • By programs

  • By enrollment status

Sorting student profiles in the database

Fewer than half wanted

  • Custom sort

More than half wanted

  • Alphabetical

  • End date

  • Intake date

  • Recent activity

Nice-to-haves

Saved for the later V2 and V3 development cycles: Send alert to admin before end dates/birthdays; Run reports; Billing entry, end dates, etc; Projected billing dates for the month; Print/export progress notes; Admin approval progress notes

How might we….

How might we….

How might we….

Streamline the process of tracking student data to help Plant it Again scale their organization?

While also….

While also….

While also….

Including users with disabilities in meaningful contributions to operations?

IDEATION & SCOPE

IDEATION & SCOPE

Essential features

Essential features

Essential features

Next, I worked with our engineering manager and product manager to narrow down a final feature set for the minimum viable product (MVP). Much of MVP was actually decided at the start because our stakeholders entered with specific expectations. Later into the project, the design team played a vital role in feature ideation from the research.

Blue = feature ideated from user research

INFORMATION ARCHITECTURE

INFORMATION ARCHITECTURE

Visualizing the platform

Visualizing the platform

Visualizing the platform

I dissected the six-page product requirements document translated it into an information architecture chart. This served as a common language between the UX designers, developers, and our stakeholders who approved it before the design stage.

Snowflakes indicate Admin-only features

USER FLOWS

USER FLOWS

Login and profile creation

Login and profile creation

Login and profile creation

It was also important to map out key flows to illustrate user interactions within the system. We proactively updated them during the project as we discovered edge cases and opportunities to simplify task flows.

Login for Team vs. Admin accounts

We initially considered using a single passkey for identity verification, which in hindsight, undermined security due to potential leaks. After discussing with the development team, we switched to an option would require a root user at Plant it Again to approve new accounts.

A root user is responsible for approving new accounts. This account type is used by AWS and Apple

Student profile and program profile creation

It was not intuitive to create 'profiles' for programs including title, start/end dates, etc. until I started to map out this user flow. In order to assign students to programs, we had to enable users to add those programs to system in the first place.

Covered edge case: attempting to assign a student to a program that has not been add to the system yet

UX/UI DESIGN

Key Design Decisions

Key Design Decisions

Key Design Decisions

Scalable navigation | Design exploration

Top navigation bar

Takes up less space on the page

Lower scalability (up to 3 more items)

Standard for e-commerce web applications

Side navigation bar

Higher scalability (up to 8 more items)

Standard for database web applications

Takes up more space on the page

Direct landing page | Design iteration

Stakeholder feedback: we're not trying to reach new users; this is for existing Team and Admin members

Marketing landing page

Provides more context into the mission and offerings

Incorrectly caters towards non-PIA members

Adds an extra click to the signup flow (inefficient)

Login portal

Caters toward intended PIA members only

Reduces friction in signing up

Could be confusing for a non-PIA member

Simplified database | Design iteration

Line item with progress notes

Digest progress notes at a glance

Must expand to read the full progress notes

Horizontal clutter hinders readability

Line item without progress notes

Room for additional columns of information

Less clutter increases readability

All information is truly scannable

DESIGN SYSTEM

UI component library

UI component library

UI component library

With three designers working on separate pages, we needed a way to uphold consistency across our designs. Developers needed clear documentation from us. Thus, I built and maintained a design system with reusable components for desktop, tablet, and mobile breakpoints.

Peek at the PIA design system. Sponsored by Figma auto layout, smart animate, and variants

ACCESSIBILITY

Including users with disabilities

Including users with disabilities

Including users with disabilities

PIA is home to Team members with developmental and intellectual disabilities who will use the system alongside Admin members. We strived to create the most intuitive experience possible for them.

Poppins, a sans serif font known for its legibility and versatility

Foreground/background contrast ratio compliant with WCAG 2.1 AA guidelines

Descriptive subheadings to help onboard new users to the features

RESPONSIVE WEB DESIGN

Designing across platforms

Designing across platforms

Designing across platforms

Our users primarily used desktop, but what if they decided to try from their phones? I researched various ways to fit the data in the table on smaller screens, opting for the hamburger menu and horizontal-scrolling table below.

FINAL DELIVERABLE

FINAL DELIVERABLE

Minimum viable product

Minimum viable product

Minimum viable product

Secure Login

Sign up or login with a Team or Admin account. A designated Root Admin will approve or reject new sign up requests. Team accounts can mark student progress, while Admin accounts will have access to the full range of features for managing programs and their students.

Students Database

View key high level information of all students. Filter by program and sort by name, intake date, and end date to find what you're looking for. Check out a student's full information using the "View Profile" button.

Programs Dashboard

Create and save profiles of programs that are offered at your organization. Input relevant information and customize the color. If program information ever changes, you can return for edits.

REFLECTION

REFLECTION

Journey as a UX Design Lead

Journey as a UX Design Lead

Journey as a UX Design Lead

The gift of giving and receiving feedback

Exchanging feedback was crucial to our weekly design meetings. I was proud to watch my mentees grow at raising concerns about each others' designs and integrate feedback on the spot. We tried to converge on solutions that were best for the user.

Striving towards systems-based thinking and component-based design patterns

One challenge early challenge was standardizing data across tables and different profiles. As the project continues to scale, I will encourage my design team to regularly update documentation in the components library and style guide for all teammates to access.

Next: building on the MVP through rapid testing and iteration

At this point, we're ready to present the staff at PIA with our minimum viable product interface and gauge user satisfaction. While this project is still in progress, you can check out Redbubble Creator Tools (usability testing) and FixNation Landing page (guided feedback sessions) for my past experience with using user research methods.

I want to thank Plant it Again for welcoming me to their cause of expanding career opportunities for adults with disabilities. I truly hope this solution empowers them to grow their organization for years to come :) 🌱