Chapter Tools

Designing a dashboard for Tech Event Mentors

Overview

PRODUCT:

The Silicon Valley chapter of the Women Who Code organization is developing Chapter Tools to serve as an online repository for its members. Chapter Tools will help members manage its internal teams.

PROBLEM:

The Tech Event Team does not have any way of identifying members that are Tech Event Mentors.

GOAL:

Design a dashboard that will enable the Tech Event Team to manage mentor data.

ROLE & RESPONSIBILITIES:

UX designer responsible for interaction design, prototyping, and design iteration.

DURATION:

2 months 

VIEW PROTOTYPE

Understanding the Feature

Before designing the dashboard for Tech Event Mentors, it was important that I had a full understanding of the feature. To gain this understanding, I reviewed the feature stories for Tech Event Mentors and clarified any discrepancies with the product team. I also reviewed related completed feature stories and noted any similarities. 

The feature stories contained descriptions and acceptance criteria that were key to my designing.

Tech Event Mentors Feature Stories

View Tech Event Mentors Feature Story

Starting the Design

Maintaining consistent navigation throughout the Chapter Tools web application would improve the user experience. Therefore, I made sure to follow the information architecture of already implemented features when creating the sitemap for the Tech Event Mentors dashboard.

Sitemap

To expand upon the site map, I created a user flow diagram. The diagram provided me with a detailed visualization on all the possible ways members might interact with the Tech Event Mentors dashboard.

User Flow Diagram

Next, I sketched out paper wireframes for each page of the Tech Event Mentors dashboard, keeping in mind the feature story description and acceptance criteria. Since members will access Chapter Tools across a variety of devices, I designed a desktop and mobile version for each page.

Desktop and Mobile Paper Wireframes

Developing the Design

I began creating mockups and high-fidelity prototypes in Figma, following the design guidelines and patterns established in the Chapter Tools design system. My designs then underwent a design review by the design team.

Based off feedback from the product team and engineers, multiple design iterations were needed. Additionally, usability testing revealed any faulty interactions.

Design Iteration

With the search and sort components, splitting the name field into first and last name is more logical.

After addressing feedback, I finalized the designs and prepared them for engineering handoff.

View Tech Event Mentors

Tech Event Team members can view all of the Tech Event Mentors.

Add Tech Event Mentor

Tech Event Team members can add a new mentor.

Edit Tech Event Mentor

Tech Event Team members can edit an existing mentor.

Delete Tech Event Mentor

Tech Event Team members can delete an existing mentor.

Mobile Mockups GIF 

Conclusion

The Tech Event Mentors dashboard was a much needed feature for the Tech Event Team. The dashboard provides the team with the basic functionality needed to manage its mentors and is a key feature in the Chapter Tools core release. As the usage of Chapter Tools grows, there will likely be a need for feature enhancements/requests based on user needs.