Creating an engaging onboarding experience
Project overview
Haufe group was looking to expand its portfolio offering of HR products into the onboarding market. I joined the team after they had market-tested a proof of concept application. The results showed interest, some 20+ clients signed but soon an avalanche of requests and needs came up. My role encapsulated helping the team make sense of user needs and iterate on the product through a human-centered approach.
Detail screens of the high-fidelity design for the onboarding iOS mobile application.
Client
Haufe group
Duration
4 months
Methods
Journey mapping, user interviews, prototyping, usability testing, gamification experimentation
My role
Product Designer, Researcher, Service designer
Team
Product owner, Engineering Lead, 3 Engineers, 1 Product analyst, 2 Product Designers
The design steps
Getting the context
Understand current user journey experience. Identify challenges for users and establish opportunities for experimentation.
Framing
Prioritise and ideate on major pain points for users and the service. De-risk opportunities and set the hypothesis for the prototype exploration.
Exploration
Sketch alternative journeys, test prototypes, iterate on findings and refine touchpoints. Experiment with gamification to enhance engagement with the app.
Delivery
Consolidate findings into most reliable first delivery candidate. Work closely with engineering and product management to refine prototype. Evaluate with users.
Getting the context - Journey mapping, User interviews
My goals when starting with the project were to understand the current experience of new joiners during their onboarding and to understand their behaviours, needs, frustrations and goals. For these purposes I conducted a couple of research activities:
User interviews with 5 of the newest joiners in our company. My goal was to draft the persona of the onboardee as well as an empathy map that helped the team empathise better with the goals, behaviours, frustrations and needs of the new joiner.
Journey mapping with recent onboardees at our company. The goal for this activity was to take the pulse first hand from the onboardees themselves and establish the blueprint of their experience, highlighting the collaboration between roles and the low and high points in the experience. This helped prioritise features we wanted to explore in the prototyping phase as well as invalidate some hypothesis I had gathered from the stakeholder and team interviews.
Empathy map for Mila, the onboardee.
Persona definition for Mila, the onboardee.
Next, I conducted a journey mapping exercise in person. The journey map helped me and the team better understand how the onboarding journey is experienced from the onboardee’s side. On this session, I mapped out the steps of onboarding. the roles involved and what was the onboardee thinking and feeling during each step.
This artefact served as a basis for improving the mobile app prototypes. It helped establish priorities and areas of improvement that I shared and prioritised together with the Product Owner. It was one of the first steps to bring a human-centered approach to the team’s product development.
Journey mapping exercise in person to understand the onboarding experience.
Journey mapping exercise digitalised for easier collaboration.
Discoveries
Users did not feel the app content was personalised enough. They shared feelings of disengagement with the company.
There was a shared sentiment of being watched, users mentioning that they engaged with the app’s content for fear their usage is monitored.
The information about the app was shared late and the intention for its usage was unclear to onboardees.
Framing - Establishing pain points and opportunities
After these activities I presented the findings to the extended team. Together with the Product Owner and the Jr Designer, I framed the problems we would like to focus on first, based on the main persona needs and frustrations and low experience points in the journey maps.
Once we framed the main problems we wanted to solve, I organized a divergent brainstorming session with the extended team in order to explore the many options we have for solving these problems.
Problem statement framing with How might we questions used in an ideation session.
Decisions
Explore gamification elements to make the app usage more engaging.
Improve on the communication strategy when introducing the myOnboarding application to users.
Make the onboarding journey more clear in the application in order to empower the onboardee.
Make it clear to users that their app usage is not being monitored.
Exploration - Gamification elements, Low- to High-fidelity testing
The next step I took was to map out the ideas explored in the ideation workshop on the octalysis framework - a gamification method for making applications engaging. I prioritised those ideas that best helped achieve the HMW goals:
Engaging experience: Networking elements*, Assigning a Buddy
Clear journey: Progress is visible (progress bars, clear countdown to task completion, animate once task is done etc), Notifications
Personalised space: Choosing a theme*, Profile space with stats, Bookmarks
*Further invalidated during testing
The octalysis framework helped me keep track of the app elements which would compose the user experience so that I can further validate/invalidate them.
Prototyping and testing
After the octalysis workshops with the team, I started prototyping against the 3 main gamification swim-lanes users had shown a preference for:
Socialising: “The most important thing is that you have the feeling that you are a part of the team.”
Exploring: “After downloading the app, I imagined I would find a multitude of information about who are my colleagues, team events etc, more like facebook/intranet style.“
Achieving*: “It was good to have a task list because I knew from the beginning what the team was expecting from me.”
*This goal stemmed from the HR admin and Team lead user side, and was invalidated further along the process by onboardees.
3 different user flows based on the 3 app exploration types.
Now it was time to show these prototypes with users and text against our hypothesis.
2 rounds
I facilitated 2 rounds of usability testing, from low to high fidelity.
3+
Every round I iterated on the prototype.
Desirability toolkit
At the end of the usability tests I ran an additional Microsoft desirability toolkit test to better craft the visual design experience.
Showing 3 main screens for each type of experience explored as part of the first round of testing.
First usability test approach
The next step I took was to test how well we solved our users’ needs with these approaches and to see which gamification elements were best received.
I tested the experience with 12 users in a 1 hour individual in person session where users were asked to perform a few simple tasks in each prototype, every time changing the order. The tasks were the same for each prototype.
Goal: was to establish which flow helps the user solve the task best and which gamification elements are most engaging.
Discoveries
The achiever type gamification (points, levels, unlocking content through time) were perceived as having a ‘Big brother’ effect on new joiners and was discarded.
Most users preferred a combination of exploring + socialising:
the socialising aspects (ways to get in contact with the creators of articles and tasks, networking function, comment function)
the explorer type (information should be laid out through progressive disclosure, content and tasks should be grouped).
Mila’s JTBD uncovered in the discovery research.
Second usability test approach
In the next step I reiterated and combined the best performing elements of gamification from the previous exploration test with Mila’s jobs to be done.
The resulting prototype was further tested with an additional 8 users against a series of 6 tasks. The metrics I tested the prototype against were: ease of use and satisfaction with the functionality.
Discoveries
The navigation and ways of finding information were very well received with 6.2/7 satisfaction rating and a 6.5/7 ease of use rating.
Users reported feeling like the experience is engaging, following a logical path and very clear structure.
The tab “Connect“ was not part of the usability test and placed there as a fake door experiment. All 8 users wanted to find out about it and clicked on it. They reported expecting to be connected to people in the new company, make relationships even before joining and get a sense of community. I explored this option more in the next app releases.
Visual desirability test
I proceeded with the visual design of the app. To better understand what would appeal more to our users, I iterated on versions of the app’s design using the Haufe brand guidelines.
I chose the two visually strongest options that best appealed to me and my team and proceeded to test them with our users by using the Microsoft desirability toolkit: offering positive, negative and neutral words that customers had to correlate with the two options. The goal was to see which of the two options is associated with the words we want to transmit through our brand and product. I also collaborated with the marketing team to work on these words.
We tested with 12 onboardees. Here are the options and the results:
The light version was preferred.
In general, the light version was considered more clear, fresh and organised. For some users it seemed a bit boring so in the next iterations I tried to understand this further and keep experimenting.
Some elements of the dark version were considered more professional which is a characteristic we were aiming for. Therefore I tried to include a few more clean lines and darker colours to the final design, as suggested by users.
Delivery - Design system and Version 1 for release
Once the prototype flow was tested and refined and the information architecture of the app was established, the next step I took was to organize a workshop with the extended team with the goal of setting the structure of our app design system.
Together with the whole team we cut the interface into small parts and discussed how to split it into components. The result set the basis for our Frontify design system.
Video showing the app design system structure in Frontify.
Images showing some of the final screens of the myOnboarding application.
Conclusion and present state
Upon launching the gamified app, we saw significant lift in the app engagement which increased by 20%.
Our NPS survey returned a value of 8.7 which had increased in a year from 7.4.
What I would have done differently
Release sooner
This project was my first leadership project where I was leading all stages of the design process from research phase to final specs for the developers. Needless to say I was a bit worried to fail, so I erred on the safe side by testing many times in prototype phase. With more experience now I would be able to run faster and with more confidence through some of the testing phases in order to release and learn then iterate.
