Transform Opaque User Experience in Background Check

A global background check provider, faced navigation issues. I optimized the website resulting in a 900% faster task completion, reduced abandon rate from 20% to 0%.

Client Name

CROSS-CHECKS

My Roles

Solo UX/UI designer & web optimization consultant

Tools

Figma & moderated usability test

Duration

Sep 2024 (3 weeks)

Identify Problems

CROSS-CHECKS' business transition and unintuitive design resulted in navigation challenges for users

As CROSS-CHECKS shifts from a Canadian fingerprint service to a global background check provider, it faces obstacles in website navigation. Cluttered design, unclear information, broken links, inconsistent design elements, typos, irrelevant content, ambiguous business identity, and distracting animations collectively hinder user experience and navigation on the website.

Irrelevant information

Cluttered design

Unclear business identity


Solution

Enhanced content hierarchy, providing intuitive navigation clues, and clear instructions to help users to find hidden services

By optimizing content hierarchy on the homepage and service pages, CROSS-CHECKS can provide intuitive navigation and clear instructions. These improvements led to a more user-friendly experience, making it easier for visitors to find relevant information and engage with the company's offerings.

Prioritized information with both business goal and user need

Eliminated distractions and created concise package service cards

Introduced intuitive navigation clues backup by research with color, spacing, typography, and psychology


Client Testimonial

The client expressed overwhelming satisfaction upon reviewing the proposal and delivered work

“Her thoughtful approach, asking the right questions, and doing deep research to truly understand my business, resulted in a website design that exceeded my expectations.“

Eliza M. CEO of CROSS-CHECKS


Audit and Usability Test

Hidden services and disorganized content resulted in a 20% user navigation task abandonment rate

Moderated tests with diverse participants confirmed audit findings, revealing that navigation challenges led to user frustration. While one user attempted to use the search function, its lack of prominence hindered others from discovering it, causing some participants to abandon their tasks. Measuring navigation completion times provided insights into necessary streamlining efforts.

Moderated usability test in progress

5 usability tests in total

2 occasional users

3 naive users

1 from Canada

1 from UK

3 from U.S.

How do users behave and strategize during “drug test” navigation tasks?

How long does it take to finish assigned tasks?

What’s user feedback for the current site?

Users rely on navigation menu for easy access to desired services and a better understanding of site functionality.

Users typically give up after 180 sec, with an average task completion time of 103 sec.

Users felt overwhelmed by cluttered content, irrelevant information, and excessive animations.


What Do Our Competitors Do?

Conducted competitor analysis and AI research to identify effective website organizing strategies

Leveraging ChatGPT, pi, and client insights, I conducted a competitive analysis to identify key global background check companies. My goal was to understand their business structures, service offerings, and information organization strategies to inform CROSS-CHECKS' transition to a global provider.

How competitors and AI suggest organizing and structuring websites?

What kind of services do they offer?

Global background check websites commonly employ site-wide country filters, with testimonial sections to bolster user trust.

Industry-wide issues include lack of transparency and disorganized content, affecting user experience and trust.

Background check companies offer diverse services, each organized uniquely, resulting in significant variations between providers.


Lo-Fi Wireframe

Lo-fi screens show the key screens in this project. Click on the images to see the full size images.


Re-design Updates

1. Introduced navigation dropdown for major services

To enhance user experience, I've introduced dropdown navigation, as users prefer this method for finding desired items. The dropdown menu is alphabetically organized and further categorized by relevant background check services. This user-centric layout improves accessibility, enabling users to efficiently locate the services they need for an overall streamlined experience.

Before

No dropdowns

After

With dropdowns

2. Eliminated distractions and created concise package service cards

In order to foster user trust and confidence for unfamiliar services, I redesigned the homepage to feature a comprehensive service overview, followed by prominent testimonials. This strategic layout ensures that potential customers can efficiently explore the services offered and gain confidence through the positive experiences of other users before deciding to engage further with the company.

Before

Loads of texts with carousel animation

Clean product cards design

After

3. Redesigned homepage featuring service overview and concluding with testimonials to establish user trust for unfamiliar services

To optimize content hierarchy, I've removed unnecessary distractions, such as animations and irrelevant information, which were found to be annoying during usability testing. Additionally, I created concise package service cards that allow users to quickly find and understand the most essential information without going to another page.

Clutter design, excessive animation, without information hierarchy

Before

After

Use bolder CTA and hero session

Start with process overview

Screening services overview

Package services overview

End with testimonials

4. Added site-wide navigation for different countries

Site-wide navigation for various countries enhances user experience by enabling quick access to global information based on location-specific needs.

Before

Site-wide navigation

After


Who are our users?

Busy small businesses owners & corporate HR both need quick, easy, and clear navigation

To effectively design for a common service like background checks, it was essential to understand user needs despite CROSS-CHECKS' limited budget. By combine user interview and ChatGPT, I was able to create detailed personas which informed my design decisions.

A small coffee shop owner

A mid-career HR in tech


UI Kit Design

Built upon existing brand design by adding elements that refine content hierarchy and highlight CTAs

  • Maintain brand consistency and cater to user preferences, I preserved the original brand design elements.

  • Enhance content hierarchy and improve readability, I incorporated additional font sizes, weights, and neutral colors, ensuring a visually appealing and easily navigable experience.


Usability Test After Re-design

Comparative User Evaluation: Original vs Redesigned Website

To assess the impact of the redesign, I conducted a comparative user evaluation involving five unique users. By measuring task completion times and gathering feedback on website design and navigation, I gauged the effectiveness of the implemented changes and identified any remaining areas for improvement.

100% of users complete the “finding drug test screening” task within 6 sec, 900% faster, compared to 20% abandon rate.

100% of users think the visual design is improved with comfortable spacing and proper information hierarchy.

100% user think it’s easier to navigate with a much more intuitive navigation, clear instructions, and a concise service overview.

25% of the users think the new design still lack of enough information and a clear CTA.


Prototype


Post-launch UX metrics recommendation

Task completion time and rate: Track task completion rates and times for key actions, such as plan purchases and specific information searches, to identify potential navigation or clarity issues affecting user success.

Bounce rate: Track the percentage of users who leave the site after viewing only one page, which could signal confusion or irrelevant content.

User satisfaction scores: Collect user feedback through surveys or questionnaires to gauge overall satisfaction with the website experience.

Conversion rate: Measure the percentage of users who complete a desired action, such as signing up for a plan or making a purchase.


Design Summary & Highlights

Business identity shift, cluttered design, unclear information, inconsistent design elements, irrelevant content, and distracting animations collectively hinder user experience and navigation on the website.

Revitalize brand visuals by transitioning from a traditional to a contemporary design, focusing on optimizing information hierarchy, enhancing spatial layout, and curating impactful imagery.

I optimized the website resulting in a 900% faster drug test navigation task completion, reduced abandon rate from 20% to 0%.


Identify clients' unspoken needs and utilize AI and competitor analysis to comprehend the client’s industry standing proactively sooner.

Improvement and Reflection

Aspire to explore AI ethics and its integration into the background check industry, ensuring responsible and ethical use of AI technology.

Clearer primary CTAs and a more defined business direction are in need, while balancing out CROSS-CHECKS' global expansion and transition.


Previous Case Study >> A personalized AI stylist feature on ASOS: Enjoy AI-driven personalized Avatar clothing shopping

Next Case Study >> ecoScore:Effortless sustainable shopping: Website + Chrome extension