Web Design, Product Strategy
Simplifying University's Event Reservation Portal
As a part of one of my core classes in the MS-HCI program, ‘Information and Interaction Design’, we were divided into teams and tasked to rework a website or an app flow they thought could be improved. We chose RIT's facility reservation website- RIT Events for this.
While working as part of a team of 3 students to redesign the overall website, we all contributed to each phase of the project, research, ideation, visual design. However, my major focus was on redefining and validating the user flow before moving to final designs.
Team
2 MS HCI students, 1 MFA Visual Design student
Date
Jan 2023 - May 2023
Current design issues
We started the project by analyzing the existing flow and conducting a quick heuristic evaluation to discover any critical and obvious usability problems. In order to validate our findings, we conducted usability test with 8 participants.
The following problems were found:
01
Complex Navigation
Poor organization of reservation templates
Elements scattered across different pages
Lack of flexibility to modify bookings
02
Confusing User flow
The system requires multiple(7-8) steps to complete a simple room booking
Redundant steps including pages and actions
03
Outdated design
Cluttered layout
Multiple CTA buttons
Delayed feedback for errors
Understanding users and limitations
The users include students, faculty and staff, student organizations, and event coordinators. Each user group has different needs, but they all require an easy, flexible, and efficient booking process. To understand end ensure the design aligns with users' end goals, we defined JTBD statements for each of the user group.
We read the documentation of the system and talked to RIT's IT team to understand the "why" behind certain limitations we noticed during the research. We kept these limitations in mind during our redesign process to make it more realistic.
Study rooms can be booked in 1 hour slots at a time.
This was done to avoid students hogging the study rooms by booking them back-to-back and make it accessible to everyone.
Templated are defined by the org using the system.
The templates basically determine the flow of the system based on the option users select.
Only 4 bookings are allowed in a day across the system.
This was again done to avoid students misusing the system and giving everyone an opportunity to reserve facilities.
Design Approach
Before jumping to design ideation, we conducted an analysis of various booking portals understand the industry best standards, visual design pattens, and user flows for different booking processes. The main observation was use of progressive disclosure and flexibility on these websites so that the user is not overwhelmed with information and form fields.
Analysis of various booking portals; Apple demo appointment (top left), Expedia hotel booking (top right), WeWork office space booking (bottom center)
Based on the research, we designed the basic user flow for the most complex use case like reserving a specialty space, and simplifying it for less complex task like booking a study room. We outlined the major steps and pages that user will go through, before going into the details. We were able to decrease the number of steps taken to book a facility from min of 8 to 6 overall.
Analysis of various booking portals; Apple demo appointment (top left), Expedia hotel booking (top right), WeWork office space booking (bottom center)
We reduced the total number of steps required to book a facility
The current user flow contains many redundant steps the user has to go through. For example, users are prompted to select a setup type even when it wasn’t available. To improve usability, we modified the flow so that the setup selection is only required when the chosen reservation type supports it; otherwise, the option remains inactive.
Reduced redundancies by showing fields/elements only where they are valid
Efficient design via A/B Testing
We initially ideated different ways to present the booking interface page from where users can select a facility. While we came up with ideas to simplify the design, we quickly realized that the current design might be the most efficient as it shows availability/unavailability of multiple facilities on a single page. In order to validate this, we conducted a quick A/B testing and gathered feedback from the test participants.
The two versions used for A/B testing. V1 (left) shows current existing grid format, V2 (right) shows a list format.
The findings led us to go with a hybrid design approach where displayed the grid list wise. This made the interface cleaner and visually pleasing while maintaining the efficiency of the previous design. It was also more intuitive to select and complete the booking process.
Analysis of various booking portals; Apple demo appointment (top left), Expedia hotel booking (top right), WeWork office space booking (bottom center)
Outcome
38% increase in efficiency
Decreased the total number of steps to complete tasks like booking a facility.
30% increase in SUS score
Post task survey indicated users preferred the redesigned website.
The final result was a clean and intuitive interface consistent with industry standards and easy to understand for the users. We conducted a final user testing with 4 participants which resulted in 50% increase in SUS score compared to the existing design.
Reflection and Learnings
Our primary objective was to uphold the essence of the current website and RITs brand, and focus on refining and optimizing the elements that resonated well with users while simplifying areas that detracted from their overall experience.
I developed a design strategy that focused on achievable improvements while considering the practical implications of implementation. This approach ensured that my design decisions were not only desirable from a user experience perspective but also feasible within the context of the operational and technical realities.
