I designed a conceptual dashboard app for a web platform on which kids would be able to find extracurricular after school programs, and programs could manage their campus and marketing efforts.

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.

Existing Wireframe Assets

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.

Process

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.

Carving an opportunity space

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.

Creating a user persona

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:

Keisha

Characteristics

• Program director for a Chicago non-profit
• Manages a small portfolio of programs around the city
• Partially funded by donations and non-profit grants

Goals

• Maximize enrollment growth, attendance rates, and student retention
• Establish new relationships with schools and corporate sponsors
• Allocate resources for outreach to communities in need

Challenges

• Finding and retaining new students
• Conveying program and student success to donors
• Having an informed growth strategy with the limited data she keeps
  

“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”

Creating design principles to guide our process

We synthesized our interview research into design principles that we could use as success metrics for of our designs.

Establishing a visual direction

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.

Iterating and testing for usability

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.

Quantifying our efforts

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.