-
Client: District Zero
-
Role: Product Designer
-
Tools: Figma, Illustrator
-
Team: Product Owner, Engineer, Researchers,
Product Manager
DISTRICT ZERO
District Zero utilizes customized and scheduled surveys aka check-ins to track emotional well-being and general feedback across groups. One Leader can create various groups and set custom check-in schedules for each. They can look at check-in history and utilize filters to create different data sets to track an entire group's answers or an individual's journey within their class or program.
HOW IT STARTED
It was 2020, I was a junior UX designer and could not get anything past various freelance jobs. I hired a mentor named Uzair, and weekly we checked in with surveys and a video call. Having someone else give me advice and being accountable while completing my survey helped me stay on track and get consistent work done. It also helped to brainstorm with someone else. Uzair was looking for his next application to develop, and we felt that we had something tangible and tested with our check-in and accountability system. This could be used for therapists, students, workplaces, and other spaces where people might need that extra 1:1 interaction. We had an opportunity to test our product in a school and had several teachers interested in our product, so we set our sights on those users first.
USER INTERVIEW HIGHLIGHTS
We interviewed people who worked within child development and education and hold/have held roles within schools.
Teachers are wary of bulky products; they don't want to add way more to their already impacted schedule. This means we must be highly mindful of how our Leader's time is spent and utilized.
Motivating students to be involved is challenging. We must build up simple habits, set alerts, and make a 2-minute survey an easy win. Kids want to feel heard, and having something in place can be powerful.
INITIAL WIREFRAMES
The Product Owner and I laid out some very loose concepts and wireframes to help us visualize features we might start with.
SECOND ITERATION
We pushed to improve the look of our UI. This pass was less focused on UX and more on getting a cleaner look to work with.
THIRD ITERATION
When I started utilizing some of the new designs, I kept iterating and researching, creating prototypes to help find missing pieces. We added role types, cleaned up throughout, and delved deep into how to sort and view each group's check-ins. Viewing check-ins was a complex problem, given that many check-ins from different groups could come in daily from students.
FOURTH ITERATION
Every iteration grew District Zero. Finding the right balance to stay on schedule with Engineering meant working closely with our Product Manager. I was lucky to have an organized and insightful Product Manager and CEO who always helped brainstorm in a design session. We work well together and can reprioritize easily when new information arises.
For newer features that haven't been engineered yet, we pulled back some of the design to be more Ant Design friendly, leaning more on the React library we chose to speed up development. I began by recreating some of the newer UX features and finding the balance of editing the Ant components to be aesthetic but not take too much of the engineer's time.
ADDITIONAL GRAPHICS & PERSONAS
I created a series of personas and graphics to help us connect to our users and better understand the directions in which District Zero could grow. It's easy to see our product in various use cases, but I've learned that the more you hone in on a user type, the more specific your UX can be.
FINAL THOUGHTS
Bringing in UI design and not going design system first is something I would have done differently. Overall with any app, you iterate and adapt, but in an agile environment setting things up for your dev's success is crucial.
District Zero is now focused on adult learners, a much easier group to design given the permissions and security needed with users under 18.
Having an application adopted by users requires setting up an ecosystem that requires usage from the top down. Having a school adopt the program was vital to getting students to use the product. It created a mechanism in which the students had to use the app for their mentorship program.
REBRAND
I was brought back to rebrand District Zero and add a few more features. We wanted a slightly more friendly color palette with a therapy-like feel. Layola Medical School adopted this app up as a mentor/mentee tool to check in with everyone and help improve their program. We pivoted the app, added Layola-specific resources, and made passes with improvements across features. These are actual screens, I would have loved to have more rounds with detailed fixes, but this is a start-up, and they did not have the resources to get it where I would have wanted, but that is the real world of app development sometimes.
