(01)

Lead Product Designer

Animator

16 Weeks

HR Tech

UX Research

B2B

Diversio is a B2B technology company specialising in diversity, inclusive hiring, and equity in the workplace. During my time at Diversio I conceptualised, prototyped and animated Lumi, a tool that forms part of the Diversio web app dashboard. Lumi is an AI product that rewrites your job posts more inclusively to attract a more diverse range of candidates.

Diversio is a B2B technology company specialising in diversity, inclusive hiring, and equity in the workplace. During my time at Diversio I conceptualised, prototyped and animated Lumi, a tool that forms part of the Diversio web app dashboard. Lumi is an AI product that rewrites your job posts more inclusively to attract a more diverse range of candidates.

(The Problem)

Diversio's business model is changing from pure consultancy to also providing the solutions to clients' DEI problems their consultancy identifies.
As part of this model, they want to create an AI tool that helps clients improve diversity of candidates applying for their jobs, by rewriting their job posts into more inclusive language.

(The Goal)

Improving the inclusive language of your job posts can lead to an increase in job posts views and applications, along with a corresponding increase in the diversity of applicants.

View prototype

Design

Getting to grips with the project's design parameters

Lumi was designed to be a flagship product of the Solutions part of the Diversio dashboard. As such it was important to prioritise not just functionality, but also aesthetic choices such as animating the Diversio logo and creating the DEI tips and tricks slideshow during the 'transforming your documents' loading page.

After we defined the main flow, it was time to step back and see how it all fits into the big picture. The navigation was designed so that all the main steps are easily accessible as tabs on a single screen.

The MoSCoW prioritisation, evaluating each potential feature of the app.

(Must Have)

Drag and drop upload
Input text upload
View previous uploaded files
DEI tips and tricks slide show

(Should Have)

Detailed uploads history page
Work-in-progress warning on exit

(Could Have)

Score your job ads between 1-100 for content, engagement, accessibility.
Search for a file on your computer upload

Defining the main user flow:

Features

Creating the Lumi Avatar Toolbar to guide the process

Lumi is the AI tool avatar, and he is intended to guide the user through the process of rewriting jobs via a toolbar at the top of the page.

I was tasked with animating Lumi as he guides the user through the job post process in the taskbar.

I animated these clips in After Effects before converting them to Lottie files for engineering to incorporate into the project.

Lumi is the AI tool avatar, and he is intended to guide the user through the process of rewriting jobs via a toolbar at the top of the page.

I was tasked with animating Lumi as he guides the user through the job post process in the taskbar.

I animated these clips in After Effects before converting them to Lottie files for engineering to incorporate into the project.

Evaluation

Gauging our progress with usability testing

We circulated the prototype amongst the Diversio Sales team, who have an accurate finger on the pulse of what a user would require from the app. In particular we wanted to find out:

Was the user flow clear from start to finish?
Was the 'switch input' functionality easy to understand?
Were Lumi's instructions helpful and readable?
General comments and feedback.

We circulated the prototype amongst the Diversio Sales team, who have an accurate finger on the pulse of what a user would require from the app. In particular we wanted to find out:

Was the user flow clear from start to finish?
Was the 'switch input' functionality easy to understand?
Were Lumi's instructions helpful and readable?
General comments and feedback.

Results from the round of usability testing:

(01)

100% of users were able to complete the user flow without encountering issues.

(02)

100% found the 'switch input method' intuitive and easy to understand

(03)

Users loved Lumi.

(04)

The Lumi text animation didn't stay on screen long enough for readibility.

Adjusting the Lumi toolbar text animation for readability:

(01)

From this (less readable)…

(02)

…To this (increased readability)

The Final Prototype

Multiple Input Methods

Choose between Drag- and- dropping your files into the tool, or input text directly and add to queue. You can even switch between the two methods and Lumi will update the queue accordingly.

Multiple Input Methods

Choose between Drag- and- dropping your files into the tool, or input text directly and add to queue. You can even switch between the two methods and Lumi will update the queue accordingly.

Learning Outcomes

This project placed a huge emphasis on collaboration with the Diversio engineering team. Thorough documentation was crucial to ensure that engineering had a precise understanding of what they were creating. Since animation played such a large part in this project, we had to take particular care that the Lottie files were all accurately documented in order with instructions of where each should go.

Got something for me? Let's have a chat.

(contact me)

stanklerdaniel@gmail.com

07791.416.973

(follow me)

Instagram

dsds

Work

About

Contact

animations

by dan