Campus Booking: Media Commons Redesign

Product Design
Role
UX/UI Designer
Timeline
3 months
Objective
The goal was to streamline the booking experience for students, admins, PAs, and liaisons, while retaining the platform’s adherence to the university's existing material design standards.

Create a concise paragraph about the initial state of the Media Commons booking system, highlighting:

- The cluttered interface, redundant calendar views, and confusing navigation.

- Lack of notification systems to guide users, and limited insights for users and admins.

‍
Scope
User Research, Wireframing, Prototyping, User Testing, High-Fidelity Design

calendar view before room selection and after

Problem & Impact

Problem Statement
Disjointed Calendar Views: Each room selection generated a new calendar, overwhelming users.
‍
‍Lack of Booking Status Visibility: Users couldn’t track reservation progress, leading to confusion.
‍
‍Limited Notifications: No system to inform users of reservation errors or updates.
‍
‍Inefficient Dashboard: Lacked structured views for different user roles (students, admins, PAs).
Solution
Streamlined User Experience
The redesign aimed to simplify the booking experience by consolidating the calendar, integrating notifications, and customizing views for each user role.
‍
‍User Testing & Iteration
After conducting usability tests, we organized the interface into three core views for students, admins, and PAs. The booking process was made transparent, with status updates and error notifications guiding users.

‍Material Design Consistency
Retained existing material design elements to maintain a familiar look and feel, with minimal disruptions to the user experience.

understand booking flow before redesign, Material Design library

Design Process

Step 1: User Research & Problem Identification
Conducted interviews and gathered feedback from students, admins, and liaisons to understand key pain points.
Analyzed how each user role interacted with the system, informing the core requirements of the redesign.
2. Wireframing & Ideation
Sketched initial wireframes to explore simplified calendar and notification concepts.
Created role-specific dashboard views to streamline booking management for different user types.

Wireframes: 1. Low-fidelity user flow 2. reservation for 4hours  3.Calendar view with progress bar and tooltip notification 4. Different User type top navigation

3. Prototype & Usability Testing
Built a low-fidelity prototype and tested it with students and admins, gathering feedback on the new calendar, notifications, and booking flow.
Incorporated feedback to refine the structure and ensure a seamless user experience.

1. Testing Booking user flow starting from user registration, room selecting and filling the required fields 2. Close view to the calendar, selected room view 3. Status for requested rooms.

4. High-Fidelity Design & Material Consistency
Developed a high-fidelity design that adhered to the university’s material design standards.
Integrated consistent color schemes, typography, and iconography for a cohesive look.

1. main booking flow 2. Status of requested room 3. Register and Selecting user status 4. Calendar View 5. Required Form View

Solution
Unified Calendar & Room Selection
The redesigned calendar consolidates room bookings into a single view, allowing seamless selection and date navigation without duplicating calendars.

‍Status Tracking and Tooltip
Integrated a tooltips system to inform users of reservation progress, errors, and updates, ensuring they are fully informed at every step.
Role-Specific Dashboards
Three user views for students, admins, and PAs, each tailored to meet their specific booking needs:

‍Students can check the status, leave notes, and delete reservations.

‍Admins & PAs have control over all room bookings, including approval, decline, and walk-in management options.

1. We have three use cases for user who want to book, for admins, and for PAs 2. Dashboard view for Admin view (PA Booking view is the same), 3. Only Admin have access for settings

Results & Takeaways
Improved Usability: Enhanced booking experience and clearer reservation tracking.

‍Reduced User Errors: Real-time feedback during booking process reduced common user errors.

‍Positive Feedback from User Testing: Post-design testing showed higher satisfaction scores and fewer booking-related issues.