Week View at 1440 px
Booking Calendar
Company
Yourgi, a digital marketplace web and mobile app that connects pet parents with pet service providers offering everything from daycare to grooming.
Primary Users
Independent pet care professionals, such as in-home daycare and boarding providers, who are joining the Yourgi marketplace space with established pet care businesses.
Challenge
Independent pet care providers are balancing pets, pick-ups, drop-offs, meet-and-greets, all on top of their daily lives. How might we display their calendar of events with interactive features to support their busy schedules?
Role
As a contract Product Designer, I collaborated closely with Product Managers, Engineers, and other Product Designers to define, design, and deliver a fully responsive digital marketplace experience from concept to handoff.
Goal
Flexible scheduling and calendar tools that help service providers stay on track.
Discovery
User Persona
Early user research and persona development revealed that target users often supplement their income with multiple part-time “gigs” or have educational pursuits. This introduces potential friction in keeping their availability for pet care accurate. I identified an opportunity to streamline calendar management through default setting automations and intuitive interactions for quick modifications.
Calendar Products Audit
I conducted a competitive audit of calendar tools across various industries to identify established UI/UX patterns and gaps. Key questions that guided the audit included:
- What granularity of views (day, week, month) do users need?
- How can we differentiate between time-bound tasks (pick-ups/drop-offs) and duration-based bookings (e.g., multi-day boarding)?
- What additional controls might the user expect to have over their calendar and availability?
- How might calendar accuracy impact consumer trust and booking behavior?
Findings from this audit directly influenced the user stories and design of the calendar interface.
Design
Content Structure
I began by defining modular content blocks aligned with existing onboarding and booking dashboard patterns to ensure consistency.
This approach also considered scalability beyond MVP, assuming future services like dog walking, home visits, and house sitting will be added.
Designing for Responsive Web
Designing a calendar UI for responsive web presented specific challenges around information density and visibility. I used information hierarchy to ensure key availability data remained legible across breakpoints.
In the week view, a 7-day horizontal layout uses color and iconography to indicate availability states (booked or available) that tie to those used in other sections of the platform.
The results are a calendar that is easily scannable for a quick review of availability as well as tasks to be completed.
Week View at 744 px
Week View at 375 px
Booking Preview on Web
The month view is simplified to the summary list of bookings per day within each cell. To maintain visual consistency, I capped the number of list items based on observed user behavior.
Selecting a booking triggers a contextual booking preview card, enabling quick access to full booking details additional navigating. This interaction is consistent with other calendar design patterns as well.
Month View at 1440 px
Month View at 744 px
Month View at 375 px
Booking Preview on Web
Designing for the Mobile App
The mobile UI shares many design components with the web app with modifications for mobile-friendly formatting. While there are still month and week views, the week view is stacked vertically and opens a similar scrollable timeline for each day.
Each view focuses on different information and key interactions so no views are cluttered with information.
Month View on the Mobile App
Week View on the Mobile App
Day View on the Mobile App
Booking Preview on the Mobile App
Availability Controls
Based on insights found during the discovery phase, I designed customizable overrides to allow providers to make granular changes to their availability, such as blocking specific hours or limiting pet count without altering global settings. These optional adjustments enable flexibility in real time without the need to dig through settings repeatedly to make changes. I also recommended integrating quick links from the calendar feature to user settings that are crucial in managing availability to reduce context switching and improve task efficiency in a future phase.
Conclusion
Project Timeline
This calendar project, and the new platform as a whole, operated on a tight timeline. I had approximately three weeks from discovery to handoff. I dedicated the first week to research and content planning, followed by two weeks of design, feedback, and documentation for engineering. Given more time, I would have focused on expanding my prototype to include additional interactions and expanded design states for more accurate testing.
Next Steps
In the process of designing the calendar features, I identified the need for syncing with external calendar accounts such as Google, Apple, or Microsoft. This would be hugely beneficial to service providers who have a varied, busy schedule. I wireframed UIs for the import process as well as what the imported events would look like in the calendar.
I also wireframed a concept to allow users to set recurring “busy” schedules. This would block specific times on specific days as “default” availability and may account for other jobs or schooling. Automating this process could remove a lot of the friction involved in keeping a calendar up-to-date.
