Bob web | adiklag

Web App for HR and company management

hibob web app

2016-2018

'bob' (hibob.com) is an HR management app for companies.
The app serves multiple personas (admins, managers and employees) and complex organizational structures.

'bob' as a product is focused on user experience and delightful design, making complex tasks like managing hundreds of people's time-off, benefits, payroll - simple and pleasant.

At 'bob', I did product research, UX and UI design.

Loader design

At hibob I worked in the design team collaborating with -
Design team 👩‍💻👨‍💻 ...5 ppl

Product managers 👩‍💻👨‍💻 ...4 ppl
UX researcher 👩‍🔬

BI developer  👩‍💻
Development team: backend and frontend  👩‍💻👨‍💻 ...40+ ppl
Marketing team 👩‍💼👩‍💼👨‍💼

Role
Research
UX Design
UI Design

Prototyping

Tools
Sketch
Invision prototyping

Principle prototyping

After effects prototyping

company surveys

In the effort to keep employees happy and retain them, companies use surveys to learn about their employee's satisfaction. In this project, I was both the product lead and the design lead and collaborated closely with the dev team and an organizational survey expert to plan and design an organizational survey tool.

The goal was to design a survey tool that would give managers useful insights into their employees' satisfaction and also be a great user experience for both the managers and the employees.

Planning, researching and designing the surveys was a huge challenge.

I conducted research, user interviews and user testing with our HR design partners.

Company surveys is a huge feature, including:

A survey builder and templates
Surveys cycles management
The survey form
Results dashboard

MVP design process:

Interview HR admin users to understand what they are using today for surveys, and what they need and want.
Work with a company survey expert for consultation and for survey templates content.
Work closely with the dev team to make sure the feature would integrate with the data and architecture of our existing product.
Map the company survey tools market.
Iterate the UX design.
Finalize UI design.

Defining an MVP - a snapshot from the market map summary:

In black: the most common functionalities of leading survey products

Stared: the most common products our users mentioned using

User testing:

After we could focus on these 3 most common features for the MVP, We shared with HR admins a prototype I designed using InVision and interviewed them as they used it to set up a survey and view it's results.

💡

Top insights:

Being able to group the survey results by employee data would be extremely valuable for managers. we realised this is a huge advantage for our product, as unlike all other survey tools we obtain all the employee data in the background and can use it to show the survey results in context.
Employees are concerned with their privacy when answering company surveys.

Designing for delightful interaction in the employee side

We knew from our interviews that employees don't like answering surveys.
It takes time and effort. It was important to design the survey form on the employee side with simple and pleasant user experience.

I used animated mockups to convey to the dev team the expected behavior of the interaction of questions in the surveys. For example the scale questions mockup:

Mobile web version

Answering these surveys takes time so I wanted to make it as accessible as possible for employees by creating a mobile web version they can answer anytime.

Designing the survey results view:

After researching other survey apps and interviewing our users,we realized that unlike other survey tools, 'bob' has a huge advantage, being also an HR platform that can combine the employee information with survey results.

I designed the results so managers can view them by departments, company sites, gender, etc, and discover insights of their company's strengths and weaknesses.

For example, discovering people are not happy with their direct managers is more useful when viewing by the company site and department, and finding out where exactly management training is needed.

Designing for privacy:

One of the top issues that came up in the user interviews is the employees' privacy concerns.

This is especially challenging as a large percent of the end-users (employees) are engineers, well aware of privacy issues and functionality.

To address this I communicated to users the anonymity aspect of the surveys in the following ways:

1. CTA emphasizing anonymity

2. Eliminating the login to the survey form

3. Use the loading delay to again mention this survey is private

3. Banner at the top of the survey form with link to learn more

performance review

A performance review is a formal assessment in which managers evaluate an employee's work performance, identify strengths and weaknesses, offer feedback, and set goals for future performance.

Bob's performance review feature is an extensive system that includes an admin side for setting up, creating questioner forms, scheduling and sending out the forms to the company, tracking the manager's and employees' progress in answering the review, and finally viewing and analyzing the results.

Designing the review form

After researching how managers fill forms about their employees we realised they need context. I designed the review form to be clean and easy for them to view next to other forms already submitted about the employees: the employee self and peer assessment side by side for comparison.

Employee

being

reviewed

Manager's review

Peer review for context

Designing the talent mapping survey

In this survey, which is part of the performance review, employees and managers are asked to flag the top-performing and most helpful employees in the company, to help understand who the key employees are. I wanted to create an interaction that would feel like 'selecting people', as appose to answering a regular survey question. The people are represented by images you can click to select. These create a visual group of your selection at the top.

Designing the talent mapping results view

Because the talent mapping is all about organizing your people in groups by their personality and strengths, I wanted to display the results as actual people arranged in groups. I created a sort of storyboard to quickly demonstrate my design concept of how the elements on the screen move around, and how the people get arranged in 3 views you can drill into:

- The groups as circles of people.

- Click on a group to go 'inside' it and see more information.

- Click to see the people in the group arranged by diversity stats.

1/4

Designing the process tracking tool

HR and managers keep track of the company/team evaluation process as it comes along. I wanted to create a view where they could see the progress of teams while being able to dive into a specific employee without losing their orientation. I designed a floating employee card they can popup by clicking on a specific person.

Viewing the results: Employee timeline

The Employee Timeline was designed to give the performance review results context and to help HR better understand the employee journey in the company. The TimelIne displays all the employee changes and reviews results.

Designing the timeline interactions, event grouping and comparisons

The main challenge of designing the timeline was that it had to be able to contain any type of employee events, and any type of time range view. I designed different possible states:

- Multiple events in one date

- Time zoom in/out

- Group events in time increments (5 events on the same day/week/month...)

- Comparison: the point of the timeline is being able to compare the employee's reviews and work changes over time, so I designed a comparison mode, where it's possible to view multiple reviews at the same time.

1/5

Timeline event grouping

Example of how a single, double, and multiple events look like when they occur at the same time frame in the timeline:

Timeline events interactions and time frames

The future is marked as a dotted line

Event color coding: Performance reviews are marked with a different color

On hover, the UI changes and the event opens halfway to give a preview.

Multiple events at the same time spot

Time zoom/out, jump up/down

employee attendance

The goal in this project was to design a way to view people's attendance behavior as patterns, so Managers can keep track of people's attendance as a whole but also drill down to view specific people departments, sites etc. This is an animated mockup I designed of the expected behavior. I used it to show the product and dev team before the actual implementation.