top of page

Onboarding Upgrade

Project Details

Creating a better onboarding experience for the Clora platform - Connecting Life Sciences experts with careers.

Client: Clora, a platform that efficiently matches life science companies with the experts they need.

​

Role: Design Lead, User Interface Designer

​

Duration: 3 week sprint

​

Tools: Figma, Photoshop, Miro, Smartlook, Notion

My Role

My focus was directing design strategy and managing the design team. I also coordinated design objectives and led design meetings.

​

I was instrumental in creating modifications to an existing design system, and lead the process of coordinating input from all team members. Taking low fidelity wireframes and converting them to a high fidelity prototype.

​

Conducted a page by page audit of the current process, Heuristic analysis and incorporation of UX Best Practices, took the lead in usability testing and documentation of the recommended adjustments. For final hand off to Clora developers we provided annotations to the Figma prototype as well a supporting documents. I personally interfaced with our client contact to answer prototyping questions and finalize next steps post hand off.

67%

Low Profile Completion

The Problem

Current profile page completion for most users is below 36% after onboarding with a potential of only 67% completion in total (100% profile completion can only be achieved after onboarding to keep the onboarding process short and sweet). Some users are not completing the onboarding process.

​

Our goal was to optimize the onboarding experience for consultants and find opportunities to simplify the collection of data needed to build an effective Clora profile. We set out to bring the profile page setup percentage to at least 75% after onboarding with and without Resume Parsing and increase the number of people completing onboarding.

83%

like.png
High Profile Completion

What we achieved 

We were able to increase the profile completion percentage to 83% without resume parsing and up to 94% with parsing. Both well above the requested values.

 

This was done while also shortening the number of screens consultants must click through and creating a straight forward process that eliminated multiple consultant "pain points".

Total Completion Percentage

KPI.png

60%

70%

80%

90%

100%

Without Resume Parsing

With Resume Parsing

Before

After

Before

After

Scroll down for a detailed look at the project and design process. Or click on each icon to browse a section.

searching.png
searching.png
Research
evaluation.png
evaluation.png
Evaluate
categories.png
categories.png
Synthesize
edit.png
edit.png
Design
flask.png
flask.png
Test
target.png
target.png
Deliver

Research

