CROISSANT

Designing and integrating a new 'Book Ahead' feature for Croissant—a service that provides users on-demand access to a variety of co-working spaces in different cities.

 
01main.png
 

TL;DR

Croissant wanted to add a new "book ahead" feature that would allow their users to reserve seats in advance to co-working spaces in different cities.  Although users currently enjoyed the on-demand access the service already provided, Croissant found that they wanted a sense of security in being able to reserve spaces in advance.

 

 

OVERVIEW

Croissant is a subscription-based service that provides users with on-demand access to various co-working spaces in different cities.  After receiving feedback from current users, they felt that the next step to evolving the service was to provide them with the ability to reserve spaces in advance.  We worked on an iOS platform over the course of 6 weeks.
 

ABOUT

Founded by four friends who love working from inspiring places, the start-up first began in coffee shops where the group would meet up at to work out of.  After months of bouncing between coffee shops and constantly having to buy food just to stay a while longer, they decided there needs to be a better way.

Enter Croissant—they're on a mission to make every day inspiring for digital workers around the world.
 

THE CHALLENGE

We were given the task to design a new "book ahead" feature that would allow users to reserve seats at a workspace in advance.  The challenge was that we needed to seamlessly integrate this feature into a user flow that was already satisfying current users, while also making it intuitive when onboarding new users.
 

ROLE: PRODUCT DESIGNER

I worked on a team of 12 to execute the project from research to final delivery.  Due to the large size of the team, we worked in subgroups dedicated for each stage of the design process.  My responsibilities included:

  • market research
  • lo-fi wireframing & prototyping
  • hi-fi wireframing & prototyping
  • validation

In addition to these responsibilities, I volunteered to create the brand's style guide since I have a background in graphic design/branding and it was something that had not been previously done within the company.

 
 

 
 

DESIGN PROCESS

  1. Research

  2. Synthesize

  3. Ideate & Sketch

  4. Prototype

  5. Validate
     

1. RESEARCH 🖥

In order to start designing for this new feature, we had to first familiarize ourselves with the current app and its user flow of reserving a seat at a co-working space.  Once we did that we arrived at the following assumptions:

  1. Users want to reserve seats in advance when seat availability is low
  2. Users would be more inclined to bring guests if the option to reserve seats-in-advance was available
  3. Users love the current functionality of Croissant and do not want it to change
     

HYPOTHESIS

Given these assumptions, we hypothesized that creating a new "book ahead" feature without compromising the current experience/functionality would create more value for the existing users, increase usage of guest hours, and grow the number of referrals.
 

COMPETITIVE ANALYSIS

Next, we needed to take a look at the current competitors that were out on the market to understand the nature and process of booking a space in advance.  We compiled information on each competitor and listed their strengths and weaknesses to see what we could learn in order to improve our product.  Since we felt that Breather did a great job designing the user's booking experience, we decided to conduct usability tests on it to see what Croissant users thought of it.

deskpasslogo.png
liquidspacelogo.png
 
breatherlogo.png
 
 
Competitive+Analysis.png
 


USABILITY TESTING

With our hypothesis in hand, we conducted user interviews with 5 existing users so we could understand:

  • why users need co-working spaces
  • what are the habits of current Croissant users and what could be improved
  • how Croissant users expect the new book ahead feature to be like
  • what Croissant users like/dislike about the Breather booking experience

We also conducted usability tests on the Croissant app with 4 new users to see what was working well and what could be improved.

 

2. SYNTHESIZE 💻

With the information we gathered from our user interviews and usability tests, we used an affinity mapping process to better visualize what pain points our users were encountering, and what their most common needs were.

Croissant_research1.png
Croissant_research2.png

RESEARCH INSIGHTS

While we identified pain points that would help us design an ideal "book ahead" feature, we realized that several of them brought up issues that were outside the scope of our project.  To keep the team on schedule for the project deadline, we chose to focus on the "book ahead" feature while making sure to relay the rest of the insights over to the Croissant team (they later announced that those issues were addressed in the update of the app).

As for the "book ahead" feature, users expect:

  • there will be a way to specify a check-in and check-out time when booking seats in advance
  • the current check-in process for the on-demand reservations to remain the same
  • there will be a way to view upcoming bookings
  • a flexible cancellation policy and a check-in grace period
  • a penalty for policy abusers (limited amount of reservations)

When testing the Breather app, users liked:

  • that the booking process was easy and intuitive
  • the favorites feature—they are able to access the spaces they frequently use
  • the ability to sync and "Add to Calendar"


DEVELOPING A PERSONA

To help us better visualize and focus on our target demographic, we developed a provisional persona based on the key insights and understandings we gathered about the Croissant user.

Croissant_personashadow.png

