Climbing to success: Davala onboarding app

This project was part of my UX/UI Bootcamp at Ironhack Barcelona. The requirement was to launch a software as a service (SaaS) desktop web app for companies to use internally for their onboarding process of new hires.

Overview

Looking for the right candidates and hiring them is not the end of the story. The process of transitioning an employee from a“newbie” to a veteran is crucial not just for productivity, but for building a company culture. Given the abundance of information nowadays, how you onboard new employees is more important than ever. Poor onboarding practices are costing businesses millions.

• 22% of new hires quit their new job during the first 45 days. (it cost between $3K- $18K to replace quitters.)
• 33% of new hires start searching for a new job after the first 6 months.
• Employee retention is the number one issue on the minds of CEOs today

The exit of new hires is explained by the fact that some organizations are not investing enough resources in the onboarding process. An effective onboarding experience should be strategic, well structured, connected to the employee’s career within a company, and designed with specific outcomes in mind. The right onboarding process and experience is a determining factor in how employees establish an important connection with a business.

Almost 70% of employees are more likely to stay with a company for at least three years after a great onboarding experience.

Nowadays, a structured onboarding program is crucial to retaining top talent.

My Role: UX /UI Designer
Duration: 10 days| Individual Design Project
Tools and Methods: Preliminary Interviews, Affinity Mapping, Interviews, Brainstorming, Paper Prototype, Wireframes, Interactive Prototype, Figma

Research

My goal was to learn about HR-related processes. For a good understanding of the challenge, I did a total of 12 interviews with people in different roles such as HR, managers, and employees that recently joined their organizations. I selected different kinds of companies from tech, retail, and pharmaceutical sectors with a minimum of 200 employees.

I clustered my findings into 3 categories to synthesize the needs and pain points of each role in the following equation.

Affinity diagram

HR needs:

• Gather all the documents needed to proceed with the hiring process
• Organize onboarding, and follow up with the new hire
• Send reminders to managers about important milestones related to new hires
• Retain talent

Manager needs:

• Make the process less tedious and time-consuming
• Make sure a new hire joins the team on time
• Request hardware and software for a new hire
• Make the new hire productive as soon as possible

New hire needs:

• Have information beforehand about the new job and location
• Retain a lot of information during the first days
• Have all the information clear and easy to access
• Stay engaged and motivated

Benchmarking

I did some competitive analysis in order to understand better the features that they offer. I examined several websites to identify common features and looked for features that my design should have.

Comparison table

My main takeaways are:

• The majority of them are complex and generic software with a lot of features.
• Sapling will be my main competitor since it is focused on onboarding processes.

Problem statement

New Hire problem statement

New hires that come from abroad need to have all the information beforehand so they can be less stressed, more focused and more productive since the beginning.

HR problem statement

HR managers need to spend their time wisely, so the new hires can be more efficient in their job.

Personas

Meet Maya Neira, Maya is a 27- years-old Retail Designer from Berlin. “If we were meant to stay in one place, we’d have roots instead of feet”.

Since she studied architecture and discovered Gaudi’s legacy, living in Barcelona was one of her dreams. She wanted to have a chance to live there and experience the city’s cultural heritage.

That day has finally come. Maya has been selected to work in a corporate company named Polaris as a Retail Designer. She is very excited. She already signed the contract and agreed to start her adventure in 2 weeks.

Although she is very enthusiastic, she is a bit stressed out about her relocation and finding an apartment. She has no idea where to start looking. She is also concerned about the ‘culture shock’ that people sometimes talk about. She wants to be focused, have a smooth transition to her new job and make a good impression on her new boss since day one is her goal.

Meet Diana Zen, 32-years-old HR manager from Barcelona. “You never get a second chance to make a first impression.”

She started as a head of HR about 6 months ago and had to start developing automatic processes that used to be dealt with mainly in a manual way.

Her company is growing a lot and needs to automate the process of onboarding. She is finding out that many new hires find the current process boring and don’t read all the information. Diana is aiming to find a tool that can engage new talent in a fun way. She really understands that a good first impression and good onboarding can retain talent and save a lot of money in the long run.

She has been doing some research and decided to try Davala.

