Booking & Check Out for Co-Working Space — UX Case Study
--
2.5 weeks | Group Client Project
Challenge
Design a web application for a start-up co-working space.
Overview
Within a team of 4, my colleagues and I worked on a live client project (2.5-week sprint) at General Assembly LON as part of the UXD Immersive course.
My Role
Overlooking the whole project as a team, my role mainly involved user interviews, identifying key insights and strategising the design direction. I also worked heavily on usability testing, gaining valuable insights for an iterative design approach and participated in a design studio session with our clients.
UX tools used: Competitive Analysis | Screener Survey | User Interviews | Affinity Mapping | User Journey| JTBD statement | HMW questions | Site Map | Design Studio | Crazy 8’s | Paper Prototype | Wireframing | Prototyping | Usability Testing | Iterative Design | Retrospective
The Client
A start-up Co-Working Space 💻 meets Coffee Shop ☕, designed for freelancers. With bookable tables, quality coffee and flexible plans, it is dedicated to fueling best work. A space that combines professional facilities, community and relaxing coffee shop vibes.
The Brief
With prior research into the market and users that our clients handed over to us in our initial meeting, we were tasked to design the sign-up, browse, booking and check-in & out journeys through a Web Application on desktop as an MVP.
Technical Constraints
At this point, our clients haven’t signed off what technology was to be used in the physical experience of their space yet. Throughout the project, we agreed QR code would be the MVP solution, scanned to check-in & out the premises.
Competitive Analysis
After inhaling the research given to us by our clients 🤩(it was very informative, a great starting point for us!) and a team meeting to discuss our strategy for the sprint, we started off our project with a competitive analysis.
Looking at 3 direct competitors to deepen our understanding of the current product and experience offered in the market and 3 indirect competitors (different bookable services) to understand what other strengths and fallbacks involved in the features to be designed. Indicating problem areas and opportunities where we can thrive.
Direct
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
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
Prior to interviews and observation, we sent out screener surveys to best select our research participants, receiving 40 replies in total.
User Interviews
We then invited 11 participants who were mainly freelancers for further interviews including both in-person and through a phone call. Asking them about their experiences, habits, preferences, blockers and expectations.
Affinity Map
Collating our insights into an affinity map where we were able to group similar themes together. What we found out here further informed the direction we took towards our final design.
Insights
Pain points
- Users do not enjoy filling long forms
- Too many email notifications are an inconvenience
- Quits process if there are too many steps
Validations
- Live-seating
- Multiple payment methods
- Expects a confirmation email
User Quotes
The Opportunity
After reviewing the insights gathered from our user research and noting the strengths and weaknesses of our competitive analysis, it is clear that there are a few key opportunities to design the product towards.
- 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
We were given 3 different personas from the client which they created through their research. However, for this sprint we decided to use the JTBD framework instead of personas as we believe they all had one main objective in mind, to book a seat at the space.
How Might We’s
Branching out our JTBD statement with a few HMW questions to take into a design studio session with our clients.
How might we help him find the perfect spot to work efficiently?
How might we show him what seats or rooms are available?
How might we suggest the ideal location?
Design Studio
Prepping for the session allowed us to think deeply and creatively about the questions we need to be answered. It also enabled us to get the clients involved and on board, with the features we were going to design based on the findings of our research and collaborative process.
Prototyping
Paper prototype
Starting with a paper prototype we were able to test each journey of the product. Testing scenarios where the user browses the space, books a seat through to payment and confirmation where they can find their QR code to use in the physical space.
Usability Testing
Through testing our paper prototype we encountered insights that allowed us to fix initial flow problems and clarify the direction to take into our first digital wireframe with consideration to the style guide provided by our client.
- 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
We went through 4 rounds of mid-fidelity iterations until we decided to go hi-fidelity. The below displays the significant changes that have gone through the prototype through each stage of iteration, divided by page.
Home
Our aim was to keep the layout minimal, containing only the relevant information needed for the user to fulfil their task.
- 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
Booking
We wanted this page to be as intuitive and easy to use as possible without directing the users away from the page.
- 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.
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
Conclusion
Within the given time for the sprint, I think as a team we did a very good job tackling the design of CO & Partner’s MVP product. We successfully solved the problem given to us and distributed roles well, playing to our strengths.
The clients were happy with our outcome and proposed to continue working with us to further build the product after our course has ended.
Prototype⚡️
View our interactive prototype → here←
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.
Thanks for getting this far! Any questions feel free to get in touch or check out my website. ✨Kiki
