Result of research and user journey mapping
This case study is about enhancing the onboarding experience for the users of XpertHR. I’ve started my job here with this being one of my first long-term projects. A lot of research has been conducted for this project beforehand but translating the research into user-friendly design is where I played a crucial role.
Problem
The problem that I had to define was translating the user journey that has been conducted into a solid design that is timeless. Since the company is facing an upcoming rebuild of the products, the onboarding design had to be in line with the company’s future vision. As well as what the users need to have a pleasant onboarding experience.
My goal here was to create a flowchart that was in line with the needs of the user and the company, creating a UI design that fit’s the current & future branding and testing the design with the users.
Solution
I’ve brought a solid UI design of the onboarding flow that has been tested throughout with the end-users. And inline with that, a re-design of the user settings page. This has left a positive mark to the users and the company. The next step will be the development of this project and is scheduled to be live early 2023.
Tools
Miro
Figma
Axure
Team
2 UX designer
4 developers
2 project manager
My Role
UX/UI design
UX research
Timeline
Overall: 12+ months
Discovery & Research: 6+ months
Design & testing: 3+ months
My Design Process
Research briefing
The project took off almost half a year before I got into the company. The research strategy and objectives were defined in detail and there has been done research in a broad scale. The project has been left on the backlog since the design of this project didn’t fit in the roadmap at the time.
Our Product manager gave a descriptive briefing about the project. There has been data from customer retention that almost 45% of the overall customer pool of XpertHR quit their subscription within the first year. This goes up to almost 65% within two years.
Research conducted that the most important reason for this downfall has been due to poor onboarding of new customers. This comes from numerous reasons. The most notable ones:
Users sharing accounts, hence not knowing everything of the product.
Users getting their account bought in by their company, but not knowing anything about XpertHR
XpertHR being a product with a lot of different tools for different users. Trying to build a more personalised experience helps the user navigating to the product.
Conclusions from prior research
Image of the first flowchart sketch
Flowchart
My journey starts at defining the flowchart and making sure the users processes trough this. The flow defines when a customer get’s their first welcome, they login and come into introduction with the product.
This will be followed with a few questions to personalize their page. This helps the user with what they want to see in the product with some of the search load covered with proper personalisation. When the flow is completed, the user will now experience a home screen more catered to the profession of the user and their settings will be prefilled towards that.
Lo-Fi wireframe using excising components
Wireframes
Using Figma, I translated the flowchart and user needs into low-fidelity wireframes. Reason for is because there are many components that are already used in the branding. If there were new ones to use, I’d make a mock-up of it in figma.
Then, I improved them by adding the brand colours and illustrations provided by the marketing team. At this stage, the wireframes were defined enough for some user testing. Based on usability tests with more than three users from our customer panel, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
A few findings of the test are that users don’t like to read a lot of information. The text on the screens must be as short as possible. Users are also confused using a navigation menu within a screen. This has also been iterated to one screen per slide (without inbound navigation). This iteration cycle has been an ongoing process between the user, the developers and other stakeholders for quite the time to eliminate all edge cases as well.
UI Design
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message. This was done my making sure I’ve done proper research in trends, using guidelines from material design and making use of as much existing components as possible to make development an easier job.
With my final design, I’ve learned that the users like to go shortly trough a flow of screens and be done with it. They would not like to return to an onboarding, nor would they like to read a lot of text. It has been designed to personalise the needs of the user and making sure they have a good user experience when they come in first contact with the product.
My next challenge
Next step
This project will go into development stage and hopefully will be implemented before Q2 2023. I wish I was part of the early research stage that defined the needs for the user and the findings of the research done. But I also wished there was more engagement from the customer panel for this project. There has been a lot of voice from within the company about it but not so much user centred solution thinking until later stages of the project. My advice for the further development of this is to include every new designer in the full process and review old learnings & research.
What I learned
Learnings
This project has made me into a Figma expert. I’ve learned consistency and eye for detail through this project. My communication skills with other disciplines had rapidly improved since I had to handle most tasks alone as a UX designer. Being the voice of why and keeping the customer centred is easy to overlook. But staying persistent through your design choices answers that.
Working with a component library made me question the consistency across the full product and initiated a rebranding of this in figma. I’ve been a lot more confident and faster in the decisions I want to take and when it comes to it, to explain my choices.
Thank you for reading my case study!
I’ve worked on a lot more during my time here. I’d love to talk more about the smaller projects in a one-on-one conversation. Feel free to contact me for more!