Business Goals

Traditional onboarding methods keep new employees passive making the transition into their jobs challenging.

I introduced gamification principles and designed an interactive web that linked business goals with development, frequent feedback, progress tracking, achievements and rewards. I also focused on timing the delivery of information well to prevent information overload.

The core goals of Davada stan for

• Unify and automate preboarding and onboarding processes
• Keep employees motivated and striving to achieve goals while learning new concepts
• Make new hires productive sooner

What makes this approach successful is how it breaks down the overwhelming and lifeless new hire experience into a manageable journey that new hires enjoy.

A gamified onboarding strategy that is challenging, interactive, fun, and keeps the new hire motivated increases employee engagement by 50% leading to a 50% increase in employee retention.

Design and prototype

Davala has different points of view for HR, the new hire, and the manager. The following is a small taste of it.

HR manager, Diana, is going to prepare the preboarding for her new hire, Maya Neira, who just signed her contract. From among the templates that she has already prepared, she will select the one that corresponds to Maya’s department. After setting up the first meeting in her calendar, Diana will send an email to Maya inviting her to use Davala to start preparing her preboarding. Maya will then receive an email inviting her to start completing missions in Davala.

Please check my high-fidelity prototype here.

Davala

This is the dashboard for HR, where Diana can see the status of the new hires

After selecting a new hire, she gets a screen where she can start personalizing the preboarding experience. She has several templates already made.

It is possible to keep editing the template at this point and adding meetings to a new hire’s calendar.

She can add as many as she wants and when she finishes, she can send a welcome email to the new hire with the invitation to the platform.

She sends the email to the new hire

New hires sings in using the invitation email.

A welcome message from HR and a brief explanation will appear.

The new hire has 8 missions to accomplish, which are named after well-known mountains.

Every mission can have some subcategories or climbing stages.

After completing a task, the new hire will receive a badge and gain points.

After completing all the tasks in a mission, the new hire will reach the summit, which means that the mission is completed.

Style tiles and color variations

Since my brand attributes stand for fun and high energy, I choose to work with bold color palettes that can transmit these values to the users.

In terms of typefaces, I choose Open Sans. It’s elegant and sophisticated, yet modern. It’s beautifully legible and offers an excellent reading experience.

For the Visual Design part, I followed several best practices so every element is clearly visible and readable. Moreover, most color combinations have an optimal contrast based on the Web Content Accessibility Guidelines.

Style tile

Color variations

Feature prioritization

n order to know what kind of features my app should have, I created a MoSCoW table and started filling it in.

Having in mind all the tasks a new hire has to complete and the gamification I wanted to apply, I came up with an idea of designing a road map of mountains that the new hire has to climb in order to complete each task. Every mountain will be a mission and each mission will be divided into several stages. Each stage will have a name of typical climbing stages, such as a camp base, camp 1, etc.

Mid fidelity

After some testing, I made changes in the header of the app in order to give more consistency and so it could be better understood by users.

High fidelity

For the new hire, I prepared a pop-up welcome card with some information about the platform and the option of a demo video.

Starting with the first mission and completing tasks will give the new hire points, which she/he can exchange for merchandise or cantine food afterwards.

Iterations

• I did a more consistent header between screens.
• I also removed some colors from the header in order to have less competition between parts.

• I added an ‘add mission’ button to enable adding cards to the preboarding experience
• I made the previous button more visible

• Unopened missions will have a grey color, instead of a lock, in order to differentiate them from the others.

• I added a ‘go to dashboard’ button to give more freedom to the user when completing a task

• I made previous and next buttons more visible, and changed their location.

• I tried different colors for the meeting cards

Roadmap

To keep improving the platform in 3–6 months I want to add the following functionalities:

1. Integrate IT tickets to be able to request hardware and software for new hires.

2. Give more customized options to companies.

3. Integrate the hiring processes.

4. Sync with other platforms.

Next steps

In this project, I learned a lot about UI and I would like to implement better practices in the future in terms of the categorization and the use of colors. In particular, I would like to:

• Keep improving the UI part of the project.
• Introduce better categorization of colors and assign different colors to respective stakeholders.
• Implement animations for gamification.