Add-on services component
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, Engineers, Analytics
Web component
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.
Product detail page
Assembly
Protection Plan
App component
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.
Product detail page
Assembly
Protection Plan
Competitors
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.
Exploration
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.
Phase 1
Add price
Product detail page
Assembly
Protection Plan
Phase 2
Checkbox
Product detail page
Assembly
Protection Plan
Phase 3
Appliances
Product detail page
Assembly
Protection Plan
Phase 4
App rollout
Product detail page
Assembly
Protection Plan
Prototype
Impact
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.
Documentation
Adding to component libraries
Next steps
Add to Cart and Mini Cart
