Optimized Onboarding Experience With New Web Portal
Desktop UI/UX Design | UX Research | Team Collaboration
I help a startup by designing a web portal with digestible sections to optimize their onboarding experience.
Visitry is a startup health staffing app that gives clinicians the flexibility to find work on their schedule and gives staffing agencies workers when regular staffing is low. My team and I were brought on to create a streamlined process and web portal for their clinician onboarding process.
Scope
This project was done as a contract position for Visitry with a team of 3 UX/UI Designers.
My Role
As a member of this 3-person team, I maintained the relationship with the client, kept the team on track and organized, and collaborated on key stages of the design process, including research, ideation, prototyping, usability testing, and iteration.
UI/UX Designer
UX Researcher
Project Manager
Timeline
4-week remote contract position with Visitry
Tools
Figma, Slack, Google Chat
Problem
Overview
Visitry didn't have an organized way to onboard clinicians and maintain the HR documents required for clinicians.
Factors To Consider
30-40 documents to upload and forms to fill out
Documents were often submitted by clinicians at varying timelines
Completing this onboarding on a mobile device was difficult
The Challenge
The team and I were brought on to optimize onboarding and document management with a new clinician web portal.
The users dealing with this long onboarding process were home health clinicians.
Clinicians are home health professionals that pick up jobs on Visitry’s app and go to a patient’s home to perform an at-home visit (i.e. physical therapy or nursing care).
These users are constantly on the go.
Solution
The team and I designed a clickable prototype of a web portal with an Account Creation flow and Onboarding Documents flow.
The final design included a basic info survey, gamification elements, and document organization with multiple entry points.
The solution had the following features.
-
A “Save Signature” Feature To Start The Onboarding Process.
During the initial account creation flow, users are able to save their signature, which is required for the background check. This will allow for seamless signing later on in the onboarding process.
-
Gamification Elements With Progress Announcements.
Throughout the onboarding experience, pop-up windows encourage the user to continue and provided updates on their progress. This gives users an ongoing awareness of their status in the process.
-
Multiple Paths To One Document, Including An Action Items List.
The onboarding flow included a guided journey to upload documents and several access points to complete documents. One access point included an action item list that gives a quick, dynamic view of what documents still need to be uploaded or signed. This allows users to pick up where they left off if they need to fill it out at a later time.
Process
Research — Ideate — Design — Prototype — Test — Iterate
To start, I needed to understand and define the problem by reviewing the existing process and analyzing competitors.
Current Process Pain Points
There were lots of documents required.
Mobile uploading was difficult and confusing for users.
Expiration dates were hard to manage with no place to remind users.
Competitor Research
To address these issues, I looked to competitors for standard solutions in healthcare staffing, document management, and onboarding, which included Axxess CARE, HHAeXchange, Aya Healthcare, Uber, and Basecamp.
The team and I went through the research to decide on heuristics and features we would focus on and implement into our designs.
The team and I brainstormed and ideated ways to reduce the cognitive load for users.
Heuristic Principles To Use
Visibility of System Status
Consistency and Standards
Aesthetic and Minimalist Design
Help and Documentation
Features to Incorporate
Personalized touches like welcome messages, progress updates, and congratulatory messages
Categorization and prioritization of information
Notifications/statuses of documents
Different ways to upload documents
Then, I created a finalized sketch of the team’s idea before we moved on to wireframing.
I made a user flow and sketch of the single design idea that the team agreed upon to ensure we were all working towards the same goal. We split up work and came back together when we had a full wireframe.
Finalized sketch and wireframes for solution idea.
When the sketch and wireframes were approved by the client, I transformed them into a clickable prototype.
Click the button to view the prototype at this stage of the process.
Usability testing helped explain what current Visitry users thought of this new web portal.
The Big Question
Are these new designs easier to use than the previous onboarding process?
Testing Overview
We chose to only interview current Visitry users to ensure we could get an authentic comparison of the old process and the newly designed solution.
The objective of the usability tests at this stage was to determine if the designs were usable, intuitive, and logical.
Test Results and Iterations
Test Results
Users reported that this process was “much easier”, but there were a few iterations to make.
Design Recommendations
Since we were on a tight deadline, iterations were given to the client as our recommended solution. If more time allowed, I would have tested the iterations for usability.
Before
What Didn’t Work?
Finding the documents that needed attention was difficult.
The “Document Overview” page was confusing to users.
After
How Did We Fix It?
Use a bright color to highlight “action needed” items.
Emphasized navigation options on “Document Overview” with colors and icons.
Before
What Didn’t Work?
Users wanted to be able to upload documents from their phones.
After
How Did We Fix It?
Added a QR code for users to easily go to the camera on their mobile device, but kept the web portal platform to produce a solution within the client’s contraints.
Before
What Didn’t Work?
Not all disciplines represented in Profile Information.
After
How Did We Fix It?
Made sure to include all disciplines as options.
Before
What Didn’t Work?
It was tedious to click several of the same answers on certain forms.
After
How Did We Fix It?
Included a “select all” function.
Looking Back
What I Learned
Working with this client required a lot of over-communication.
Since all our feedback initially was filtered through the client, rather than directly from the user, understanding the users, in the beginning, could have saved us time on ideation.
Document management is easier to digest in sections.
Final Thoughts
This project was a success, overall.
The client had a long list of requests since he was in development mode. We were able to streamline the scope of the project to produce a design recommendation and solution we were proud of.
Through the use of sectional menus, progress bars, and various access points, we created a solution that reduced the cognitive load for users and produced a reported, higher sense of ease with users.