Croissant

CRCaseStudyCover.png
 

TL;DR

We were tasked by the co-founders to design a new "book ahead" feature for Croissant, a service that currently only gives users on-demand access to coworking spaces in different cities. Our main challenge was to design this feature to seamlessly integrate with the existing features so that users remain highly satisfied with the service while also making it intuitive for new users to use. 

project overview

allow users to book ahead

I worked with a team of product designers to create a workspace reservation feature for Croissant, currently a subscription-based service that only gives users on-demand access to workspaces in their city—no reservation required.

The problem

Based on customer feedback that Croissant received, users loved the flexibility of Croissant, but they wanted a sense of security when they had to plan out their week or if they had an upcoming meeting—how might we give them this peace of mind?

The Goal

Design a way for users to book a seat in advance that is seamless with the current on-demand service.

My Role

The team was split into 3 sub-teams: research, lo-fi, and hi-fi. My primary roles and responsibilities were:

  • UX Research Lead (user interviews and usability testing)
  • Ideation and creating lo-fi wireframes
  • Lo-fi and hi-fi prototyping
"Annie was very meticulous when diving into the needs of our members. From the interviews she conducted, she was able to put together UX prototypes for completely new features in our app, and give some great presentations on how it all came together."
- Dave Idell, Co-Founder & CEO of Croissant

METHODS

  • Competitive analysis
  • User interviews
  • Persona development
  • Task flows
  • Design studio
  • Prototyping
  • Usability testing

timeline

7 weeks; November 2016 - January 2017

The Results

Through multiple rounds of testing and iterations, we delivered a mobile app prototype that offered a new Save Seats feature seamlessly integrated alongside the existing on-demand seating feature.

Click here to check out our clickable prototype.

 

Process

We followed a lean and highly collaborative process to gather insights and design a feature that integrated well within the current Croissant experience.

 

Discover

Exploring the current app

reviewing the competitor landscape

We didn't want to reinvent the wheel, so we researched one of Croissant's competitors, Breather, to see how they implemented a seat reservation system. The team thought their reservation system was straightforward, but since we wanted to find out what users thought, we decided to include a usability test on the Breather app during our user research phase.

 

Empathize

Talking to existing and new Croissant users

User research was critical in helping us understand how users used the Croissant app and what they loved about it. As the UX Research Lead, I divided user research in two parts. I created an interview guide, managed scheduling and communication with all participants, and led user interviews.

Part 1: User interviews + usability testing with 5 current users

The goal of Part 1 was to understand:

  • Why users need coworking space
  • How users use Croissant currently and what could be improved
  • How users expect the new book ahead feature to work
  • What users liked and disliked about Breather's reservation system

Part 2: Croissant usability testing with 4 new users

Since one of Croissant's business goals was to acquire new users with this new reservation system, we thought it would be valuable to conduct quick guerilla usability testing with new users of the app who fit their customer segment of tech savvy adults to identify ways to improve the first-time user experience.

 

Define

Defining user needs

Synthesizing the research through affinity mapping helped us visualize common user needs and pain points.

 

While we identified many opportunities to improve the current app and gained insight into how some of the book ahead policies should look, we decided to focus our design process on the book ahead user flow to stick to the project timeline. We did not attempt to define the cancellation policy or booking limit or solve pain points around the current discovery and check-in/out process. However, we communicated all of the improvement opportunities to the Croissant internal team, which they later incorporated into a new update of the app.

Here are the insights we found that guided team discussion on how the new feature should be built:

Booking ahead expectations

  • Users expected to have to specify a check-in and check-out time when booking a seat in advance
  • Some users expected the book ahead feature to be separate from the “Check-in Now” and “Hold a Seat” feature and some users expected it to be integrated with the “Hold a Seat” feature—regardless, users did not expect the “Check-in Now” feature to change
  • Users expected a way to see all upcoming bookings

What users liked from Breather

  • Booking process was easy
  • Favorites - Users liked the add to favorites option so they can easily access spaces they frequently go to
  • Add to Calendar - Users liked the ability add reservation to calendar

DEVELOPING A PROVISIONAL PERSONA

To keep us focused on user behavior, needs, and goals throughout the design process, another team member and I created a provisional persona based on our preliminary understanding of Croissant users and key insights from our user interviews. We focused on Amy, a tech entrepreneur in New York, where coworking spaces are more likely to fill up than in other cities. She typically works at the same space, so a feature that allows her to reserve seats in advance will help her secure the space for the week.

 
 

MAPPING OUT THE USER TASK FLOW

