Exit
LUKE MANIMALA
// design

Designing and researching an admin dashboard

context

I designed this dashboard as a conceptual bootcamp project. I conducted user interviews with one other partner, but we each designed a solution.

tools

Adobe XD, Zoom, Forms, Hangouts, Miro, Trello

timeline

4 Weeks

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.

No items found.
Existing wireframes provided by the previous team of designers. First, you’ll see the main dashboard, followed by a detailed view of an individual dashboard metric

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.

A chart showing an x axis from neutral color scheme to bold color scheme, and a y axis from varied layout to ordered layout. On the chart there are many different company logos and a star labeled “Opportunity Space” at the top right quadrant representing a bold color scheme and ordered layout.
A competitive foursquare diagram, showing the competition with regard to color scheme and order of layout.

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.

Glanceable

Admins should be able to quickly scan data and gather insight. Graphics must convey meaning through hierarchy, color, and visual cues whenever possible.

Modular

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.

Actionable

Our users are busy and shouldn’t have to spend time interpolating data. The product should convey actionable insights.

No items found.
The Kid Art mood board, first, served as the primary inspiration for the style tile displayed second, which users responded to most favorably during interviews.

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.

No items found.
The Kid Art mood board, first, served as the primary inspiration for the style tile displayed second, which users responded to most favorably during interviews.

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.

Users perceived the product as professional, calm, creative, but potentially busy and in need of further refinement.

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.

Three scales from 1 to 4. Customizable to Fixed 3.2, Complex to Simple 3.2, Practical to Abstract 1.2.
Users felt the product was simple and practical to use, but they did not perceive the design as being especially customizable.
No items found.

A scalable dashboard solution

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.

Two screens from the final KidConnect design, showing a desktop attendance form and a mobile attendance entry form.

A glanceable and modular dashboard

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.

KidConnect Dashboard overview

Detailed view and affordances

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.

Metric cards could be drilled into for a higher level of information detail

Pattern Library

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.

Style Guide

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.

No items found.
Existing wireframes provided by the previous team of designers. First, you’ll see the main dashboard, followed by a detailed view of an individual dashboard metric
next case study