Pet Care Enrollment to Booking

The objective of this project was to create an enrollment flow for first-time users to find pet care in an exciting and convenient new way. In the past, Care.com followed a post a job model—where users would post their care needs and candidates could apply. Now, Care is introducing a booking model—where users share their specific needs and can instantly book care for their fur babies. This new method meant adapting the enrollment flow that users enter via search engine marketing pages so they can quickly find and book their perfect caregiver.

Role: Product Designer

Tools: Figma, FigJam

Team: Product Manager, Product Design Manager, Content Designer, Illustrator, Engineer

Competitive analysis

To begin, I researched other brands that use a booking model for finding pet care. I went through their enrollment experiences, took screenshots, and created a FigJam board to gather information.

Key takeaways for brand 1

  • Information asked for—dog details, behavioral, care needs, veterinary

  • Screens with many questions

  • Transactional voice with short questions

  • Muted grey and white color palette with few colors

Key takeaways for brand 2

  • Short process

  • Friendly voice with positive reinforcement

  • Pops of color and fun icon illustrations

  • Must download app to view and book matches

Site map

Next, I collaborated with a Product Manager to build a map of the enrollment process so we would know exactly what was needed for each screen. Together we identified which steps needed to be updated and which steps could stay the same.

Early designs

I began designing the flow by using Care’s Figma design system to build screens.

Key developments during the design process

  • Choosing a consistent icon style by only using the hand-drawn style with color instead of the solid navy and white style

  • Using a consistent design for dropdown menus

  • Removing questions that did not effect match results

  • Making questions less technical and more conversational

New icons

On the new screens being created, there was opportunity to introduce new icon illustrations. They would carry the fun, playful style of the first triage screen through the experience. To keep the new them in Care’s unique style, I commissioned five new illustrations from the team’s Illustrator—one for the interstitial page, and four to represent different dog sizes.

Pet sitting

Boarding

Doggy daycare

Dog walking

Error states

Focused states

Prototype

Conclusion

After launching the new flow to enroll and instantly book pet care, the team will monitor performance, as well as test and optimize wherever possible.

While working on this flow, I learned about communication, collaborating with a cross-functional team, and ensuring project files were properly prepared and organized.

Key learnings

  • Communication with a cross-functional team:
    In addition to myself, this project involved Product Managers, a Product Design Manager, a Content Designer, and an Illustrator. I stayed in sync with my team members project status, feedback from stakeholders, and next steps. To accomplish this I used Figma’s commenting tool, Slack, Zoom, and Jira.

  • Staying in sync with team members on related projects:
    Other booking experiences were being created at the same time as this project. Since we were progressing quickly, I was in constant communication with other designers and product managers about related projects to ensure designs were consistent across user experiences.

  • Ensuring Developers had everything they need:
    To hand off the Figma file to Developers, I made sure all possible states (including selected, hovering, and error state) were included and clearly labeled to prevent any confusion during the building process.