Reserve a Meeting Room

Introduction

Summary

I evaluated the current experience of the Boulder Public Library's website and proposed a high fidelity redesign. After struggling to reserve a meeting room, I realized that public, government spaces don't get as much access to designers as companies do, and it would be beneficial to society if these communal spaces had intuitive, online interfaces. With this in mind, the outcome of my project is a streamlined and visually organized desktop and mobile version of the room reservation process.

My role

As the only designer and researcher on this project, I was responsible for auditing the original experience, conducting user tests, and building low, mid, and high fidelity designs.

The challenge

The problems I looked to solve with my redesign were decluttering the pages, creating a consistent and visually pleasing style, and improving the visual hierarchy. The main limitations were the time constraints. As a full-time student working on a client project in addition to this one, I had to prioritize my tasks and deadlines to ensure that I had my deliverables ready on time for multiple projects.

Research

Conducting UX evaluation

Through auditing the current experience of the Boulder Public Library's website against 50 proven UX heuristics, I found that there was generally a lack of consistency and poor use of white space. Whether it was the location of page elements or styling, each page seemed to have its own structure and look, which made the site look confusing and less cohesive as a whole.

Areas of opportunity

The site needs better use of white space with less content cluttering up the page
The branding needs to be consistent with a simplified background and color palette with good contrast
The site needs consistent and structured visual hierarchy to orient users to where they are in the site
The font and type need to be consistently styled such that it is easy to read the content on each page
Call-to-action buttons and links need to be immediately visible and actionable/pressable

Design

Redesigning the single track user flow

To determine what screens would make up the new reservation experience, I first identified the path users would take on the current site. Then, I made a new user flow to illustrate an improved set of steps users would take in my redesigned experience. The goal was to create a logical, efficient, and intuitive process between landing on the home page and reserving a meeting room.

Sketching initial concepts

Based on my proposed user flow, I drew out low fidelity wireframes for both desktop and mobile. The goal was to produce a preliminary succession of screens and general layout for each page. As opposed to the cluttered pages in the original reservation experience, I made sure to use simplified page elements that utilize white space to create a clear hierarchy.

Low fidelity wireframes

Increasing concept fidelity

With my initial ideas conceptualized, I brought my sketched wireframes into Figma to refine the sizing and spacing of my page elements. I used grid and real text from the Boulder Public Library's website to make sure that my wireframes better captured the shape and layout of my content. In this stage, I used greyscale and image placeholders so that I wouldn't get distracted by small details.

Mid fidelity wireframes

Building the interactive high fidelity prototype

To build from my mid fidelity wireframes, I added colors, branding, and imagery to make my designs resemble what the developed site would look like. Then, I prototyped the screens together on Figma to capture how it would feel to progress through the reservation experience. My designs use a minimal color scheme, cohesive set of page elements, and clean layout to guide the user without overwhelming them.

High fidelity desktop and mobile prototypes

Receiving professional feedback

As I built my wireframes through each fidelity, I received feedback from Brittney Urich VanHorssen, a UX product manager at Amazon Business. This helped me design my experience with industry standards and practices.

Points of feedback

For each room, it would be helpful to add the room capacity
80 px or less of space between all sections on desktop
32 or 40 px of space between a section title and content
Start all of the content on the desktop pages ~48 px below the nav bar
Reduce the height on the bottom of the footer to 80 or 96 px.
Consider adding a progress stepper that outlines the number of steps required to complete
Put asterisks for required fields at the end of a label
Make "continue" or "submit" buttons inactive or unclickable until all required information is selected/filled out

Changes I made

I added room capacity to give users an idea about how large each meeting room was
I reduced the vertical height between my page elements. This tightened up the spacing, which made portions seem more related to one another
I added a progress stepper to better guide users through the reservation process and show them what to expect
Asterisks were moved to the ends of labels
I created inactive states for my button components and used them as directed

Evaluating my work

Conducting usability tests

To gather feedback for my interactive reservation experience, I wrote a script and ran moderated usability tests with 3 users aged between 18 and 60 years old. Each user had experience in both using library websites and reserving a meeting room prior to testing. These tests ensured that I would get multiple perspectives on whether my design effectively improved the reservation process or not.

Pain points

The labels on the progress stepper did not quite match what was displayed on the screen
- - For example, the library selection screen started with the date and only displayed available libraries once a date was selected. However, with the progress stepper labeled “Library,” users wondered why they didn’t immediately see available libraries
  - When the progress stepper was on “Details,” users expected to see details about the library meeting rooms rather than being prompted to enter in their own personal info
There wasn't enough information displayed about each meeting room
- - Multiple testers wondered if they could select multiple time slots for various rooms in the same library
  - They also wanted to know more about each room like if there was a whiteboard, projector, or outlets
On the confirmation page, users wanted to see some text stating that they would get a confirmation email with their room reservation and check in information
For the desktop experience, the nav bar needed to be sticky. For the mobile experience, both the nav bar and the progress stepper needed to be sticky because there is more vertical scrolling

Updating my design

To fix the association of the progress stepper with the screens, I made the library choices visible with the date selection on the same page. This way, users will understand why the stepper is labeled “Library.” I also replaced the “Details” label with “Your info” to indicate that users will need to enter in their personal details. On the time selection page, I replaced “Room availability” with “Select room time slots.” I made sure to add icons for users to click if they want to see more information about each room aside from max occupancy. For the confirmation page, I included a message saying that users will receive an email with their room reservation information and check in details. Finally, I made the nav bar and progress stepper sticky as requested for easy access to page links and reservation steps.

Reflection

Moving forward

When I asked my testers about their prior experiences using a library website, some words they used to describe those experiences were “old,” “cramped,” and “visually unappealing.” The buzzwords I heard for my redesign were “modern,” “clean,” and “sleek.” Considering the positive feedback, I feel that my project was a successful improvement from the original. If I had more time, I would want to show my designs to the Boulder Public Library staff to get their feedback. This way, I could gain better perspectives and needs from an actual client. Additionally, the meeting room reservation process is only one aspect of the Boulder Public Library website, so I would like to redesign other parts of the site, especially searching for books and media.

What I learned

Visual design: By receiving professional design feedback, I was able to refine my usage of vertical spacing to match UX standards in the workforce. This helped me grow as a designer and prepare for industry
Accessibility practices: Designing for both desktop and mobile experiences allowed me to learn more about responsive web design and breakpoints, which is a major aspect of accessibility in online spaces
UX audits: Prior to this project, I conducted usability tests to understand the current state of an experience. While UX audits don't substitute for usability testing, they allowed me to identify areas for improvement, envision my new experience, and prioritize where to focus my redesign in significantly less time

Page updated

Google Sites

Report abuse