We created a task flow to understand a user’s journey from needing a workspace to working at a workspace. This helped us determine how a book ahead feature would fit in with the current experience.

 

Ideate

Generating ideas THROUGH A DESIGN STUDIO

After debriefing the rest of the team on the key user insights we found, we ran a 4-hour design studio based off of Jeff Gothelf's Lean UX methodology to generate ideas on how we can create a reservation system that matched user expectations and what users liked from Breather and that also fit it in with the current user flow.

After multiple rounds of rapid sketching and critique, we converged on a final design that included:

  • Two different modes of booking
  • Book Today mode: When a user opens the app, they are in Book Today mode by default
    • In Book Today mode, the spaces shown on the Discover screen are those available now. If a user selects a space, only the Check-in Now button is available. We removed the Hold a Seat button under the assumption that users would use the book ahead options if they needed to hold a seat for an hour
  • Book Ahead mode: Users can access book ahead options from the navigation bar. They can input date, time, and number of seats to see available workspaces
  • Ability to favorite spaces and a Favorites tab for quick access
  • Ability to edit and cancel reservations directly from the reservation confirmation page
  • A My Bookings tab that replaced the Seat tab, which would show the active seat if checked-in and any future reservations
 

Prototype & Validate

Making a clickable prototype for testing

Prototyping our ideas using Sketch and Marvel allowed us to gather feedback from users and iterate quickly.

 
 
 

validating our design with users

I led the validation of this prototype with the goal of understanding how difficult or easy it was for users to book seats in advance and edit their reservation. I conducted usability tests with 4 existing Croissant users and asked them to:

  1. Book 2 seats for 12/22
  2. Edit their booking
  3. Find a space to work at right now

Insights from usability testing and iterations

Our usability testing revealed that the new book ahead feature did not match our users' mental models—most users clicked on the space detail page to look for the book ahead feature but couldn't find it. Users didn't realize the feature could be accessed from the top nav bar—in fact, they didn't even notice that anything changed. We iterated on the prototype to conform to and improve users' mental models. 

The annotations below show the pain points we found and the post-validation design changes we made in our next iteration of the prototype.

 

The new iteration also incorporated changes that the Croissant internal team was pushing out in their December app update to address some of the pain points we found in our initial research. After presenting our new iteration to Croissant, we removed the Favorites tab based on their feedback but kept the Favorites feature—we decided that favorited spaces would always appear first when browsing spaces so users can easily access them.

refining our designs with more user testing

I led another round of usability testing with 3 existing Croissant users and 2 new users with the same goals and tasks from our previous round of validation to see if we successfully solved the pain points.

Insights from usability testing and more iterations

Our tests revealed that some issues persisted.

After this round of testing, Croissant wanted us to find out how users would react if we did not require them to specify an end time when making a reservation; our goal was to stick to flexibility of their brand and not limit users with an end time. They also wanted to explore alternative copy for the phrase “Book Ahead” so we changed the button to "Save Seats."

Final round of validation testing = success!

Another round of usability testing with the same tasks as the previous rounds validated the success of our iterations:

  • All users quickly found the “See Available” button and tapped to proceed to the next step in the book ahead flow
  • All users quickly found the Edit reservation button
  • Users thought specifying reservation start time only made sense

We also asked 5 existing Croissant users how they would feel if they only had to specify the reservation start time when making a reservation; 4 out of 5 users preferred this solution because they don't always know how much time they'll be spending at the space.

Aligning our design to a design system

For our final prototype, two of our team members created a style guide to ensure all components and typography were consistent throughout the app. In creating the style guide, we redesigned Croissant's tab bar icons to 1) better align with the tab name and 2) better reflect their brand principle of being friendly. We aligned the color palette with their current app, and made the typography consistent with their website.

Final Deliverable

 
 
 

KEY Learnings

Talking to existing Croissant users was key in the early stages of our feature development process and focusing on them throughout the project helped us design a seamless user experience. We learned from validation testing that they were used to navigating the app in a certain way, so the new feature needed to match or change their mental model. This goes to show that we are not our users.

Our constant communication with the Croissant team also made this project successful. We presented our work to Dave and Nisha, the Croissant co-founders, at each stage in the process and incorporated their feedback into our designs. This transparency helped us establish trust with the client and led to a final deliverable they plan to implement in February or March 2017.

Client Feedback

"Annie was very meticulous when diving into the needs of our members. From the interviews she conducted, she was able to put together UX prototypes for completely new features in our app, and give some great presentations on how it all came together."
- Dave Idell, Co-Founder & CEO of Croissant