Designing a booking flow that is easy and quick for the user has a lot of complexity. There is plenty of information that must be presented to the user and plenty back must be given to the co-working space. The goal is to make it as seamless, individual to the user as possible while including all information needed without having the feeling of being overwhelmed.

We used previous research we've done on a co-working space that involved interviews, surveys, and observation. Utilizing our previous research and knowledge of the booking flow in our current company help make a ber case.

How may we provide and receive an abundant amount of information from the user without overwhelming them?

The research, UX & UI is created by myself and Fei Huang. This page and written content are done by myself.

Before we get into discovering the flow; who are the users of co-working spaces? There are freelancers, remote workers and digital nomads who want more than working in isolation in their home offices, bedrooms or kitchens. These individuals may want to divide work from home by switching locations, make new connections or simply don't have the ideal space to work. Many users who use co-working spaces fall into this category. Back when I wanted to live the digital nomad life, I got recommended to go to co-working spaces to meet new people that were travellers like myself.

Currently, the majority of websites only allow enquiry or purchase of a day pass. Many do not allow to easily book online . We find this an inconvenience as the timely response from an enquiry can vary. However, I also suspect it is to ensure the people coming in are genuine in their use of the space. How are we able to confirm genuine use when booking online? My suggestion making a requirement for users to use connect Linkedin or a business email as I've seen some competitors do.

Below I mapped out the user flows of two major competitors: Wework and coworker. I found that often it would put me through a loop or it would only allow me to send enquiry request.

We established all the information that our competitors put in to show the user what this co-working space has. In summary: Location, images, price, promotions, description, status (their capacity), amenities, reviews, Covid regulations, similar rooms and plans.

Environment
Based on interviews, surveys, and observations at a co-working space we narrowed down our main takebacks. The environment places a high impact on our productivity or lack of a good environment. Greenery, natural sunlight, noise level, and temperatureare all major impacts. Some enjoy warmer environments while others feel uncomfortable.

Community
We found that many placed importance on the community as well, finding others who wanted to collaborate , in the same industry or make connections .

Other
Storage & Regulations for space is another important factor that we haven't seen too much on other websites. Where do they store their coats? And where are the rules?

The majority of us experienced the annoyance of someone sitting in our seat even if it's not really our seat. Even worse when it is a seat we've paid for. That concludes we must give the ability to select a seat in case they will be coming back frequently even for public seats we use frequently.

Here are some quotes that stood out to us:

My Spot
"Once someone gets comfortable with their spot, it becomes their spot.
Other community members identify that.”

Industry
“I don’t have a lot of people here that are in the creative field, it’s hard to get feedback.”

Interact
“I like that there’s a possibility to interact with people I wouldn’t normally.

We choose a green colorscheme because of importance of having greenery in the workspace is. Margin, padding, grid We used google material design as reference. Using a 12 column grid as we're designing for high DPI laptop screen. We're using 8, 16, 24 and 40 for paddings and margins.

Font Headers we used Helvetica because it's a sans-serif and they are known to be the most user friendly to read on screens.

Font size of 14px as Poppins were chosen as paragraph text. Normally 15 and up is recommended but because Poppins is rather a large font itself we decided on 14. In addition we left aligned all text (center text is not known to be user friendly) and strayed away from making titles all CAPS as it's more difficult to read.

Accessibility Giving plenty of spacing, line-height and ensuring that color contrast passed WCAG AAA makes design better for accessibility. If we used lighter greys on a white background, we ensured that the text is bold.

Our goal is to minimize the number of clicks and pages without sacrificing information or user experience. We looked out how other booking flows do it, websites such as Airbnb, Expedia.

Originally we were going to make selecting duration, and guests on two separate pages. Because we are trying to decrease the number of pages, we looked for a different solution.

Airbnb does a good job of locating a side nav where users are able to select date and view the estimated cost.

To narrow down the scope we made the decision that the front page of this website will not be designed at the moment. This page will allow user to choose what type of pass they want in the first place (Pay as you go, monthly etc.)

1. Left Side Nav
Add left hand side nav that includes to separate actions to 'book now' or 'enquire'. Selecting date and end time to see the total cost live. It also cuts down on the flow.

2. Add tags
Add tags based on the enviornment and the type of users that normally work.

3. The rules
Have access right away to the rules & policies. This should also be sent to them in the flow and email as well.

*Below the fold design in progress

5 Step Flow
Why 5? We generally enjoy odd numbers and that's why we split seating area from seat. However, it also means that it has it's own dedicate page and there's less need to scroll. In addition to seating would only show once the seating area is selected.

In this instance, the location requires online payment.

We ensured that we gave the user a moment to review everything before booking as well.

*Below the fold design, seat selection, payment and review is in progress

1. Image of Room
Having image of the space would help better sell that seating area.

2. Tags to sell location
Including the type of enviornment, such as "quiet" or "collaborative"

3. Show more
This would display the unique amenities that specific room has.

Allow users to select what they need before they arrive, and discover if this is an additional cost. This step is also made to be skippable.

- Contain information required such as duration, and guests at the start, and allow users to see what this may cost them.

- Only include what's relevant to their flow. Have they booked this place before? There should be an option to quickly book it again if they already have an account *this design is in progress

- Combine some elements as we did with duration and guest. Select Area and seat could have been combined as well if this flow was even longer.

- Ensure you give them a 'skip' button.

- Have 'view details' to hide long information

This project is in progress. We're looking forward to finishing the UI and conducting some user tests.