I worked on a team with one other designer to design an application for after school programs. The product is a dual-sided system which connects youth to various after school programs, all while allowing admins of these programs to track the recruitment, engagement, and retention of their participants.
Our team was in charge of the visual design of the Administrative side of the application. We were provided black and white UX wireframes which we eventually transformed into a visually appealing and useful dashboard.
User Persona
Timeline
My teammate and I conducted a competitive analysis with two goals in mind:
• To see how after school programs brand themselves, since our platform has a similar mission to connect youth with after school programs.
• To gather some more inspiration from out-of-industry sites that had strong data visualization sites.
Four Square
We mapped out all players on a four square to see how we could provide a unique experience. We chose the metrics layout and color scheme, based on what trends are important to creating successful dashboards. Companies paid careful attention to their layouts in order to keep their dashboards organized, and were purposeful with color to help visualize important data.
We saw an opportunity for our brand to have an ordered layout like salesforce and robinhood, while having a bold color scheme associated with youth and after school programs.
We used our primary research and preliminary user interviews to craft three design principles to guide us through the rest of the design process.
Glanceable
Encourage the quick comprehension of data through charts, organization, and meaningful colors and iconography.
ModularPieces may be taken apart or put together. This allows for personalization to suit various needs.
Actionable
Provide clear and useful actions for our users to take. Our users are busy, and we aim to make their lives easier.
I took the preliminary research to create three very different design directions to test with our sourced users. I first gathered loose inspiration into three moodboards, which I then converted into three style tiles that could inform the designs of later screens. I aimed to find a design that communicated the strong mission of developing youth, while fulfilling the desire of the admin to be productive.
This style was inspired by kids’ arts and crafts, and celebrates the idea that kids are a “blank canvas” with boundless possibilities to create their own life.
This style was inspired by natural plants in office spaces and schools which help foster a nurturing environment for kids to develop and for business ideas to grow. Plants symbolize the guidance and mentorship of youth and remind the user of the meaningful job they have working for an After School Program.
This style was inspired by clay and coffee to symbolize the moldability of youth and the productivity of the professional world. This style solves the user problem of lacking efficiency by giving them an energetic burst of coffee and balanced with a calming teal.
My partner and I conducted desirability testing on all style tiles to help us each pick the strongest design directions.
In each interview we gathered gut reactions on each style tile. Then, we showed all six directions and asked the user to rank them from most preferred to least preferred. After all interviews, my partner and I wrote out interview findings on post-it notes. We performed an affinity diagramming exercise, in which we organized the post-it notes to find recurring themes.
We found a number of interesting takeaways:
• Users were split on preferring light or dark screens
• Red, green, or blue often associated with positive or negative data trends
• Users responded well to labeled radial charts
• Users that worked closely with youth preferred bold, primary colors
Although all design directions received positive feedback, I decided to move forward with style 1 because:
• It tested best among the closest target users, who work in the education space.
• After further research on white versus dark modes in the data space, I learned that white screens are better in day-time.
• I saw an opportunity for the red, blue, and yellow to act as positive/negative data indicators.
Before we began designing high fidelity screens, we conducted an analysis of the wireframes provided to us by a previous UX team in order to understand how the application was meant to function. We found that some of the labeling was unclear and we were not sure where some pages should go. However, we trusted our UX team which had already tested the current product. We decided we would test this structure with an added layer of our visual style with our users.
In this round of interviews, we were interested in learning about both the visual presence and the perceived usability of the product. We asked for gut reactions on the visuals to get a feel for if our brand was successful. We then asked the user where they expected pages to go or how they expected elements to behave in order to see if the current UX was successful. We saw that our instincts were correct, as users brought up a few UX pain points they had with the current structure.
Based on this feedback, we knew no amount of fancy images or color would fix these structural issues. We knew we had to revisit the UX and overhaul the site’s navigation, while making the information architecture and labeling more intuitive.
We noted that the old site map did not have any user flows built out for its primary navigation, which consisted of tasks users considered low priority, such as messaging.
In order to make our product more focused on the user’s primary actions, we collapsed the two navigations into one simpler navigation. We took the notes from the first round of interviews and listed out all the content in the current product. After some long discussions, we were able to remove duplicate content and transform remaining content to serve the user better. Afterwards, we felt confident to develop high-fidelity screens with the following structure.
We were now able to focus fully on the visual language of the product. We conducted another round of usability testing, in which the product performed much better. During this round, we received some more interesting insights:
One Metric at Time
User wants to see individual goals to process information and next steps easier.
“I shouldn’t have to decipher the data, the data should explain itself” - Aly, Digital Dashboard Specialist
Attendance
We learned from the teachers and after school program admins that attendance is the number one metric they care about, as it drives demand for the entire program. When attendance drops, they want to be able to reach out to the participant and see what’s going on.
After one more minor iteration, I presented the following high-fidelity screens and final prototype.
Overview
The homepage of the dashboard is customizable in the sense that users may add in, move, or remove cards to keep track of their most important goals. This page provides flexibility to all after school agencies which have their own unique set of challenges. Each card can also be clicked on to see a more detailed page or to reveal certain actions.
Attendance
The attendance page is the most important page for most companies since attendance is what gives demand for these programs.
Attendance List
Once the user has clicked on the “Absent Card”, they are able to see and interact with a full attendance list.
Student Detail
The student detail page allows the admin to see specific details and attendance trends for one participant. Here the user can mark absences as excused, contact the student, and add a note.
This signature microinteraction is to be used on sign on screens or when the user accomplishes a goal.
Since an important part of this aspect was customization, I created a microinteraction to show how customization of the overview page would work.
I created a Style Guide to capture all of the designs, branding, and patterns I created for the product to give to other stakeholders.
During this project I expanded upon some important skills, including how to:
• work on a team and stand up for my design decisions.
• conduct favorability, hybrid, and usability testing.
• successfully design a data visualization tool or dashboard.
See Next Case Study
Solar Fit
