Designing a meeting room management Web App

4 min readApr 8, 2021

The Design Challenge

The purpose of this project is to design a better meeting room management experience for company XX. There are 1000 employees and more than 200 meetings going on every day in the company’s building. As a UX designer, my task is to create a meeting room management experience that improves the overall meeting experience for the employees at company XX and ensures the most efficient utilization of the meeting rooms. The target user group will be the employees at company XX.

Ideation

I decided to create a Web App to approach this design challenge. While user experience is not limited to apps and interfaces, smartphones and laptops are still the most in-demand mediums for handling business nowadays. Since the functionalities are relatively simple, building a Web App should be the most feasible way to address this problem. Some other benefits of a Web App can be low-cost and easier to build; can be accessed on both mobile devices and computers; as well as, no installation and easy maintenance.

I started by listing some key features for this Web App:

create reservations
search for rooms/filtering
view the availability of the meeting rooms
view/cancel reservations
sign up for notifications (when desirable rooms become available after other users cancel their reservation)

Design

After setting up the key features of this Web App, I started to organize the wireframe of this project. Below you can find the sitemap. Building the sitemap helps me to outline the hierarchy and placement of essential features.

Sitemap

Users will log in with their company ID through the log in page.

Users can create a reservation by filling out their desired meeting time, the number of participants (room type), and the equipment (projector, monitor, whiteboard & marker) they need on the create a reservation page. After confirming the information, the available rooms (search result) will show up, which allows users to complete a reservation.

Users can also make reservations on the view availabilities page. After filtering out room type and desired equipment, rooms will show up in a table form will color-coded cells that represent available and unavailable rooms. Users can simply swipe (on mobile) or drag across (on the web) to “paint” across available times and make a reservation.

Last but not least, users can view their reservations on my reservation page. This page also allows users to sign up for notifications (join a waitlist). They can either receive an email or a text message when another user cancels a reservation.

Wireframe

Due to time constraints, this project will focus on the mobile aspect of the Web App. When building the wireframe, I narrowed down my focus to three key functions:

search/filter for available rooms
view available search result & complete reservation
view availabilities on a table form

The first screen prompts users to fill in some specifications about their meeting in order to filter out the available rooms. After completing the specifications, the requested available rooms will show up on the second screen in which users can select their desired conference room and then complete a reservation.

The last screen demonstrates another feature of this Web App, where users will be able to get a holistic view of the availabilities. They can also make reservations on this page by clicking the “available cells”.

High-fidelity Mockup

For the High-fidelity Mockup, I choose to refine my first wireframe since I think it is the most in-demand function for this App. The basic layout of this screen followed what I designed on the wireframe stage. I slightly changed the wording and the shape and organization of the buttons. Moreover, adding color and using different fonts/fonts sizes provides another layer of hierarchy, which can hopefully help users to make the right move both effectively and intuitively.