Doing this was a great way to remind the team that this is who we are designing for!


MAPPING OUT THE TASK FLOW

To further our understanding of the user's experience, we mapped out the user's journey starting from their need for a workspace to reserving a seat at the workspace.

Here, the yellow dotted lines mark the opportunities to improve the current experience while the red dotted line marks where we felt was the best place to integrate the new "book ahead" feature.

 

3. IDEATE & SKETCH 💡🖊


DESIGN STUDIO

To begin the design phase of this project, we debriefed the rest of the team on the research insights and ran a 4-hour lo-fi design studio based off of Jeff Gothelf's Lean UX methodology to brainstorm solutions that addressed both the expectations and needs of the Croissant user.

We started this process by conducting six 10-minute rounds of UI sketching to tackle the pain points we found through our affinity map.  Since our team was large, we diverged into two groups and went through two rounds of UI sketching, critiquing, and refining before we came together to present what each team had come up with for their seat reservation designs and flows.  

Design studio, Team 1

Design studio, Team 2 (the team I was on)

Croissant_designstudio1.png

After multiple rounds of rapid iteration and critique, we converged our solutions into one final design that includes the following features:

  • Two different modes of booking a reservation/seat: Book Today Mode and Book Ahead Mode

    • Book Today Mode: This is the mode the user is in by default when they open the app.
      • The workspaces that are available now are shown immediately on the Discover screen
      • If a workspace is selected, the "Check In Now" button becomes 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 a hour
    • Book Ahead Mode: Accessible from the navigation bar. Users can input the date, time, and number of seats they want to save to see available workspaces that can accommodate those requests.
  • The ability to favorite frequently visited workspaces, with a "Favorites" tab for quick access
  • The ability to edit and cancel reservations directly from the reservation confirmation page
  • A "My Bookings" tab that replaced the "Seat" tab, which would display the active seat if checked-in and any future reservations
 

4. PROTOTYPE 📱

With our mid-fidelity design, we created a clickable prototype using Sketch and Marvel that allowed us to test/gather feedback from users and iterate quickly.

We conducted usability tests with 4 of the 5 existing Croissant users we initially interviewed and asked them to:

  1. Book 2 seats in advance: "Show me what you would do to make sure you and your colleague have a seat for Dec 22."
  2. Edit their booking: "Now imagine that you need to cancel your reservation. What would you do?"
  3. 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."
     

PROTOTYPE VALIDATION INSIGHTS

Our usability tests showed that our prototype didn't match our users' mental models of the "Book Ahead" flow—revealing the following about our users:

  • They struggled to find and confirm filters.  Users felt the filter in the top navigation bar wasn't obvious and that it was unclear how to confirm the filter once selections were made.

  • They struggled to locate the button that edits a reservation.  Users felt the edit button was placed in an unusual place.

  • They felt unsure of the cancellation policy. Users hesitated to confirm a booking because they weren't sure what the terms were if they had to cancel.

  • They expected to be able to book ahead by selecting a space first. Users expected the new "Book Ahead" process to be more similar to the "Book Now" process where they currently check-in to a space by selecting the space first.

With these observations, we continued to iterate on the prototype to improve the user flow and to take into consideration the users' mental models.

Below are the pain points we found and the post-validation design changes we made in our next iterations of the prototype.

 
 

 

STYLE GUIDE 

Once we began to finalize our hi-fi mock-ups, I started to put together a style guide to ensure that the typography, colors, and mobile app components (such as the sizes and different states of icons) were consistent throughout the app.

While creating the new "Book Ahead" feature, we redesigned Croissant's tab bar icons to better reflect their brand principle of being playfui and friendly.  We utilized the existing color palette of the app and made the typography consistent with what was seen on their website.  With these changes, the Croissant brand looked more complete as a whole brand now that everything was consistent and updated. 

Also, we felt that having a style guide like this is definitely helpful to pass over to the Croissant team when the time comes to implement the designs!

00PrimaryColorPalette.png
 
 
 
 
 
02BrandAssets2.png
 
02BrandAssets3.png
02BrandAssets1.png
02BrandAssets7.png
 

THE TAKEAWAYS

Croissant challenged us to design a feature that would allow users to reserve seats in advance at available workspaces and we were able to deliver—thanks to existing Croissant users!  Talking to them was key in the early stages of our feature development as we were able to address common pain points and design the flow to be closer to the users' mental models.

While working with a team of 12 definitely had its challenges, constant communication was what made this project successful.  We had conference calls with Dave and Nisha, the Croissant co-founders, at each stage of the process where we would present to them our designs, receive feedback from their end, and continue to iterate with those comments in mind.  With this, we were able to establish trust with the client early on—and ultimately, this led to the implementation of our design in March 2017.

 

 
croissantapp.gif