Diversity Dashboard

The project is about displaying progress through a dashboard with the goal of raising awareness of anti-racism and inclusivity across the school.

My role

I was involved from the start to finish of the project as a designer and a project manager – leading bi-weekly meetings with the clients to share our progress and coordinating with engineers. I led two of the four usability tests and initiated key design decisions.

Solution

With a goal to raise awareness of anti-racism and inclusivity, the D+I committee has organized anti-racism action plans into Google spreadsheets, but users have difficulty navigating through and seeing the progress.

Challenge

This was our client’s first UX project so, our team had to clearly communicate the process and our ideas. Other challenges include:

Prioritizing information
Consolidating the stakeholder’s responses

Diversity Dashboard - Simplified the action plan’s qualitative data into an effective layout that clearly delivers an intended message.

Measure of Success

Task Success
Happiness
Engagement

Outcome & Impact

Diversity Dashboard project has the potential to inspire aspiring designers to acknowledge and address inequalities and issues of race and inequality in the design of physical spaces.

7 clicks

2 clicks

Problem

DISCOVERY

Understanding the initial data and target users

To kick off, we had conversations with the D+I committee members, who are also our key users and made up of a total of 10-15 faculties and students) to better understand how their action plans were sorted. To clarify, the Action Plans are for the Architecture School.

Currently, the action plans are organized on a Google spreadsheet:

Below is one of the 200 action plans on the school’s current Anti-racism action plan excel spreadsheet. The key problems we found:

Users have to click and scroll more than necessary making hard for them to scan information

Limited filter options. Actions are sectioned only by their categories (found on the tabs at the bottom).

An example of the initial action plans

Along with this, to understand the needs, pain points, and behaviors of the target users and the context of the dashboard, we analyzed and defined two types of target users based on the conversation and individual interviews with 2 students and 3 faculty from the Architecture school.

Our target users want to be able to quickly scan the action plans with the freedom to filter information by their departments.

Screen Shot 2022-02-03 at 11.46.50 PM.png

Screen Shot 2022-02-03 at 11.46.42 PM.png

With the problems users were having with the initial spreadsheets, our target users needs, and the client’s intent,

How might we simplify the action plan’s qualitative data into an effective layout that clearly tells an intended message?

FURTHER UNDERSTANDING

Structuring Information to familiarize with existing data

In order to explore different ways of sorting data on the spreadsheets, I recommended our team start laying out the information architecture of the spreadsheets.

I focused on different ways to filter information and added an overview of the completed action timeline for users to quickly view the progress of how the Architecture school is doing.

It was important for us to show the visualization of the info arch to our clients to best communicate our ideas because they had never seen an info arch layout before. So showing the visualized version made receiving feedback much easier and smoother.

Screen Shot 2022-02-04 at 12.20.20 AM.png

Information Architecture and its visualization

IDEATE

Exploring Different Layout

With some of the insights from the interviews with our clients and our analysis of the data and we found out that it was natural for users to look for action items about the program, they are in – whether they are associated with architecture, landscape, or urban planning.

The most important filters were the program (that is in charge of the actions), status (whether it’s been completed, ongoing, or not started), and the 7 categories. Having these multi-way filters allowed users to easily navigate through action items per their needs. With these findings, we continue to explore different designs to an effective layout that clearly tells an intended message.

Screen Shot 2022-02-04 at 12.20.28 AM.png

Information Architecture and its visualization

ITERATE

Key Design Decisions

01 Action Item Layout & Accessibility

Very early on when exploring, usability testing revealed that each action information on a rectangle card is hard to read further across the page, so I suggested creating squared boxes with more concise information, which improved navigation overall.

02 Re-evaluating Status of Action Plans

Through conversations with the clients and based on their initial spreadsheet (shown on the right), the committee had set qualitative criteria to convey the status of their action items; completed, ongoing, and not started. I thought these labels were unclear and did not fully convey their true status. Some action plans might be a forever ongoing plan.

During the design phase, we depicted these status criteria through the shown pie chart and completed items list. I brought up the unclear nature and potential insensitivity of the word, “completed” and “ongoing” status. Because even though some action plans might be completed this year, they will be ongoing next year. The clients agreed and decided not to include the completed items list in the final design.

Initial action plan spreadsheet

03 Streamlining Action Details

Through user testing, we found out that having a separate action detail page slowed down users’ interactions. To reduce the number of clicking back and forth between action detail and the home page, I suggested having a modal to quickly view the details on the same page. This streamlined the user flow and navigation, allowing users to view more plan details in a shorter time.

Using Existing Design Spec for Consistency

I generated the colors and fonts types from the current architecture website for consistency since our users would be coming from it.

Going back to the overall go raising inclusion and diversity - we also considered accessibility and readability. We decided on these fonts and colors below. For some of the colors that each school program was already associated with per the school’s website, I suggested changing the color slightly to increase the contrast with the background.

Screen Shot 2022-02-04 at 12.39.28 AM.png

Final Design

Link to the final prototype

Lessons & Next Steps

This was a successful project. Our clients were very happy with this outcome. We are very close to launching this dashboard!

Flexible approach to unexpected challenges
- Due to the constantly changing scope, as a manager, I took the initiative to keep the schedule updated and coordinate with the clients effectively. Thankfully with my past project management experience in an architecture firm, I was able to spearhead and prepare for meetings better, while keeping the whole team at peace as well.

Importance of effective communication
- It’s important to maintain a consistent and clear line of communication with the clients. Making sure the clients understand what and why specific decisions are made is crucial to maintaining an effective and generative relationship.

Next Step:
- Measure UX success via user satisfaction rating and survey

Continue