Booking & Check Out for Co-Working Space — UX Case Study

Challenge

CO & Partners — Web Application Prototype

Overview

Chris, Sonia and Myself (Fox took the pic) — crafting our user interview questions

My Role

The Client

The Brief

Technical Constraints

Competitive Analysis

Direct

Direct Competitors — Workers’ Dalston, Second Home and Made by We

Strengths

  • Live seat maps offer an intuitive booking process

Weaknesses

  • Long sign up forms asking for payment details prior to booking isn’t attractive to new users.
  • Also, two competitors did not offer online bookings, users have to call or just turn up which isn’t ideal.

Indirect

Indirect Competitors — Pure Gym, Trainline and Zipcar

Strengths

  • Brief and easy sign-up processes
  • Live booking allows for an intuitive journey, understanding how busy the service maybe
  • A flexible and clear indication of plans available
  • Clear, fast steps for easy navigation

User Research

Survey

User Interviews

Affinity Map

Affinity Map

Insights

  • Users do not enjoy filling long forms
  • Too many email notifications are an inconvenience
  • Quits process if there are too many steps
  • Live-seating
  • Multiple payment methods
  • Expects a confirmation email

The Opportunity

  • A fast and easy sign-up process
  • A live booking system to allow the user to freely pick and choose what’s best for them
  • Clear and intuitive navigation

Job To Be Done

Job To Be Done Statement

How Might We’s

Design Studio

Design studio session with our clients CO & Partners, at General Assembly
Design Studio outcomes

Prototyping

Paper prototype

Paper Prototype — sign up, home, booking, check out, profile, confirmation

Usability Testing

  • Sign up — quick and easy, appreciated no payment details asked for yet
  • Home — clear however a bit minimal at this stage, not sure what the 3 icons meant
  • Booking —steps to take to book isn’t clear, not too sure what to do first, timeline very confusing most users did not understand what it was, 3D model appreciated, the summary on the right is clear and helpful
  • Check out — clear step by step process however copy was confusing
  • Profile
  • Confirmation — clear and concise however not too sure what the 3 icons meant, few asked if they’d also get an email sent to their inbox

Iterations

Home

  • We decided to split the book now and book a tour buttons as it wasn’t clear to a lot of users what book a tour meant, adding a small description below helps to clarify any confusion
  • Adding an image of the space allowed users to imagine what it would be like to book a seat and work there
  • Adding icons demonstrating the facilities included in the space helped send a message to users about efficiency and professionality
  • Including a map clearly identifies the location of the space, allowing users to know if this would be ideal for them
Home Page — Iterations

Booking

  • The timeline was very confusing to most users so we opted for easy dropdowns instead
  • With the limitations of our skills, we weren’t able to produce a 3D model of the floorplan so we decided to go for an interactive map, that includes a few icons to help the user visualise the space
  • We wanted to replicate the 3-step check out so that the pattern flows through the entire booking process however, it wasn’t clear to the user which step to take first. So we went for a split-screen instead which lights up and updates as the user select the date, time and duration of work.
Booking Page — Iterations

Payment

  • The 3-step check out proved early on to work very well in helping to guide users through to payment
  • We made minor changes to the initial prototype, reworking the copy which was initially unprofessional
  • Greyed out areas to show clear steps and added edit buttons so users can easily go back if they needed to change any details
Check Out Page — Iterations

Conclusion

Prototype⚡️

Next Steps

  • As our research suggests that a large majority of users also book their services through mobile, I’d like to explore how the product would work on a smaller device.
  • I believe the experience can be enhanced even further through a bit more work on the visuals, primarily the UI and style guide. As we experienced some time constraints toward the end of our sprint and weren’t able to get the MVP to the standard we anticipated.

Learnings

  • As the client has already carried research prior to meeting us, we had a lot of information to go through. It was very important to the team that we carefully absorbed the information and come up with a strategy of our own, as to what we wanted to focus our efforts on in a short sprint.
  • The importance of usability testing is massive, it became very clear to me in this project because through paper prototype rounds we were able to eliminate many problems that occurred very early on and even insignificant pages we did not need for our MVP which resulted in a lot of time saved.
  • Having different personalities in a flat team made it challenging to work together through this sprint, especially when everyone wanted to work on similar areas and at times had different ideas and approaches. We overcame this problem by demonstrating patience, active listening, giving constructive feedback and when faced with time-constraints used a voting system and time-box method. Which resulted in a better understanding, improved workflow and fair approach.

--

--

--

👩🏽‍💻 Product Designer → kikilena.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to be a valuable mentor

two hands giving a thumbs up surrounded by dancing stars

Selling organic produce online — a detailed UI/UX case study

Reflections on our third equality, diversity and inclusion event — Conversations with Black…

Design Challenge: A Quick UI Style Guide For a Library App

Dear VMware, Thank You!

Designing a Life Beyond Work

“Do what you love and you’ll — work super fucking hard all the time with no separation or any boundaries and also take everything extremely personally.”

Pre-Thesis Process Blog W10

Spotify App Finder Not Showing Up

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kiki Wellenhofer

Kiki Wellenhofer

👩🏽‍💻 Product Designer → kikilena.com

More from Medium

Kani Rent UX Case Study

Case study: Way to recycling — empathize and define stages

Case Study: The Contextual Study on Audiobooks

Case Study: Tour operator website (Part 1)