Desk booking redesign

OVERVIEW

FLYDESK wanted to make hybrid work easier for companies by creating a B2B application solution, and aimed to tackle one of the biggest cultural shifts in work-life balance. The goal of this project was to develop the first iteration of a solution that allows facilitation of scheduling work locations

ROLE

UI/UX Design
User Research
Journey Mapping
Wireframing
Information Architecture
Interaction Design 
Design Systems

PERIOD

April 2021 - Ongoing

OVERVIEW

FLYDESK wanted to make hybrid work easier for companies by creating a B2B application solution, and aimed to tackle one of the biggest cultural shifts in work-life balance. The goal of this project was to develop the first iteration of a solution that allows facilitation of scheduling work locations

ROLE

UI/UX Design
User Research
Journey Mapping
Wireframing
Information Architecture
Interaction Design 
Design Systems

PERIOD

April 2021 - Ongoing

BACKGROUND

FLYDESK is a Hong Kong-based SaaS company that helps businesses manage hybrid working. Learn more about what FLYDESK does.


I joined FLYDESK as a UXUI designer in May 2021, coming from a front-end development background. I was the only designer in a product team of 3 developers. I support design across every aspect of our business and am responsible for leading UX and UI.


I've grown tremendously in the last year and a half, some key achievements which I have listed below:

  1. Implemented a design process. This has helped our team establish more structure to how we conduct our work and allow other teams to gain visibility across our upcoming sprints.

  2. Designed a complete mobile-app and web-app for the MVP. Before I onboarded, FLYDESK had hired a design team to help create a one-off design based on very early stage assumptions about what users needed. Since I joined, the business side and myself have been working with the existing clients to gain as many insights and find the right design direction to take the MVP

  3. Establishing a design system.  This has helped the dev team to understand how and why we choose to implement certain components over others.

  4. Juggled many different hats. From advocating user needs and implementing a design process to introducing better scrum practices for development based on previous experience.

OLD PROCESS

NEW PROCESS

Our process at FLYDESK is based on the Double Diamond Theory and Lean UX process. We aim to incorporate the key phases of Discovery, Definition, Ideation and Implementation in all of our projects. Ofcourse, not every problem required strictly following the entire double-diamond process, but generally this is the guideline that I tried to follow for most cases.

Discover

GATHERING DATA

Before FLYDESK even hired a full-time designer, a beta release of the software had been implemented based on blue-sky concepts executed by an external consultancy. These mockups were created without any inputs from real-world businesses with real problems, and had little consideration for the technical and product limitations on the scope of work.


Together with the product manager, we collected a list of different pain-points/ideas for improvements based on many interviews done with clients.

COMPETITOR ANALYSIS

Findings

  • Most of our competitors focused on either desk-booking or work planning primarily

  • Competitors that provided desk booking also provided an extensive space-management tool

  • Room-booking, identified desk booking and hot-desk booking was the common types of bookable resources

  • Most competitors provided a web version of their application, something we didn't have

  • Allowing integration with existing calendars(e.g. Google, Microsoft Outlook) was something common across most competitors

PRIORITIZATION AND NARROWING SCOPE

After collecting all the data from past conversations with clients, we used different methodologies to prioritise the pain-points/improvement requests, but eventually landed on this simple scoring mechanism below:

Score = Number of times requested x Severity (or importance) x Potential reach

We also made an affinity mapping to synthesise the pains identified. We grouped these problems under common themes and features in the platform.

Define

THE PROBLEM

Companies wanted a way to reduce their office size either because of adopting a hybrid-work policy, or because they were moving office locations. The companies wanted a way to let employees book desks before they arrive to the office, and also to manage their office spaces at the same time


Goals

  • Allow users to book a desk at their office

  • Allow users to book a desk for morning/afternoon

  • Give users the opportunity to make an informed decision based on where their team-mates are sitting

  • Allow users to re-book previous created bookings

  • Allow users to book hot-desks


Target users

  • Employees of a hybrid teams

  • Small - medium sized companies

Companies wanted a way to reduce their office size either because of adopting a hybrid-work policy, or because they were moving office locations. The companies wanted a way to let employees book desks before they arrive to the office, and also to manage their office spaces at the same time


Goals

  • Allow users to book a desk at their office

  • Allow users to book a desk for morning/afternoon

  • Give users the opportunity to make an informed decision based on where their team-mates are sitting

  • Allow users to re-book previous created bookings

  • Allow users to book hot-desks


Target users

  • Employees of a hybrid teams

  • Small - medium sized companies

Companies wanted a way to reduce their office size either because of adopting a hybrid-work policy, or because they were moving office locations. The companies wanted a way to let employees book desks before they arrive to the office, and also to manage their office spaces at the same time


Goals

  • Allow users to book a desk at their office

  • Allow users to book a desk for morning/afternoon

  • Give users the opportunity to make an informed decision based on where their team-mates are sitting

  • Allow users to re-book previous created bookings

  • Allow users to book hot-desks


