Better Begins Here
- Tullie Design
- Apr 4
- 12 min read
Updated: Apr 9
Designed and developed a global onboarding portal that had all the needed information and captured all the user needs, requirements and steps needed to take them from their acceptance of employment through to supporting them into their first weeks at the company
Problem
The onboarding experience was less than pleasurable. For most onboarding initiatives - it’s comparable to doing your own taxes. (Okay, well maybe not as bad), but what we were seeing was a variety of different onboarding styles that were confusing and complicated, leaving our hopeful new-employees wondering if signing up was such a good idea. Signing a contract and adhering to the needs of the business varied across continents and countries based on the needs and requirements of governing bodies, etc. This meant that the onboarding process wasn’t that same in ANY location, which meant that a user would have to reach out to someone to get help, but in some cases didn’t even know where or who to reach out to. This “hiccup” in the onboarding was the largest reason why new-employees were abandoning their new offer before Day 1. According to the Society for Human Resource Management (SHRM), the average cost to acquire a new hire in the United States is around $4,700 - not factoring in the other countries in focus. This dollar amount is at a waste if our prospective employees coming in are abandoning because of the onboarding.
" We're losing our prospective employees and money to boot" - Hiring Agent, MENA
Solution
Created an exceptional onboarding experience for new hires with an attractive, user-friendly, external-facing portal that enables great interaction with automatic feedback and guidance. The creation has personalized content that captures the initial data of the new-hire (area, region, country, rank, service line, hire-type) with automation to monitor and track the overall progress of the new-hires onboarding tasks and activities with notifications and reminders to alert the use to keep abreast of the needs before next steps and preparation for their first day.
A secure portal that has Document upload and e-signature functionality and integration to the companies permanent document storage.
We built a portal with an increased focus on the roles and responsibilities of their contact and support throughout the process with copy that increased user engagement and focused on injecting joy and excitement for the new-hires.
Parameters - A handicap
There were boundaries put in place before the UX team got onboarded, which gave a clear frame of what we could and couldn't control from a creative standpoint. We were told to use the preexisting global Design System (which was outdated) and work within boundaries of the Adobe Platform.
The adoption of Adobe was chosen for the team before Design was brought onboard the project.
We worked closely using the methodology of compartmentalizing the project into Design research and analytics to deliver the best solutions. Our teams leveraged an Agile environment to work cohesively towards a common goal.
Research
Experience Mapping
Documenting the current onboarding process for Various continents and regions to understand the various permutations that exist. First we mapped how the talent service delivery teams built their mental model about acquiring a new hire from different regions and service line and then we mapped out the current different state experiences for each region we were using as the sample for global onboarding.
We did this by interviewing new hires who had just been onboarded into the company within the last three weeks from different hire roles and service lines. The countries within scope included India, USA, UK, Israel, Korea and MENA (Middle East & Northern Africa)
Our findings saw that every country had it’s own process of onboarding that looked nothing like the other.
From a US talent agents (*Talent Agent refers to the hiring agent from the company) perspective there were a number of steps to set up the new hire and markers for them to check off as they progress through the onboarding process.
There was however not Talent agent portal for the agents to keep track of these items. They were required to build their own system of record to keep abreast of changes which left them with no hierarchy of important information or “next” actionable steps.
Qualitative Interviews
Identify new hire’s needs, value and common pain points in an onboarding experience driven by new hire experiences. understand new joiners’ mental model for onboarding portal content.
Our research team interviewed new hires from campus hires, interns, acquisition and executives across regions and client facing service lines that had onboarded within the last 1-3 weeks to gauge their experience.
This helped us identity the direct pain-points of their onboarding cycle and the difference of experience between hire types. (From ‘signature’ to “day 1 schedule’, ‘welcome email’ and ‘changes to start date issues’, etc)
The next step was to determine the severity and validate the pain-points with a larger population.
Quantitative findings
We increased the Size of outreach in order to validate the onboarding portal needs we evaluated from the qualitative research findings.
We were looking to identify any differences between regions if and where possible. The survey helped us prioritize pain points across regions and service lines.
We found that there was cross-section of pain points that all regions shared, so we dove into those first in order to build out from an MVP (these included: who do I contact for specific questions, Getting clarity and communication on the process and time commitment when onboarding, and communication of status regarding any required documentation.
Conclusion of the surveys
We went through the process of onboarding as a new hire for all the regions we were looking at and found that there was no streamlined process but one thing stood out. Based on the mapping exercise and interviews, we identified two models:
Linear – Tasks / events are sequential and can only be done in order before moving on to the next one
Non-Linear – Tasks / events can be done in any order
There were two alternative routes or a combination of the two.
Card Sorting
We conducted card sorting exercise interviews with a group of new hires across the globe to get a better understanding as to how each region was bucketing the information that they needed to learn or processes they needed to engage with before their first day at the company. This helped us understand how users classify the portal content and the terminology they assign to those categories to inform us on building out the portal information architecture.
After completing the card sort exercise we realized that users saw content very differently and it forced us to reorganize the nav into the following buckets:
Actions that need to be taken now
(Things that needed to be completed now or in succession with one another)
New hires information about their position in the company
(Info about the team, role, service line, buddy and counselor)
Getting ready for your first day
(Important things to know ahead of your starting day 1)
Things about the company
(About the company seemed to be the least important b/c the general response was that users had already researched on their own before applying.)
However, user did want to know about policies and how they may impact them personally.
Key features that were recommended to be intuitive and useful to a user were:
- Chat
- Notifications, and;
- A global documents portal (A repository where all users would be able to find a listing of the documents they needed that would be available from any country all over the world)
Due the the constraints of our dev team we were told that despite the recommendation, that the MVP wouldn’t be able to accommodate such robust features.
Information Architecture
In order to expedite the design we architected the information in a way that would give us the most bang for our buck without complicating the flows or going down rabbit holes that lead to nowhere or looped back around. By doing this, we could map out clear navigational paths that wouldn’t be layers deep and gave the user the right amount of information to get what they needed and/or complete a required task.
By building out the sitemap we were able to figure out that we could templatize the site (to make it more streamlined and less work to create), as well as giving the user an intuitive platform that didn’t run into endless rabbit holes Information architecture.
Leveraging Templates
From an alignment on business and user goals, required key features and content - we establish the bare minimum number of templates that will effectively deliver success at the page and across the larger portal site while working with significant foundational technical constraints and delivery time / cost demands.
Template Wireframes – Creating CMS page templates that can addresses the pain points identified from user research.
By templatizing the site we could reduce the complexity of design and keep a sense of familiarity for our audience. Our goal for keeping it simple was based on 3 important factors.
We wanted to:
Build a portal that helps users better understand and follow the processes around onboarding
Design a scalable system that will be globally applicable but allow for regional and local nuance and variation (when needed)
Make the management of the content and the flow of onboarding customizable at the country / region level
Design
Sketching the basics & laying the Design System over the frames
Laying the design system over the wireframes:
We had to use existing components from the company design system to build the site, which felt dry and ill-equipped to cause a user to salivate visually over the old and outdate design.
The evolution of the design went from sketches and evolved over time as we tested swiftly adapted to testing results and our gradual pushback on the hierarchy of what the stakeholders thought was important vs. the survey and test results from the new-hires.
The landing page felt like it was pulling the users attention in too many directions so we sought to streamlining by placing the important steps of each tour item in a drop down, but “Hiding” the incremental steps inside each step into modals didn’t outline the importance and steps that needed to be taken or events that needed or would take place to keep moving forward with the onboarding.
Test Fast - Test Early
After we found the sweet spot for us to use for usability testing we went ahead and did exactly that.
Given the constraints of MVP, we had to assess whether the portal met user needs and uncover usability issues that may impact successful completion of critical tasks so we can develop informed recommendations for adjustments prior to release, but still had to push forward.
This meant that the MVP had, no chat, no notifications and no documents portal
We developed a user script and ran tests on the design.
MVP Usability Testing: Insights and Recommendations
The user needs to know where to focus and prioritize actions
- Improve scan-ability of the homepage to help users know where to focus priorities. Be more direct about what actions need to be completed in the portal (eg: in email on the homepage)
Find additional contacts
- Improve findability of the ‘contacts’ link. Consider options for new joiners to get their questions answered more quickly
- Help new joiners know who to contact by providing context of the roles without depending on the user to find that content (eg: tool tip of quick link to define role descriptions further)
‘Keep track of communication from the company and other 3rd parties’ with a rating of 2.8 on a 5-point scale.
- Explore options for notifications and messaging through the portal to address the needs of the new joiners for keeping track of communications and staying on top of documents to complete.
Overall, the test results showed that we could do a better job addressing user pain points and task accomplishment.
Despite the usability scores being fairly good, we learned that we needed to do a better job of addressing the user pain points and task accomplishment communication areas. The fact that users still didn’t know what to expect before their first day, who to communicate with and how to keep track of their priorities was still an over-arching need that we weren’t addressing.
The Magical "Pause" Effect
There was a quick project freeze, which gave me time to explore other designs and options. We went back to the drawing board to focus on redesign the platform from the perspective of how design would envision the product without the constraints of dev, and directly addressing the needs of the user. The three designers took the opportunity to explore the way they thought the would envision the BBH portal without the constraints.
With permission from the Project lead, I Stepped away from the Company's design system and leaned on my prior UX design experience (UX best practices) to build out a completely different looking UX and UI to showcase what updating the design system may be able to do for their outdated-looking products.
Once we all came back together we decided to do testing on the linear and non-linear designs as well as adopting the key features that weren’t initially allowed in the MVP. Whilst both designs were fairly different, Version B steered away from the companies design system to showcase a case for updating the design system whilst also exploring how that will impact user acceptance and adoption.
"When the designers were given access to do their best design work without all the parameters... Users who had just gone through the onboarding expressed their desire for a system that looked like the new designs and wished for their experience to have been as easy as the new designs looked" - Stakeholder. MENA
Version A
Version A - focused on a linear design (similar to that required from the USA and India). They used the company's current design system and focused on keeping the users focus on the linear aspect without trying to draw their attention to other parts of the page.
Version B
Version B - focused on a non-linear design (similar to the flow of France and MENA). They used the company's current de
Usability testing the new designs
Once the core features were build out, we went ahead and conducted usability testing on both of the designs.
We leaned on the script that we created for the MVP and then built it out a little further by asking questions regarding notification and chat features, as well as digging in to upload your drivers license. Targeted action requests allowed us to view users move towards their natural proclivity of common behaviors.
Through testing our key objective was to take note of certain aspect of both designs:
Guidance: How do users and to be guided on what they need to do?
Navigation: Is a journey or list model more effective?
Welcome Message: Dismissed and never seen again, or temporarily hidden?
Contacts and Chat: Does it make sense to combine them or keep them separate?
We conducted 13 one-on-one interviews with new campus and experienced hires within their first 1-3 weeks at Company and sampled across service lines and regions.
Usability results
The Results Clearly supported a need to include many features that were eliminated or excluded from the MVP versions to meet the needs of new hires.
Namely:
Include the State of documents, what is complete and what is left to do
For all pre-boarding documents including background check, international transfer documents and independence.
Show the progress if completing documents so the new joiner has a line of sight and knows when they have completed everything satisfactorily.
Include the due date for documents so the new joiner has a line of sight into the whole process
Include the estimated time to complete each required document so the new joiner can plan their time according to the time commitment involved.
Included chat/messaging features where all the communication can exist in the portal rather than multiple emails, from multiple parties.
Include notification to alert new hires of communication and any outstanding requests or upcoming due dates.
Challenges
We went through various activities to come to a solution that satisfies the expectations of the stakeholders with success, however the challenge was working with the Adobe platform because Development was keen on us only using the Adobe components that were already developed and used for other projects. When we tested the version that development was able to achieve with their need for only using the Adobe library they had built we found that it didn't really address the users’ needs. Because of this, our stakeholders shifted their approach and allowed us to design the platform that met the user needs with no constraints from development, which allowed us to uncover two drastically different onboarding models that would cover all the regions adequately. Linear and Nonlinear.
The design system although outlined in a “global” repository wasn’t always adhered to. Despite feeling outdated, the latest version of the system couldn’t be found with 2-3 versions claiming to be the latest and most up-to-date Hindsight Project interruption: The project was paused due to an overarching project that needed to be focused on which gave the design team the opportunity to design other options that we wouldn't have had if we didn’t have the interruption.
Using the outdated company Design System was already a challenge that we were facing an uphill battle with, as over the many years prior to my working with the company there were complaints about all of the companies product. Their design system didn’t accommodate for a range of colors that supported a pleasant UI or general UX principals, which made the design feel clunky and aged. The other issue was that the design system didn’t cover the components needed for building out a robust notifications system or chat feature. So we were forced to create our own designs that we ultimately sent back over and over again because there were not components in their library to support the feature. This constant red-tape made designing difficult but in the end when we were able to build out our own “concepts” of a new portal and tested its functionality our stakeholders finally saw the value of a revamp and the success this change could potentially have, not only with our product but across the companies ~400,000+ employees and not just their newest employees that are being onboarded.
Conclusion & Next Steps
Building and iterations on the design will continue to happen as the product evolves - Our analytics team will work with stakeholders to figure out what metrics are needed to tag the site appropriately.
Once our stakeholders were satisfied we concluded our build out and handed over the design to a new Project manager who worked with dev. Through various iterations and so much testing we landed on a successful design.
Overall the project was a success and we were proud of the work we had done in creating a brand new onboarding experience that was user-friendly and gave the user constant feedback on their tasks before their first day.
