-
Client: District Zero
-
Role: Product Designer
-
Tools: Figma, Illustrator
-
Team: Product Owner, Engineers, Researchers,
Product Manager
DISTRICT ZERO
District Zero is a B2C desktop application designed to enhance person-to-person guidance and mentorship by tracking emotional well-being and goals.
HOW IT STARTED
In 2020, I realized the importance of structured check-ins during my mentorship experience. A centralized tool could help mentors and learners track growth effectively over time.
OUR MOST COMPLEX FEATURE
Below I'll delve into our most complex feature, past check-ins.
Past check-ins are where our Leaders look at every single check-in, question, and sentiment analysis. What trends do Leaders want to see, and how will that shape our filters and layout?
THE PROBLEM
What are the best methods for capturing and displaying users' progress and emotional responses in a way that provides valuable insights over time?
USER NEEDS THAT FORMED OUR FIRST FEATURES
-
I need to see if anyone in my group is struggling.
-
I need to see trends in a larger group to particular questions.
-
I want to see who didn't complete their check-ins.
-
I want to see the check-in type.
-
I want to know when the check-in was completed.
-
I want to be able to hone in on one Learner and see just their check-ins.
User interview insight #1
Teachers are overwhelmed and time-constrained, they will not pick up a new habit that is longer than 15 minutes. We must maintain awareness and minimize the additional workload our product imposes.
From this insight, we decided our system could benefit from serving content based on a Learner's Check-in. As well as the ability for the Leader to respond with a note or content for the Learner.
User interview insight #2
To boost student engagement, we need to simplify participation. Small steps, like setting reminders and quick surveys, can make a big difference.
From this insight, we prioritized check-ins and a simple button to start them right on login. We also put a native app just for completing a check-in as a high priority in our roadmap.
USER PERSONA
THE LEARNER GROWTH PROCESS
WIREFRAME
This was our very first pass, and my wireframes were simple—sometimes even rough. Looking back, I often think, "Wow, these are terrible!" But their value lies in kickstarting the design process.
I’m a designer who moves quickly to visuals because I’ve found that collaborators engage more effectively when they have something tangible to react to. Wireframes may evolve significantly, but they serve as a crucial starting point for exploring concepts and sparking collaboration.
.png)
MANY UPDATES LATER...
The three-column layout felt cramped, making it unclear which group users were viewing, while check-in dates often got overlooked.
Through testing and user interviews, we streamlined the experience to reduce cognitive load. We ensured leaders were no longer overwhelmed by excessive check-ins and redesigned them to be simpler, more intuitive, and easier to absorb.
We introduced an expand/contract feature for responses, allowing users to focus on what matters most.
Basic filters are now easily accessible, with advanced options for deeper, more creative data insights. To enhance clarity and accessibility, we added visual elements to make selected options unmistakably clear.
Additionally, we removed sentiment analysis from individual answers but ensured that any flagged as highly problematic would immediately alert the Leader and provide support resources to the Learner.
MANY MORE UPDATES LATER... AGAIN....
By leaning on nested collapsible sections, we could bring it into one column and create a long scrolling page with units separated by date.
We finally added profile pictures which added recognizability of which Learner is being viewed.
We reworked the design hierarchy of the check-in info like the group name, time, and amount completed.
FINAL LEADER FEEDBACK
-
Leaders could connect with Learners more quickly at the start of the school year, making learning their names easier and building relationships.
-
Shy Learners were able to express their needs more openly and consistently, ensuring they didn’t get overlooked.
-
The system provided peace of mind by alerting Leaders to any alarming responses, enabling timely support for Learners.
-
Leaders received consistent feedback, allowing them to improve their programs and assignments effectively.
FINAL THOUGHTS
One thing I would approach differently in designing UI for a product like District Zero is prioritizing the creation of a design system from the start. While iteration and adaptation are always part of the process, especially in an agile environment, setting up a design system early ensures consistency and efficiency for both design and development. It's also crucial for supporting developers' success by reducing rework and speeding up implementation.
When District Zero shifted focus to adult learners, the design challenges became more manageable. Designing for users under 18 required significant attention to permissions and security, which added complexity to the user experience and development process.
Another critical insight I gained was the importance of creating an ecosystem of usage to ensure adoption. For District Zero, this meant securing adoption at the institutional level—getting schools to integrate the program into their mentorship systems. This top-down approach was vital: students were motivated to use the app because it was tied to their mentorship requirements. Without that institutional push, adoption would have been much harder to achieve organically.