searching (M).png
searching (M).png
evaluation (Pr).png
evaluation (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
target (Pr).png
target (M).png

With the problem and client need clear, raise profile completion rates to facilitate better matches between consultants and jobs. It's time to dig in and figure out the why and the what behind the problem.

 

Why are profile completions so low?

What does a user need to complete a profile and what would help motivate them?

User Interviews & Observations

As a team we started becoming familiar with the user by watching current consultants as they moved through the onboarding flow via SmartLook. We saw which screens took more time to fill out and observed that the average completion time for the onboarding flow is approximately 7 minutes.

After this initial hands off observation 4 Clora consultants were interviewed about their onboarding experience and current use of the Clora website. We then had them run through the current onboarding process while describing their interaction with each screen.

Affinity Map.png

Personas & Key Takeaways

  • A portion of our users are computer avoidant. Design for the minority for the benefit of the majority.

​​

  • Users want a profile that asks for JUST ENOUGH information to get a foot in the door and open communication.
     

  • They want to be specific enough to only see jobs that match their qualifications.

Personas.png
Personas.png

Looking at the Competition

One way to gain insight into the difficulty users are having with the onboarding process is performing a Competitive - Comparative analysis against other sites. This was done to find out what features could be added to upgrade the user experience and efficiency within the Clora process.

Through this analysis I was able to determine what users already know. By incorporating common trends users need to think less, sites become more intuitive.

"Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."

- Jakob's Law
Wellfound.png
LinkedIn.png
Upwork.png
Workrise.png
Key Features Identified

NAVIGATION: Helpful when moving back within the process if a consultant  forgot something or needs to make a clarification​​

destination.png
footer.png
loading.png

​​SITE FOOTER: Our research shows that users may question a sites legitimacy and professionalism without a footer being present.​​

​PROGRESS INDICATOR: Users have said that knowing where the process is going and where they are in it puts them at ease and increases completion.

Evaluate

searching (Pr).png
searching (M).png
evaluation (M).png
evaluation (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
target (Pr).png
target (M).png

In conjunction with user and other research I led a thorough Heuristic Analysis of the existing site. Comparing what the current UI and layout against UX best practices.

​

We also asked Clora personnel, including developers, to meet with us to create a Service Blueprint. This blueprint allowed us to thoroughly investigate what really makes them tick. The process highlighted how all the connections are made from the customer journey all the way through the support processes necessary.

Clora Onboarding Notes - P6.png

Heuristic Analysis

I completed a page by page audit of the existing onboarding process, note any deviations from UX best practices and highlighting how these can be fixed. This was presented to the client.

​

Applicable principles that are not being adhered to include:

  • Selective Attention​

  • Proximity - Compatibility Principle​

  • Fitts's Law

  • Cognitive Load: Overwhelming scroll options

  • Apply Serial Positioning Effect

EXISTING SITE

Service Blueprint

Conducting this Blueprint workshop gave me a clear view of what was most important for Clora and what to focus on. Although Clora is working to implement resume parsing, the Blueprint Workshop clarified that focusing on onboarding without resume parsing was a higher priority. By improving the basic onboarding process Clora will be able to better dictate what information to pull from a resume.

Service Blueprint_edited.jpg

Synthesize

searching (Pr).png
searching (M).png
evaluation (Pr).png
evaluation (M).png
categories (M).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
target (Pr).png
target (M).png

By synthesizing all the data collected through the research and evaluation processes the team was able to adjust the sites User Flow and reorganize individual pages to better aid the user in the onboarding process.

Onboarding Flow

I was able to rearrange the process to have the most important and accessible information be entered at the beginning of the process. Screens were also combined to shorten the overall onboarding sequence and even gain additional information. 

​

This flow contains multiple paths depending on the following inputs:

  • Resume Upload​

  • LinkedIn Added

​

This allows for the future implementation of resume parsing and an adaptable design.

User Flow.png

Design Studio

To facilitate rapid brainstorming of individual screen organization I conducted a Design Studio. Screens were rearranged per the collected data and Heuristic evaluation and in some cases combined to shorten the overall onboarding sequence and produce opportunities for additional information input.

​

​

Design Studio.png

Design

searching (Pr).png
searching (M).png
evaluation (Pr).png
evaluation (M).png
categories (Pr).png
categories (M).png
edit (M).png
edit (M).png
flask (Pr).png
flask (M).png
target (Pr).png
target (M).png

Ideating on the sketches done during our Design Workshop more refined sketches where produced, converted to wireframes and then refined as a prototype for users to click through and comment on the process during another round of usability testing before delivery.

​

To create this prototype we worked with an existing design system. Adding to and improving upon established components and branding.

Sketches to Prototype

About.png
Functional Areas.png
Prefrences.png

Test

searching (Pr).png
searching (M).png
evaluation (Pr).png
evaluation (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (M).png
flask (M).png
target (Pr).png
target (M).png

Our 4 Consultants participated in the Usability Testing and I began to see some distinct themes emerge

  • Overall users moved through the flow much faster and were complimentary of the design changes!

​​

  • There continues to be some hesitancy over content, with users questioning how they define certain sections and options. This warrants a deeper dive on its own.

  • Users were able to complete the process with greater speed and less hesitancy.

​

  • Concerns about age discrimination when adding total years of experience. Consider converting this to a range v. exact number.

Click through the screens below for more specific notes on our findings

Deliver

searching (Pr).png
searching (M).png
evaluation (Pr).png
evaluation (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
target (M).png
target (M).png

For the final phase of the project our team delivered a fully functional prototype and provided annotated files for use by developers.

  • Fully functional prototype.

​​

  • Annotated Figma File.

  • Presentation to stakeholders with Q&A session.

​

  • Recommendations for further research and development.

View the final prototype below
Clora Prototype.gif

Next Steps

  • I would like to dive deeper into content and thoroughly audit both Clora's and the Consultants expectations.

    • Dive deeper into content wording and update to be very specific on what is being asked of the user.​

    • Expand research to ensure Clora and its users are communicating in the same language.

 

Why? To further increase completion of onboarding. If users are not questioning categories and options they will be less frustrated and more likely to complete the process.

​

  • Offer to re-enter the onboarding process after initial exit​

  • Introduce Resume Parsing​

  • Adapt the design to be responsive through desktop, tablet and mobile​

Reflecting on the Process

By combining extensive user research, and a deep knowledge of the client's needs, developed through questioning and our Service Blueprint exercise, we were able to come up with a solution that pleased all parties.

This process reinforced the integral importance of fundamentally understanding the problem and stakeholders involved before beginning a design. Any design is made stronger if steeped in research and backed up by data. 

The project also highlighted what an asset great teamwork is. Not only between members of our team but also with the client. Clora's Project Manager and engineers where engaged throughout the entire process.

One area I believe we need to enhance in the future is setting up a system for post hand-off communication and expectations. There are always questions that come up and it is important to have a set of terms to keep this organized.

Icons created by Freepik - Flaticon

bottom of page