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:
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.
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
Establishing a design system. This has helped the dev team to understand how and why we choose to implement certain components over others.
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.
Discovery
COMPETITOR ANALYSIS
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
DECISION
Together with product manager and company leadership, we decided the following were the sequence of features the app would need to fulfill the first MVP
Defining desk booking
THE PROBLEM
OLD BOOKING LIST DESIGN
OLD DESK BOOKING DESIGN
USER JOURNEY MAPPING
KEY ISSUES
Booking history
ITERATIONS FOR NEW BOOKING HISTORY
DESIGN FEATURES
Split the user bookings into upcoming and past, based on the assumption that users either want to know their upcoming bookings, or check past bookings in case they want to re-book previous desks quickly
Show 'booked' status to give users the feeling that their bookings are reserved for them
Show date and time on left-side for easy readability
Make each booking a clickable button allowing users to perform actions such as cancelling, re-booking, or modifying the booking
Minimal, structured design
Date and desk bolded for quick readability
IMPACT OF DESIGN CHANGE (HYPOTHESISED)
Users need to spend less time knowing what they booked
Users can easily tell if they made any booking at all for a certain day
Users have less cognitive load when processing information, decreasing risk of non-retention
Desk booking flow
OLD DESK BOOKING DESIGN
KEY ISSUES
Flow forces you to choose location first
Don't know who is sitting where in the office
Overcomplicated design in booking form
INITIAL LO-FIDELITY DESIGN
ITERATION
MAIN DESIGN CHANGES
Simplified booking form (Select details -> Review -> Confirm)
All selection related actions uses drawer only, overlayed on top of booking form
Clicking 'new booking' takes you to a full-page experience as opposed to a bottom drawer
USABILITY TESTING RESULTS
Users found it hard to locate the button for creating a new booking on the booking list
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 took more time in desk selection, and mentioned that it was hard to know which desk is which
Users wanted a way to know where other team-mates were sitting, so they can make an informed decision
Some users thought that there were too many steps in making a booking
ITERATED DESIGN
Hi-fidelity design
MAIN TRADE-OFF MADE
A few clients had asked for a visual floor plan for booking desks, and although it was in our roadmap to explore, we decided not to design that for the MVP for the following reasons:
Designing/developing a visually interactive floor-plan would have taken too much effort for the time-frame we had
Users would be accustomed to where specific desks are, thus a visual seating plan is not an absolute to develop for the MVP
Sitting near a 'favorite' employee is more important than sitting directly next to them
Instead of a visual floor plan, we showed avatars on the desks that people have booked so users can still have some information
FLOW OPTIMIZATION
User flow for booking a desk
KEY ASSUMPTIONS
Users typically will be part of a company that has only 1 office
Users typically have a go-to desk/area they work in
Companies usually have either an identified desk setup, or hot-desk (Design identified desk UXUI first)
SIMPLIFIED USER FLOW
Simplified user flow (with user preferences)
UI for office preferences
IMPACT OF DESIGN CHANGE (HYPOTHESIZED)
Users make bookings more regularly due to ease of use
User engagement would increase due to ease of use and intuitiveness of the simpler design
Information of other team-mates helps users make their decisions, improving app usage
Hong Kong
