Babysitting Landing Page

On Care’s search engine marketing landing page for babysitting, a new design with an animated scrolling phone was tested against the existing page. To show visitors that they could hire someone that fits all of their needs, the phone screen featured a preview of the user experience with a list of babysitter profiles. The test showed that the new design led to a 5% increase in conversion to basic memberships from this page.

Tools: Figma, Photoshop, Instapage

Role: Product Designer

Team: Product Manager, Product Design Manager

Hypothesis

By introducing a new scrolling phone animation to the babysitting landing page featuring babysitter profiles, seekers can preview the membership experience which will still confidence in fulfilling their hiring goals, increasing conversion rate to basic memberships.

User journey

Existing page

Early designs

I explored different ways to incorporate a device preview and babysitter profiles into the hero section of the landing page. I experimented with a range of stock photos and mockups, as well as Care’s floral brand shapes.

Key developments during the design process

  • Using a mockup of just a phone and no hand and keeping the focus on the user experience

  • Positioning floral shapes behind phone to draw attention to the babysitter profiles

  • Only having floral shapes behind the phone

  • Showing realistic pool of caregiver profiles (star ratings, rates) to comply with legal requirements

New page

Mobile prototype

Desktop prototype

Conclusion

The new page was a-b tested against the existing page. The test showed that the new page design won against the existing page with an increase in the number of visitors who converted to basic members.

+5% in conversation rate to basic memberships from this page

The new design for the babysitting landing page was rolled out to 100% of page traffic. Moving forward, more design iterations of this page will be tested to continue optimization.

Future test ideas

  • Since we primarily saw the lift in conversion on mobile, showing a desktop mockup on desktop

  • Showing more of the user experience in lower sections on the page

  • Testing the scrolling phone design on landing pages for other verticals—nanny, pet care, housekeeping

Key learnings

  • Collaboration with developers:
    Because of the animation, this design was more complex to build than other landing pages. I worked closely with the developer who built this page to ensure that the phone animation functioned as expected—sizing of phone, speed of scrolling, pauses in scrolling.

  • The importance of design iteration:
    Before I reached the final design, I explored many others first. I kept creating new versions until one met the goal—to clearly show a preview of the user experience in an effort to instill confidence that visitors can achieve their hiring goals through Care. In many of the early designs, the phone screen was smaller, the floral shapes pulled attention to other areas of the page, and the animation did not flow right. This process emphasized the importance of iterating on design ideas to reach their full potential.