Bridge Marketing to Bright Horizons Benefits

Streamlining Access to Benefits Portals from the Bright Horizons Marketing Website

TIMEFRAME

4 months

ROLE

UX Design and Research

TOOLS

Figma, Mural, Full Story, Pendo & UserZoomGo

COLLABORATORS

Danielle Pirone - Product Manager

Anshul Jain - BrightHorizons.com Product Manager

Meena Menon - Director of Enterprise Product

Shashank Agarwal - Software Engineer Manager

Imran Dam - Quality Engineerr

Overview

Bright Horizons, a leading provider of employer-sponsored child care, early education, and work/life solutions, recognized the need to streamline the login user flow from their marketing website to their benefits portals. The project aimed to enhance user experience, improve accessibility, and increase user engagement with their benefits offerings. As the lead UX Designer on this project, my role was to spearhead the redesign of the login user flow, ensuring a seamless transition for users from the Bright Horizons marketing website to their benefits portal.

Objective and Key Results

Improve user engagement and accessibility of benefits offerings.

  • Bounce rate on brighthorizons.com/login is reduced by 30%

  • Decrease in eligibility-related support tickets by 10%

Process

INSPIRATION

Understanding the Issue

Users frequently encounter difficulties when entering the login page on brighthorizons.com

  • Unclear action signifiers

  • Multiple calls-to-action

  • Not a human-centered design

  • Inconsistency

Gathering Data Insights

When looking at recent drop-off rates for users trying to log in from the marketing site, we found the following metrics:

  • 39% of users leave after the first interaction because they cannot find what they want on the marketing site.

  • Only 9% of the sessions successfully make it to the login page when entering through the marketing site

Meeting with Stakeholders

I met with the Director of Product from MyBH, BrightHorizons.com’s Product Manager, MyBH's Product Manager, and marketing representatives.

  • Discussed project goals and user needs

  • Aligned on objectives and priorities

  • Gathered valuable insights and feedback

  • Ensured cross-functional collaboration

IDEATE

Defining the User Flows

The product and development teams worked in close collaboration to meticulously map out a smooth user experience that seamlessly unfolds across multiple touchpoints. The journey kicks off on the Bright Horizons marketing website's homepage, guiding users to log in and seamlessly navigate to either the child care portal or the employee benefits section. For users whose employers are MyBH-enabled, a seamless transition to MyBH awaits. Otherwise, they can effortlessly choose their preferred benefits on the newly designed benefit selection page.

Exploring Design Options

To initiate the design process, I explored three approaches: dropdown menu, button selection, and modal window.

I conducted usability and preference tests using UserZoomGo with 15 participants (US and UK, age 18+, at least a high school diploma) to make a data-backed decision.

The usability study aimed to:

  • Assess how well users access their benefits platform, focusing on the Family Information Center (FIC) and other benefits.

  • Compare navigation styles in prototype flows to identify user preferences.

  • Evaluate the BrightHorizons.com homepage for accessibility, benefit information, and overall usability.

Tasks

  1. Explore the Homepage

    1. Look for information about the types of benefits they offer through your employer.

    2. Assess the mobile responsiveness and usability of the site.

    3. Do you feel like you have a better understanding of what Bright Horizons offers or does from this first page?

  2. Login to your Benefits

    1. Now that you have explored the homepage, let’s say you want to access your childcare benefits.

    2. Look for the login option and find the link or button that directs you to the benefits portal.

After completing all usability and preference tests, the team chose to go with the modal window approach due to its performance, clear directions, and significance.

PROTOTYPING

Visual Design

Now that all of the frameworks were in place, I worked on high-fidelity prototypes for guidance on later development and validation testing for the users before actual code-based work. 

Modal Designs

After meticulous testing and evaluation of the various approaches, the next step involved confirming the design through a thorough design review process coupled with additional testing. The team deliberated between two distinct designs: one infused with a vibrant "personality" and the other boasting a streamlined, contemporary look. Ultimately, it was unanimously agreed upon that the simplified version proved to be more informative, offering comprehensive details about the target destinations, incorporating more discernible signifiers, and aligning better with the evolving design system standards.

