Designing a 'Book Ahead' Feature
Croissant provides on-demand access to a variety of shared work spaces through a subscription-based model. Users are allotted a set amount of hours (to work at a space) a month.
Design a "book ahead" feature that allows users to reserve seats at a workspace in advance. Croissant found that users wanted a sense of security when planning out their week and scheduling meetings.
I was on a team of 12 designers. I focused on:
- Lo-fi prototyping & validation
- Hi-fi validation
Croissant currently only offers on-demand access to co-working spaces. We designed a new "book ahead" feature that guarantees that people will always have a space to work. Our solution flows seamlessly with the current experience for existing users and is also intuitive for new users....and it's being shipped right now! Stay tuned for results :)
First, we needed to validate and understand users' motivations and needs behind reserving a seat at a workspace. As a precursor, we outlined our assumptions and developed a hypothesis to facilitate our research.
- Users want to reserve a seat in advance when availability is low
- Users would bring more guests for meetings if they could reserve seats in advance
- Users love Croissant, and do not want the existing functionality to change
A feature that allows users to reserve seats ahead of time without compromising the current experience of Croissant will add value for existing customers, increase usage of guest hours, and grow the number of referrals.
Learning from Competitors
Next, to understand the nature of booking a workspace in advance, we looked at the user experiences of 3 of Croissant's competitors who allow booking ahead to see what we might learn from their strengths and weaknesses. To dig deeper, we also conducted a usability test on Breather, Croissant's most direct competitor.
Learning from Croissant Users
After understanding a bit about Croissant's competitors, we now wanted to learn more about Croissant users. We talked to users in SF, at Croissant co-working spaces, and users in New York, remotely.
We conducted need-finding interviews with 5 existing users with the goal of understanding:
- Why users need co-working space
- How users currently use Croissant and what could be improved
- How users expect the new book ahead feature to work
We simultaneously conducted usability tests on the Croissant app with 5 existing users and 4 new users. We wanted to make sure our designs wouldn't disrupt the current experience, and sought to learn:
- What worked well and should remain the same
- What could be improved and changed
To make sense of our research and extract user needs, we grouped our observations into themes.
We identified several pain points in the current discovery and check-in/out process that we kept in mind to solve while designing the book ahead feature. Namely, we identified opportunities to improve the current search functionality, space details, and UI icons.
When it came to a book ahead feature, users expected:
- To be able to specify check-in and check-out time
- The current "check-in now" feature to remain as is
- To be able to see upcoming bookings
- A lenient cancellation policy & check-in grace period
- Limitations on the number of reservations you can make, to prevent abuse
Most of Croissant's users are based in New York, where co-working spaces fill up quickly and there is a need to book ahead. Given the distance between our team in SF and our core users in NY, we developed a persona that would help keep users in mind and inform our decisions throughout the process.
We also mapped a task flow of a user's journey from needing a workspace to working at a workspace, to understand the scope of the need to book ahead and envision how such a feature would fit in with the current experience.
Yellow = opportunities to improve the current experience
Red = where we come in with reserving a seat :)
We ran a 4-hour Design Studio based on Jeff Gothelf's Lean UX methodology to brainstorm and consider as many alternatives as possible. Given the size of our team (12), we split into 2 groups to go through 2 rounds of UI sketching, critiquing, and refining. We ultimately came up with 2 cohesive reservation designs and flows.
Team 1 UI Sketches
Team 2 UI Sketches - My Team!
Next, using our 2 sets of UI sketches as inspiration, we made mid-fi prototypes to present to Croissant for feedback. After incorporating their feedback, we merged our 2 designs into a single mid-fidelity prototype to validate.
Team 1 Prototype
Team 2 Prototype
4. Mid-Fi Prototyping & Validation
Prototyping & Validation
Our combined prototype featured:
- Two modes of booking:
- Book Today/Now: default upon opening the app. Similar to current experience - sans "Hold a seat" button
- Book Ahead: Users can filter book ahead options in the top navigation bar
- Ability to favorite spaces: also added a "Favorites" tab for quick access
- Ability to edit and cancel reservations from reservation confirm page
- "My Bookings" Tab: which replaced the "Seat" tab. Would display the active seat (if checked-in) and future reservations
We conducted usability tests with 4 of the 5 existing Croissant users we initially interviewed. We asked users to:
- Book 2 seats in advance: "Show me what you would do to make sure you and your colleague have a seat for Dec 22"
- Edit their booking: "Now imagine that you need to cancel your reservation. What would you do?"
- Find a workspace to work at right now: "Now, imagine that you need a space to work right now. Show me what you would do"
Our usability tests revealed the following about our users:
- Struggled to find and confirm filters. The filter in the top navigation bar wasn't obvious enough, and it isn't clear how to confirm the filter and proceed to the next step.
- Struggled with locating the button to edit a reservation. The edit button was not in a position that's familiar to users.
- Unsure of the cancellation policy. Users hesitated to confirm a booking.
- Expect to be able to book ahead by selecting a space first. Users expected the feature to behave in a similar manner to how they currently check-in to a space on-demand.
5. Hi-Fi Prototyping & Validation
Iterating on our Prototype
To resolve the issues we found during mid-fi testing, we:
- Added a filters icon to the top Nav bar and colored the "See Available" button to make the filter more noticeable
- Added an "Edit" button: to reservation page instead of drop down
- Added a note about the cancellation policy beneath the reservation confirmation button
- Differentiated the filters according to the user's flow: 1) wanted to choose a space first or 2) wanted to specify a date and time first
To test if we resolved the pain points we found during our lo-fi usability tests, we conducted another round of testing with 3 existing Croissant users and 2 new users with the same tasks. We found that users:
- Didn't realize the "See 4 Workspaces" button would take them to the next step after selecting a date, time, seats, and amenities
- Struggled to find the Edit reservation action in the navigation bar-- they expected it to be on-screen near the reservation details
After presenting our findings to Croissant, Croissant wanted our designs to align with their brand principles of flexibility and playfulness. So, we went back to our users and asked how they felt about having to specify a check-out time when making a reservation, and thought of alternative copy options to "Book Ahead". We found that users actually did not want to specify check-out time, and that "Save Seats" resonated with both users and the brand.
We then made changes according to feedback from our users and Croissant. The changes from the current app, to our lo-fi prototype, and to our final hi-fi prototype, are annotated below: (click to enlarge)
Croissant challenged us to design a feature that would allow users to book space at a workspace in advance. We delivered a final hi-fi prototype that seamlessly flows with the current experience, and that users love!
We'll be measuring the impact of our design once Croissant implements our feature in March. So stay tuned!