Host Management Dashboard

Women Who Code, Silicon Valley

Enabling host management team members with the tools to manage data.

dashboard.gif
 

Overview

Background
Problem
Process
Role:

UX Designer

Chapter Tools portal acts as a central repository of information about the events, hosts, and volunteers. It is being created to empower the volunteers by providing easy access to information, reducing manual tasks, and helping with the seamless onboarding of new volunteers.

How might we enable the host management team members to easily view and manage their host's data and perform actions on it?

Research, Ideation, Design, Testing

Duration:

2 months

Platform:

Web

The Team

Product Stakeholder - provided the feature requirements.

Product Managers - provided a detailed feature scope on the Acceptance Criteria (A/C) of the user story.

UX Designers - reviewed and provided feedback on the designs. 

Team.png
TeamHorizontal.png

Feature Requirements

FeatureRequirements.png

Problem

Interviewing host management team members revealed the following problems;

problem-1.png

The cumbersome process of managing company host information.

problem-2.png

Lack of multi-search/filtering and sorting data.

problem-3.png

Lack of extra levels of confirmation while deleting data.

Project Goals:

Increase productivity and performance of the users by helping them to:

  • Browse through multiple host companies at once.

  • Determine and commit actions quickly.

  • Allow searching and sorting.

  • Give users control over when the changes affect them.

Acceptance Criteria

Screen Shot 2021-08-28 at 11.49.56 AM.png

Paper Sketches

drawing-1.jpg
drawing-2.jpg
Drawing-3.jpg
 

Design Iterations

First Draft

This table was going to be WWCodes the first data table. Luckily, I was able to utilize material design icons and previously designed components like buttons and page header to get started.

1stDraft-ChapterMembers.png
Second Draft

After receiving feedback from the other designers on my team, I decided to implement an accordion that hides the other contact information. The user will be able to view more information when they clicked on the expand icon. This iteration helped to display more rows per page on the data table.

2nd-Draft-ChapterMembers.png
Third Draft

The stakeholder's reviewed the designs and mentioned that the users in the past did not have to use the bulk actions to edit or delete data. Edit action had to be performed individually for each host company. 

3rdDraft-ChapterMembers.png
Final Design
3rdViewPage-ChapterMembers.png

Search Bar and Sorting Integration

First Draft

From my collaborative meetings with the Product Manager and 1 Engineer, I learned that the search parameter must be sent from the client to the server.

SearchSort-ChapterMembers.png
Final Design

Having users enter the search terms in different columns would require them to think. A colleague of mine provided valuable feedback to implement something similar to the search bar on the chat apps. I was able to incorporate and improvise the feedback to suit the needs of this project. 

search-Final.png
Search Results

We incorporated a multi-search option to meet the user's needs. An auto-suggest dropdown would appear after typing the first 3 letters of the search term. The search text across columns are ANDed.

search-results.png

Search bar components

SearchBarComponents.png

'Add', 'Edit', and 'Delete' host's data

The 'Add', 'Edit', and 'Delete' features that are shown in the gif above were incorporated by reusing components designed for other prototypes.

Conclusion

The users were able to complete all tasks during usability testing. The features were well received. It resulted in new visual styles and UX patterns that directly impacted many other user stories that required data tables. ​