My team of two was tasked to iterate on the visual and improve the UX of the admin side of this platform. There are many products on the market that track student metrics for childcare companies, but this platform was unique in allowing kids to connect with the programs, which gave admins large data sets to inform their marketing decisions.
We received a number of design and research documents at project kickoff, including a set of low-fidelity PDF wireframes which we continued to develop into high fidelity prototypes through usability research and testing.
This project occurred over a four week period, with the agile framework and Atomic Design methodology throughout. Atomic design is a UI design paradigm that maintains the importance of centralized and reproducible UI elements. I focused on producing as few components as possible, and building in lean reusability in the overall system. We began with discovery research, did several rounds of usability testing, and implemented the research into a high fidelity dashboard prototype.
We looked inside and out of the educational domain and produced a foursquare diagram to visualize the relationships between orderly layout and color scheme.
We found that dashboard products with a precise and orderly layout made the content easily scannable. They also typically reserved color to convey meaning in the numbers. Products in the educational space, however, often used bold color schemes in their brand identity. We targeted an opportunity space for bold brand coloring with an attention to layout order.
We interviewed potential users to establish a persona which we could empathize with throughout the project. Some metrics that these admins cared about were recruitment, retention, & engagement in participants. They also needed to track attendance, retention, and satisfaction of enrolled students to ensure program effectiveness. Meet Keisha:
“If we see that attendance is dipping we'll throw an event which will give us an opportunity to reach out to parents and say we've missed you”
We synthesized our interview research into design principles that we could use as success metrics for of our designs.
Admins should be able to quickly scan data and gather insight. Graphics must convey meaning through hierarchy, color, and visual cues whenever possible.
Every admin has a slightly different set of metrics and visualizations that are important to them. The solution must be modular in order to permit user customization.
Our users are busy and shouldn’t have to spend time interpolating data. The product should convey actionable insights.
To determine a suitable visual design direction for our users, we each designed three mood boards and style tiles each to present to users in interview. Out of the three I designed, users responded most favorably to the Kid Art style tile, a concept generated through the mood of playful kid fun and art.
After establishing a visual direction, we began to focus our efforts on usability research. To test the UX, we interviewed a 10 users, including 6 educational professionals and 4 users that use dashboard visualization programs in their daily work.
Using think out loud protocol, we tested for user vernacular regarding the main navigation and rename a number of nav labels accordingly. We also checked for understanding and accessibility of the existing graph visualization, which relied on color to indicate and label metrics. We found that users preferred bar graphs over line graphs for the data sets being displayed.
“I shouldn’t be deciphering the chart, the data should just explain itself”
The existing graph module caused users to ask claifying questions with regard to the information being displayed. One user, Amy, went as far to say, “I shouldn’t be deciphering the chart, the data should just explain itself”. We had to find a way to make the data tell a story.
At the end of each interview, we did one of two quantitative testing techniques to asses our designs. The first was a word association test where we displayed an array of adjectives and asked users to select 2-3 words that they would associate with the product experience.
We also asked users to rate their experience on three semantic scales which we designed to reflect the design principles we established for the project.
Through the completion of the project, I maintained a single symbolically referenced prototype that included a pattern library, and style guide. Because of this, changes were global and I was able to quickly generate the following deliverables from which a developer could build.
I created several glanceable and modular visualizations that users could arrange into custom layouts and arrangements. I made a basic variable card, a calendar visualization, a simple percentage view, and a goal module. Users would be able to create a custom board with these modules.
I created a detailed view for each of the metrics that could be tracked on the dashboard so a user could click into any card to see an array form of the data. To help with affordance, I added a hover state to make the navigation obvious.
I created a pattern library that contains all UI components, modules, and typographic elements. This also includes all information regarding element interaction, page layout, grid, and site navigation.
Finally, I designed a style guide which included plain english descriptions about branding, brand color, logo usage, and typography. The style guide gives direction on voice and tone as well as general usage surrounding the KidConnect visual identity.