case study
Meeting room grid
Meeting
room grid
My role
We were a small team of three designers reporting directly to the Head of UX/CPO. I worked closely with a PM and front-end engineers to revamp this whole section. On-site research was done together with a team mate.
We were a small team of three designers reporting directly to the Head of UX/CPO. I worked closely with a PM and front-end engineers to revamp this whole section. On-site research was done together with a team mate.
Old implementation
The Meeting Room Grid is one of the desktop's most used functions. It's used by office employees and various administrator roles like receptionists, office managers, reservation teams and personal assistants.
The Meeting Room Grid is one of the desktop's most used functions. It's used by office employees and various administrator roles like receptionists, office managers, reservation teams and personal assistants.
research
Heuristic analysis
I started with a good 'ol heuristic analysis of UX problems, focussing on components and forms, listing interaction-level and layout-level problems.
I started with a good 'ol heuristic analysis of UX problems, focussing on components and forms, listing interaction-level and layout-level problems.
Uservoice
UserVoice is a third-party platform we subscribed to. A forum-style website where users can create threads to submit feedback, and upvote & comment on each other's submissions. Our PMs can then engage with our user's feedback and submit statuses for which ideas have been picked up.
UserVoice is a third-party platform we subscribed to. A forum-style website where users can create threads to submit feedback, and upvote & comment on each other's submissions. Our PMs can then engage with our user's feedback and submit statuses for which ideas have been picked up.
To help keep our conversations there constructive (and nudge users away from using it as a complaints board) we used the phrasing "Submit your ideas".
To help keep our conversations there constructive (and nudge users away from using it as a complaints board) we used the phrasing "Submit your ideas".
This was a helpful layer of feedback gathering that added to our understanding of our user's needs. Given it's wide-spread use, we had a fair amount of ideas shared for our Meeting Room Grid.
This was a helpful layer of feedback gathering that added to our understanding of our user's needs. Given it's wide-spread use, we had a fair amount of ideas shared for our Meeting Room Grid.
On-site visit
In addition to the above methods, we also did an on-site visit to one of our client's offices. The client is a prominent UK-based law firm with a large office building in central London. They had been having some issues with our product, however their feedback left us a little confused as they weren't problems we were already aware of or could easily picture happening.
In addition to the above methods, we also did an on-site visit to one of our client's offices. The client is a prominent UK-based law firm with a large office building in central London. They had been having some issues with our product, however their feedback left us a little confused as they weren't problems we were already aware of or could easily picture happening.
We collated a list of issues they were having and did a deep dive into what their processes look like in their building. One key finding, was that they had two separate reception desks. One on the ground level to screen expected & unexpected visitors, and one on the 1st floor up to welcome guests, monitor all meeting rooms, and respond to immediate needs like sudden changes to bookings.
We collated a list of issues they were having and did a deep dive into what their processes look like in their building. One key finding, was that they had two separate reception desks. One on the ground level to screen expected & unexpected visitors, and one on the 1st floor up to welcome guests, monitor all meeting rooms, and respond to immediate needs like sudden changes to bookings.
Meanwhile, there was a Reservations Team further up the building that handles advance room requests of all employees, and plans space utilisation throughout the building. This team will generally collate all meeting room requests throughout the day, and arrange bookings on the meeting room grid to optimise space usage and demands on service/cleaning staff.
Meanwhile, there was a Reservations Team further up the building that handles advance room requests of all employees, and plans space utilisation throughout the building. This team will generally collate all meeting room requests throughout the day, and arrange bookings on the meeting room grid to optimise space usage and demands on service/cleaning staff.
Design refresh
Goal
Goal
The existing grid was very dated, clunky and unintuitive. My goal was to bring the design language into this century, set a new standard and put my new design system to the test.
The existing grid was very dated, clunky and unintuitive. My goal was to bring the design language into this century, set a new standard and put my new design system to the test.
That said, we're always apprehensive to make a large update on UI only, so we made sure to bring new UX value to the table as well.
That said, we're always apprehensive to make a large update on UI only, so we made sure to bring new UX value to the table as well.
Design System: Web
When I started my role we didn't have a design system. At this stage I had been building one up from scratch and using refreshes like this to start rolling it out.
When I started my role we didn't have a design system. At this stage I had been building one up from scratch and using refreshes like this to start rolling it out.
Having consulted UserVoice and our on-site visit findings, we listed a number of "low hanging fruit" feature additions to give users something new along with the refresh.
Having consulted UserVoice and our on-site visit findings, we listed a number of "low hanging fruit" feature additions to give users something new along with the refresh.
Quick book
Quick book
Quick room search
Quick room search
Display room status
Display room status
Improved setup & cleanup time display
Improved setup & cleanup time display
Change room with drag & drop
Change room with drag & drop
Swap bookings with drag & drop
Swap bookings with drag & drop
Fixed usability issues throughout
Fixed usability issues throughout
Draft mode
The truth of cost vs. benefit
The truth of cost vs. benefit
One feature I was keen to introduce was deemed out of scope. Reservation Teams collate room requests from all employees and place "ghost" bookings on the grid to block out certain times. At the end of the day, they'd shuffle bookings around – as per their requirements stated above – and commit the bookings afterwards. This then sends out notifications to employees stating which rooms they have.
One feature I was keen to introduce was deemed out of scope. Reservation Teams collate room requests from all employees and place "ghost" bookings on the grid to block out certain times. At the end of the day, they'd shuffle bookings around – as per their requirements stated above – and commit the bookings afterwards. This then sends out notifications to employees stating which rooms they have.
These "ghost" bookings aren't an ideal way to go about this. A draft mode would be much more suitable so I created some concepts for it. However, after a POC from engineering, and there being no other clients who'd need this, the concept was considered not worth the cost.
These "ghost" bookings aren't an ideal way to go about this. A draft mode would be much more suitable so I created some concepts for it. However, after a POC from engineering, and there being no other clients who'd need this, the concept was considered not worth the cost.
Site-wide refresh
Goal
Goal
The Meeting Room Grid refresh was really well received, and over time my design system for web started feeling more fully-fledged.
The Meeting Room Grid refresh was really well received, and over time my design system for web started feeling more fully-fledged.
It took some time to get the green light for it – as the engineering cost was high – but we eventually got the go ahead to refresh major sections across the whole platform. These all included varying degrees of change, from simple UI-level refreshes to larger UX-level overhauls.
It took some time to get the green light for it – as the engineering cost was high – but we eventually got the go ahead to refresh major sections across the whole platform. These all included varying degrees of change, from simple UI-level refreshes to larger UX-level overhauls.
In a nutshell, the updates included:
In a nutshell, the updates included:
Consolidated IA of global nav structure and UI refresh
Consolidated IA of global nav structure and UI refresh
A secondary nav drawer
A secondary nav drawer
New modular top bar for all main sections
New modular top bar for all main sections
Improved forms, tables and spacial patterns
Improved forms, tables and spacial patterns
Avatars
Avatars
Redesigned sections:
Redesigned sections:
Today
Today
Desk Booking Grid
Desk Booking Grid
Find a Colleague
Find a Colleague
User Management (incl. UX overhaul)
User Management (incl. UX overhaul)
Booking Rules
Booking Rules
Compromise
Compromise
The other sections of the platform (mainly under Setup and Advanced Setup) are quite huge. The platform is very feature rich, however most features aren't frequently used nor are even visible to most end users and admin roles available. Certain admin-heavy sections had to remain as they were in order for this release to be possible.
The other sections of the platform (mainly under Setup and Advanced Setup) are quite huge. The platform is very feature rich, however most features aren't frequently used nor are even visible to most end users and admin roles available. Certain admin-heavy sections had to remain as they were in order for this release to be possible.
Sample screens
Related Works
Workplace booking, space management.
Case studies
Deeper dives into product developments.
© Richard Gouw 2024