Benefit Selection Screen

An integral part of the updated process requiring meticulous design attention is the benefit selection screen. This page becomes relevant when employers don't have access to MyBH but provide users with a range of benefits to choose from. Crafting this screen involved extensive collaboration with stakeholders from all lines of business. Furthermore, I engaged a marketing professional to secure comprehensive insights, ensuring each available benefit was accurately represented.

TEST

Getting Feedback

In order to confirm the usability of the final flow, tests were run using UserZoomGo with 5 participants from the US and UK over the age of 18 with at least a high school diploma as well as with 5 participants who are Bright Horizons employees with children in one of the child care centers. With the prototype provided, the participants were asked to complete 2 tasks.

  1. Look for the login option and find the ink or button that directs you to the benefits portal. Say you are looking to log into MyBH, please go ahead and click around as if you are logging in.

    1. How easy was it for you to find the login option? Were the labels clear, and did placement make sense to you?

  2. Restart the prototype. This time you are looking to access the Family Information (FIC) or information about your Bright Horizons childcare.

    1. How easy was it for you to find the login option? Were the labels clear, and did the placement make sense to you?

    2. How would you prefer to describe the login process? Did you encounter any issues or difficulties?

  3. If you could change anything about the process, what would it be?

The results obtained from the tests were undeniably promising. Participants specifically highlighted:

  • The intuitiveness of the process

  • Appreciation for the helper text that aided them in predicting the actions' outcomes

DEVELOP

Implementation

Focus on Error States

We ensured a seamless user experience by:

  • Anticipating and designing for potential error scenarios.

  • Creating clear error messages.

  • Iterating on solutions based on user feedback.

Regular Check-ins, Testing, and Collaboration with Development Team

We worked closely with the development team by:

  • Translating designs into functional specs and user stories.

  • Splitting work into detailed tickets.

  • Conducting regular reviews to align design and development.

  • Addressing technical challenges and refining designs.

Coordinating the Launch with Stakeholders

For a smooth launch, we:

  • Coordinated with stakeholders across departments.

  • Aligned on timelines and communication strategies.

  • Monitored the rollout and gathered feedback for improvements.

Measuring Success

Following the implementation of the redesigned login user flow, we saw a significant improvement in user engagement and satisfaction. Metrics such as login success rate and time-to-access benefits showed measurable improvements, contributing to increased adoption and utilization of Bright Horizons' benefits offerings.

90%

Users able to self-correct eligibility errors on login

50%

Decreased user drop off

7%

Decrease in support tickets

Learnings Recap

Through the collaborative efforts with cross-functional teams and stakeholders, several valuable insights were gained throughout the project. User research highlighted the importance of seamless transitions and clear communication, particularly in navigating between the marketing website and benefits portal. Additionally, close collaboration with development teams shed light on technical constraints and opportunities, informing design decisions and iterations.

Key Takeaways:

  • Collaboration with cross-functional teams is essential for a successful project outcome.

  • User research and testing are critical for understanding user needs and behaviors.

  • Iterative design and development processes are necessary to address technical constraints and user feedback effectively.

Future Considerations

Moving forward, continued collaboration with stakeholders and ongoing user feedback will be essential for refining and improving the login user flow. Additionally, proactive monitoring and optimization of error states will help maintain a seamless user experience and mitigate user frustration.

Most Enjoyable

The most enjoyable aspect of this project was the opportunity to work closely with a diverse team of professionals, each bringing their unique expertise to the table. Collaborating with stakeholders from different business units and leveraging the insights of a marketing professional enriched the design process and resulted in a more holistic solution.

More Designs

Transforming Education Together: A Collaborative Journey from Problem Exploration to Implementation Excellence.

Crafting a password-less future for seamless user journeys in employer-sponsored education and care

A strategic UX overhaul fostering engagement, empowerment, and aesthetic coherence in the realm of dance.