(02)
(02)
(02)
Lead Product Designer
Lead Product Designer
Lead Product Designer
2 Weeks
2 Weeks
2 Weeks
HR Tech
HR Tech
HR Tech
UX Research
UX Research
UX Research
B2B
B2B
B2B
Diversio is a B2B technology company specialising in diversity, inclusive hiring, and equity in the workplace. I was tasked with redesigning and optimising their "Tools" screen to increase functionality and better align with the rest of the Diversio dashboard.
Diversio is a B2B technology company specialising in diversity, inclusive hiring, and equity in the workplace. I was tasked with redesigning and optimising their "Tools" screen to increase functionality and better align with the rest of the Diversio dashboard.
(The Problem)
(The Problem)
The Diversio Tools screen was intended to be the place clients can access online resources. It was created several years ago, and the scope of the dashboard has since developed in both design and functionality to such an extent that Tools is outdated.
(The Goal)
(The Goal)
Ensure that Tools is aesthetically aligned with the rest of the Diversio dashboard.
Optimise Tools so that users are more aware of and have access to the full range of Diversio resources available.
All whilst streamlining the Design System to use fewer, more customisable components.
View prototype
View prototype
View prototype
1
1
1
Research
Research
Analysing user behaviours via Mixpanel data + user interviews
Mixpanel data showed traffic to the page was significantly lower than desirable, and clicks to any links on the page even worse.
We then moved onto interviewing 5 Diversio users to gain insights into their motivations and pain points when using the Tools page.
Mixpanel data showed traffic to the page was significantly lower than desirable, and clicks to any links on the page even worse.
We then moved onto interviewing 5 Diversio users to gain insights into their motivations and pain points when using the Tools page.
Initial Mixpanel and user research findings:
Initial Mixpanel and user research findings:
(01)
3 of the 5 users thought that the Tools page would explain to them how to use the dashboard.
(02)
"Tools" is a confusing title for the screen.
(03)
Mixpanel data showed clicks into the screen were considerably below the desirable level.
(04)
4 of the 5 users were unaware of the existence of Diversio resources accessed by this screen.
Key takeaways were:
Key takeaways were:
(01)
The name "Tools" is detering users from clicking on the screen. "Resources" might better suit the screen's purpose
(02)
Users are largely unaware of the breadth of Diversio resources available to them.
(01)
The name "Tools" is detering users from clicking on the screen. "Resources" might better suit the screen's purpose
(02)
Users are largely unaware of the breadth of Diversio resources available to them.
(01)
The name "Tools" is detering users from clicking on the screen. "Resources" might better suit the screen's purpose
(02)
Users are largely unaware of the breadth of Diversio resources available to them.
2
2
2
Design
Design
Adding new functionality to the Nav Bar
To enable users to search for the full scope of resources Diversio provides, we needed to redesign the Nav Bar.
So we added the option to Search by key words, as well as Filter by resource type.
A high priority was to keep the number of components as low as possible. To that end, the Nav Bar can now be adapted into other components across the Diversio dashboard using Boolean properties.
To enable users to search for the full scope of resources Diversio provides, we needed to redesign the Nav Bar.
So we added the option to Search by key words, as well as Filter by resource type.
A high priority was to keep the number of components as low as possible. To that end, the Nav Bar can now be adapted into other components across the Diversio dashboard using Boolean properties.
Multiple Nav Bars: the same component, customised with Booleans.
Multiple Nav Bars: the same component, customised with Booleans.
The skeleton loading card
The Filter feature on the side panel raised a question — how do we update the resources while categories are being selected?
I created a skeleton loading state variant of the card component to replace the existing cards while the user narrowed their search.
The Filter feature on the side panel raised a question — how do we update the resources while categories are being selected?
I created a skeleton loading state variant of the card component to replace the existing cards while the user narrowed their search.
The skeleton loader is a variant of the card component.
Reusable components
The original Tools screen featured numerous components that are one-of-a-kind, despite having similar components in the design system, creating bloat.
I decided to ensure all Resources components are instead adapted from pre-existing components.
The original Tools screen featured numerous components that are one-of-a-kind, despite having similar components in the design system, creating bloat.
I decided to ensure all Resources components are instead adapted from pre-existing components.
The "Tools" to "Resources" redesign, before and after.
The "Tools" to "Resources" redesign, before and after.
3
3
3
Evaluation
Evaluation
How do we measure the results of the redesign?
How do we measure the results of the redesign?
A/B testing and Mixpanel tracking determined a significant uptick in clicks to the Resources screen by users who were given the updated Resources screen; and a similar uptick in clicks to blogs, trainings, templates and other resources via the page.
A/B testing and Mixpanel tracking determined a significant uptick in clicks to the Resources screen by users who were given the updated Resources screen; and a similar uptick in clicks to blogs, trainings, templates and other resources via the page.
A/B Testing and Mixpanel data results:
A/B Testing and Mixpanel data results:
(01)
(01)
24% increase in the number of clicks into Resources page itself
24% increase in the number of clicks into Resources page itself
(02)
(02)
17% increase in the number of clicks through to the Diversio resources accessed within the page
17% increase in the number of clicks through to the Diversio resources accessed within the page
4
The Final Prototype
The Final Prototype
Skeleton loading states
As the user selects new categories of resources from the Filter section of the Nav Bar, cards are replaced with skeleton loading cards. These are a variant of the original component card and animate from lighter to darker while the user makes their choice.
Skeleton loading states
As the user selects new categories of resources from the Filter section of the Nav Bar, cards are replaced with skeleton loading cards. These are a variant of the original component card and animate from lighter to darker while the user makes their choice.
5
5
5
Learning Outcomes
Learning Outcomes
This project reaffirmed to me the need for an optimised, streamlined design system. Over time (and especially in a smaller, start-up style company where product roll-outs are rapid but with fewer resources at their disposal to monitor their evolution) design systems can grow bloated, often with multiple versions of similar components exist and many of them are redundant. The use of Boolean properties is invaluable here for ensuring that components remain future-proof and able to be adapted for each new feature rollout.
This project reaffirmed to me the need for an optimised, streamlined design system. Over time (and especially in a smaller, start-up style company where product roll-outs are rapid but with fewer resources at their disposal to monitor their evolution) design systems can grow bloated, often with multiple versions of similar components exist and many of them are redundant. The use of Boolean properties is invaluable here for ensuring that components remain future-proof and able to be adapted for each new feature rollout.