Room Reservation Phone App UI

How to reserve a meeting room without actually trying because I have trouble following instructions and don’t want to learn.

This project was inspired by many frustrating experiences of trying to reserve a meeting room. Sometimes it was because the UI was too cluttered. Sometimes it was because the option to book a room required several obscure steps. In one case it was because I was using Firefox and the room reservation site was designed for Internet Explorer, although that’s more of a UX issue than a UI one (but still kind of important). In any case, I thought maybe I could try making my own UI for a hypothetical room reservation phone app. It can’t be that difficult, right?

This UI was built using the following:

• Figma

• Mac computer

• Windows 10 computer

Jump to:

• UX Design

• UI Design

• Interactive Prototype V1

• Feedback

• Interactive Prototype V2

I wanted to simplify the functions as much as possible, paring the options down to only the necessary ones. In the end, these five functions remained:

• Log in/log out

• Make a reservation

• View reservations

• Cancel reservation

• Change user password

I also wanted to build in some redundancy, in the sense that there wouldn’t be only a single way to get to the screen that allows the user to make a reservation. Along that same reasoning, I thought of putting a “My account” button on a header area. That way the user could quickly find/access the change password and log out options.

Back to top

The main focus of the UI design was to make everything as clear as possible for the user to understand, which could be summarized through these objectives:

• Use the fewest number of clicks to get to the intended screen (e.g., the user doesn’t need to memorize a series of screens to jump through in order to change their password- the option’s there as soon as they click the “My Account” button)

• Reduce the amount of active learning (no “What does this button actually do??”)

• Pick a simple, clean typeface (for ease of reading)

• Design a clear, logical layout (e.g., all buttons are dark blue with light font color)

• Choose a non-distracting color scheme (so user can focus on reserving their room and not wonder why there are random splashes of dayglo orange)

Back to top

After putting together the screens and interactions, I had a functioning Figma prototype, which you can visit by clicking the image below (or by clicking here). As it turned out, it takes a decent amount of effort to put together a UI, and it’s not as simple as I thought to build one that’s easy to understand and use.

Back to top

Even though I thought the UI was user-friendly, what would others think? I reached out to Ruige Chen, an experienced UX designer at CSG (and 2nd place winner of the 2021 Plains Division Humorous Speech Contest) for feedback. Although he mentioned that the UI and style was clean across the entire app, he recommended:

• Adding a “Forgot your password” option on the log in screen

• Moving the “Cancel” buttons on the View Reservations screen to create more space for potential reservation details text

• Adjusting the alignment for better visual flow, e.g., change center alignment to left to make it easier to visually scan the screen

Which led me to refine the design.

Back to top

The updated UI for RSRVD V2 incorporates the feedback I received: it’s easier to scan (for those who are used to reading left-to-right), buttons are moved to make more space for text, and the user can reset their password without needing to log into their account. From initial concept to feedback to revision, this project was really helpful in not only gaining Figma experience but also with an iterative design process. It may not be as easy as I thought to build a user-friendly UI, but it was definitely interesting and fun!

Back to top