Cocoon
Booking system for a social and learning club for NYC families
Brief
After a successful launch, Cocoon re-engaged with our studio to revamp their booking system to accommodate their expansion to multiple locations, changes in discount offerings, and a new membership model. Aside from streamlining the sign-up and booking process, we also took the initiative to make improvements to the overall UX and backend admin experience.
Role
Project lead & designer. Collaborated with one other designer and two engineers.
Company
Sanctuary Computer
Improved navigation
We simplified the navigation to better highlight key conversion pages. Courses and Tutoring are added to the main navigation, Happenings and Reservations are moved into overflow menu to create space to promote other items.
Multi-location expansion
Since most Cocoon users will be associated with a single location, we only display information about the two locations on the Offerings page for non-members. Authenticated members will bypass this page directly to the course listing with their location pre-selected.
Scalable data structure
Cocoon offers a wide variety of classes and camps for families, each with its own schedule: some meet once a week, others twice weekly at set times, and some are offered seasonally, like summer-only sessions. We brainstormed with our engineers to iterate on the existing data structure so we can create time selection variants that are both intuitive to users and scalable from a technical perspective. The same component can be resued across camps, courses, and tutoring offerings.
Backend admin experience
On the backend, we created an equally seamless admin experience with Shopify to support Cocoon's fast growing business. Admin can import existing courses for new semester, select date with through a datepicker UI rather than manual entry, and autogenerate individual sessions after setting up date/time parameters.
Card design
We improved the information hirerachy on course cards, exploring design options that prioritize the most important information and removing secondary information to the detail pages. Since there are multiple versions of a class for different ages, we generated the age in the title programmatically.
Flexible selection and booking system
When it comes to classes and camp selection, we created a flexible booking system to accomodate Coccoon's diverse line-up and families' different preferences. We also added clear indicator for offerings that are prorated, requires two time slot selection, or fully booked.
Discounts and easy checkout experience
We added features and content modules to clarify discounts and free classes offerings for non-members and members. At checkout, users can easily view which classes are eligible, select attendee, and apply their discounts.
