Host Management Dashboard
Women Who Code, Silicon Valley
Enabling host management team members with the tools to manage data.
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.
Feature Requirements
Problem
Interviewing host management team members revealed the following problems;
The cumbersome process of managing company host information.
Lack of multi-search/filtering and sorting data.
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
Paper Sketches
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.
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.
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.
Final Design
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.
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 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 bar components
'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.