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
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
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.
Following an agile methodology, design team was able to deliver 48 high-fidelity, interactive screens for desktop, tablet, and mobile views in a one-month sprint. We delivered in time for our MVP deadline so our Engineers could start their sprint on time.
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.
After our Project Manager met with two of our stakeholders to start a product requirements document (PRD), my design team brought attitudinal 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.
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:
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-have features
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
Streamline the process of tracking student data to help Plant it Again scale their organization?
Including users with disabilities in meaningful contributions to operations?
Next, I worked with our engineering manager and product manager to narrow down a final feature set for the minimum viable product (MVP). Though much of the MVP was predefined in a project brief, the design team pushed for a 'Program Profiles' feature to cover a gap identified in user interviews.
Blue = feature ideated from user research
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
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
As mentioned earlier, 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
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
Peek at the PIA design system. Sponsored by Figma auto layout, smart animate, and variants
ACCESSIBILITY
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
Secure Login
Sign up or login with a Team or Admin account. A designated Root Admin will approve or reject new accounts. 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.
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 experience with user research.
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 :) 🌱