Target users

  • Employees of a hybrid teams

  • Small - medium sized companies

OLD DESIGN

General booking flow

Old user journey mapping

Gathering pain-points and opportunities

Ideate and Implement

Multiple iterations of booking list style exploration

USER FLOW FOR BOOKING A DESK

User flow for booking a desk

SIMPLIFIED USER FLOW

Simplified user flow (with user preferences)

HI-FIDELITY WIREFRAME

Hi-fidelity wireframes of new booking design

Main design features

  • Three step booking process

  • Use bottom-modal mechanism to overlay selection actions

  • Keep main CTAs at the bottom for easy reachability

  • Keep UI simple

  • User preferences help speed up booking process, since users likely have desks/areas that they typically work in

USABILITY TESTING

By means of a hi-fidelity prototype, I tested the usability of the application. I had the participants complete tasks with prompts such as:


  • 'You are going to the office next Monday for the morning session, please make a booking'

  • 'You arrived at the office today, and forgot to book a desk. Please make a booking'

Results

  • Users found it hard to locate the button for creating a new booking on the first screen

  • Users found it difficult to navigate back from the 'review details' page as the back-arrow was too high for their thumb to reach

  • Users felt confused which desk to choose since they had no idea which desks the interface was referring to

  • Some users thought that the booking was not done until closing the 'booking completed' screen.

AFTER MULTIPLE ITERATIONS

Hi-fidelity design

ADAPTING FOR THE WEB

FLYDESK had initially assumed that users would use the mobile-app primarily. But based on user journey analyses, most users typically would be on booking desks/planning their week at work, on their work laptop. For this reason, FLYDESK also needed web-app. Before adapting the booking flow from mobile-to-web, I had to design the structure and foundation of the web-app first

First iteration of web-app design

After many iterations

First iteration of web-app design

After many iterations

DESIGN SYSTEM AND USAGE

I established a flexible design system that includes visual styles, components, and a comprehensive set of guidelines and best practices for usage. The design system not only improved efficiency during the design process but also ensured the platform could continue to evolve and maintain visual consistency.

RESULTS AND TAKEAWAYS

Working in a startup was an extremely steep learning curve. Although the product is yet to be fully developed and rolled-out to users, I'm excited to see how users interact with this product and how it can be even further improved.‍


Some key takeaways from this project are:

  1. Focus on building an MVP. In a startup, there is only so much time and effort that you can invest  (especially when you're working full time!) so it's important to focus on the features that can deliver the highest value for your users.

  2. Don't worry too much about the detail. Earlier in my journey, I made the mistake of worrying about the look of the UI. Taking a step back and reassessing the user flows helped me to reprioritise the UX.

  3. Focus on the problem. At the end of the day, it is your users pains that you will be solving for so keeping that front of mind is important as it's easy to lose sight of this when you're bogged down in the day to day.

Working in a startup was an extremely steep learning curve. Although the product is yet to be fully developed and rolled-out to users, I'm excited to see how users interact with this product and how it can be even further improved.

Some key takeaways from this project are:

  1. Focus on building an MVP. In a startup, there is only so much time and effort that you can invest  (especially when you're working full time!) so it's important to focus on the features that can deliver the highest value for your users.

  2. Don't worry too much about the detail. Earlier in my journey, I made the mistake of worrying about the look of the UI. Taking a step back and reassessing the user flows helped me to reprioritise the UX.

  3. Focus on the problem. At the end of the day, it is your users pains that you will be solving for so keeping that front of mind is important as it's easy to lose sight of this when you're bogged down in the day to day.

Working in a startup was an extremely steep learning curve. Although the product is yet to be fully developed and rolled-out to users, I'm excited to see how users interact with this product and how it can be even further improved.

Some key takeaways from this project are:

  1. Focus on building an MVP. In a startup, there is only so much time and effort that you can invest  (especially when you're working full time!) so it's important to focus on the features that can deliver the highest value for your users.

  2. Don't worry too much about the detail. Earlier in my journey, I made the mistake of worrying about the look of the UI. Taking a step back and reassessing the user flows helped me to reprioritise the UX.

  3. Focus on the problem. At the end of the day, it is your users pains that you will be solving for so keeping that front of mind is important as it's easy to lose sight of this when you're bogged down in the day to day.

TRY ME

Connect
Connect

Desk booking redesign

OVERVIEW

FLYDESK wanted to make hybrid work easier for companies by creating a B2B application solution, and aimed to tackle one of the biggest cultural shifts in work-life balance.


The goal of this project was to develop the first iteration of a solution that allows facilitation of scheduling work locations

ROLE

UI/UX Design
User Research
Journey Mapping
Wireframing
Information Architecture
Interaction Design 
Design Systems

PERIOD

April 2021 - Ongoing

SCREENS