My Role

Literature Review

Surveys and Interviews

Wireframing

Prototyping

User Testing

Team

Michelle Chen

Bu Li

Matias Oddo

Rosalyn Carr

Tools

Figma

Qualtrics

Timeline

Sep-Dec 2022

Two phone screens show the UBC StudySpace interface. The left screen displays the dashboard with confirmed, ongoing, and draft meetings. The right screen shows the poll feature, allowing users to select availability using a calendar and time slots.

At a Glance

Overview

UBC.STUDYSPACE.CA is a mobile-friendly website for UBC students to schedule activities and find study spaces on campus using their Campus-Wide Login (CWL). Developed during an HCI course in UBC’s Designing for People program, the project was led by master’s and PhD students from diverse fields.

Problem

Study spaces are essential for academic success on campus, but UBC students often struggle to find, schedule, and book spaces with the right amenities—especially when coordinating with groups.

Solution

A mobile-friendly platform designed for UBC students with a Campus-Wide Login (CWL) to:

  • Create polls to gather group availability.

  • Book study spaces with an option for recurring bookings.

  • Check reviews to ensure the space meets quality standards.

Prototype Walkthrough

Explore the platform step-by-step with an interactive prototype walkthrough, showcasing key processes like creating polls, booking spaces, and checking reviews.

DESIGN PROCESS

Understand the Problem

⭐️The Problem

UBC students face difficulties in coordinating group schedules, booking study spaces, and ensuring the spaces meet their needs, especially with the right amenities and conditions.

📝 Research Plan

To design a tool that genuinely meets user needs, we undertook a multi-step research process, including a literature review, competitive analysis, and surveys/user interviews.

Literature Review

We reviewed 12 studies on how students use learning spaces at various universities. Our key findings highlighted two common pain points:

  • Students struggle to find a study space that fits everyone's needs in a group.

  • Existing tools primarily support individual searches, neglecting the group context.

These insights helped us identify a gap: no solution integrated both scheduling and space booking for group activities seamlessly.

 1

Competitive Analysis

We examined existing solutions like UBC’s informal learning spaces tool, Harvard Library’s FIND a Space, and When2meet. Although these platforms help students schedule or book spaces, we identified a major shortfall:

  • No single tool combines both scheduling and booking functions, forcing users to navigate multiple platforms.

  • Most tools cater to individuals, with limited features that support group-specific needs.

2

Surveys & User Interviews

Next, we wanted to understand how users manage study space booking and how their group roles influence the process. Through user surveys and interviews, we gathered insights on:

  • Roles in Groups: We identified two types of users—Planners (actively organizing) and Floaters (passively participating).

  • Group Dynamics: We discovered that planners need more control and flexibility when booking spaces, while floaters just need their basic needs met (e.g., availability of seating and outlets).

3

💡Key Insights

  • Student Preferences: Both students and faculty prioritize functional features (e.g., seating, outlets) over amenities.

  • Target User: We shifted our focus to "planners," the ones who primarily drive the process of finding and booking study spaces.

  • Rebooking Challenge: For many students, recurring meetings (weekly) are essential, but rebooking the same space each week is difficult unless they are part of an official group or society.

A bold, yellow curved arrow icon pointing downward.

Design Direction Shift

Armed with this information, we pivoted from developing a general space-finding tool to focusing on a scheduling and booking platform tailored to meet the needs of group organizers—those "planners" who actively coordinate meetings.

DESIGN PROCESS

Sharpen the Focus

Personas

To develop a deeper understanding of our users, we compiled insights from interviews into an affinity diagram, clustering responses by Attitudes, Aptitudes, Motivations, Skills, and Activities. This process helped us define our Primary Persona, Secondary Persona, and Anti-Persona for the "planners" and "floaters."

Planner

Profile picture of a young man with short dark hair, smiling warmly at the camera, representing the primary persona "Steve."

Primary Persona: Steve, The Project Go-Getter

Steve is a student responsible for organizing recurring group meetings. He takes charge of finding and booking spaces to meet his group’s academic needs efficiently. Steve values ease and efficiency in managing scheduling and logistics.

*Steve embodies our key insights by managing space scheduling and coordinating group availability.

Profile picture of a young woman with long dark hair, softly smiling, representing the secondary persona "Daniella."

Secondary Persona: Daniella, The Event Planner

Daniella is a student who books large, well-maintained spaces for events. She ensures specific requirements, such as equipment and space condition, are met. Though less involved in scheduling, she ensures the space suits her group’s needs.

*While not as involved in scheduling as Steve, Daniella plays a critical role in ensuring that her group's unique requirements are met.

Floater

Profile picture of a young man with dark hair, smiling, representing the anti-persona "Bob."

Anti-Persona: Bob, The Floater

Bob is a student with a relaxed, go-with-the-flow attitude. He plays a passive role in space booking, leaving the planning to others. As long as his basic needs are met, Bob is flexible about space details.

*Bob’s passive role highlights the challenge of designing for users who don’t take initiative but still need functional spaces.

User Task Example and Analysis

We identified the goals of both Steve and Daniella and created task scenarios with the task analysis diagram to explore their processes. This helped uncover challenges and highlight key design opportunities that would shape the system’s features.

Task Example 1: Seamless Scheduling and Booking for Steve

Steve schedules a team meeting by polling members for availability and then books a study room. If someone requests a reschedule, he has to redo the poll and rebook the room, which he finds frustrating. He wants fewer tool switches and earlier notifications of changes.

Design opportunities:

  • Integrate the polling and booking processes into one platform.

  • Enable easier rescheduling without redoing polls.

  • Provide real-time notifications for schedule changes.

A lightbulb icon

Task Example 2: Simplifying Recurring Bookings for Steve

Steve’s team meets weekly for group assignments, but he can only book a few weeks in advance. This forces him to repeat the booking process each time, sometimes having to choose different rooms. Steve wants an easier way to book recurring meetings.

Design opportunities:

  • Introduce a streamlined recurring booking feature to reduce manual weekly bookings.

  • Allow users to book rooms for the entire term when possible, minimizing frequent rebookings.

A lightbulb icon

Task Example 3: Ensuring Room Amenities for Daniella’s Event

Daniella, an event organizer, books a room for a workshop with a projector. She uses the current booking tools to find a room that meets her capacity and equipment needs. However, after booking, she finds the projector is broken and, with no time to find another room, requests repair, hoping it's fixed in time.

Design opportunities:

  • Implement real-time updates on room amenities (e.g., projectors, outlets).

  • Offer condition updates to boost user confidence in the booking process and prevent issues.

A lightbulb icon

DESIGN PROCESS

Explore Possibilities

Core Design Requirements

From our task analysis, we established three critical design requirements:

A calendar and clocks icon symbolizing Integrated Scheduling and Booking.

Integrated Scheduling and Booking

Users are frustrated with using separate tools for scheduling and booking. Our design combines these functions for a seamless experience.

01

A phone screen with confirmation icon symbolizing Easy Rebooking.

Easy Rebooking

Users appreciate the ability to rebook spaces easily, addressing a common frustration and enhancing usability.

02

A dialogue bubble with lines of reviews icon symbolizing Space Condition Transparency.

Space Condition Transparency

Providing information on space conditions improves user satisfaction. Though not critical, this feature is important for maintaining a quality user experience.

03

Conceptual Model: "Take-out Ordering and Pick-up" (TOP)

We developed the TOP conceptual model, inspired by group orders in food delivery apps, to guide our system design and interface development. The model was crucial in shaping how users interact with the platform, ensuring an intuitive booking and scheduling process. By providing a clear structure, it helped us focus on building a user-centered, cohesive system that aligned with user needs.

How it Works:

  • Group Availability: Like choosing a cuisine for a group, the system finds overlapping availability for meetings.

  • Communication & Filtering: Users share schedules and preferences, filtering options to match group needs.

  • Booking: Once a suitable space is agreed upon, the room is booked—similar to placing a group take-out order.

  • Post-Meeting Feedback: Users can leave feedback on the space, much like reviewing a meal. The system also allows rebooking but only if attendance is confirmed to prevent misuse.

Storyboard

Task 1: Planning, Polling, Booking, and Rescheduling

Task 2: Recurring Bookings

Task 3: Booking a space that is in good condition 

DESIGN PROCESS

Bring Ideas to Life

Low Fidelity Prototype

In the lo-fi design phase, we focused on building the core features of polling, booking, and rebooking. This design addressed the need for group coordination and space selection, ensuring users could easily organize meetings without using multiple tools.

  • Polling and Booking: The lo-fi prototype focused on allowing users to poll for available times and book a space based on their room equipment preferences.

  • Rebooking Feature: Introduced a physical check-in system to support rebooking and prevent abuse. We integrated UBC’s existing tool iClicker Cloud, to verify physical check-ins. iClicker Cloud is a classroom response system that allows students to check in and participate in activities via their mobile devices. It can be used for physical check-ins by requiring users to confirm their presence in a reserved space, ensuring that only those who attend the booked space are eligible for rebooking, thus preventing system abuse.

    *Review Feature: To improve Space Condition Transparency, we developed a review feature allowing users to leave comments about the room and its equipment. However, due to time constraints, we couldn’t fully develop the feature or its task scenario. We did, however, incorporate a "See Recent Reviews" button to enhance the service and pave the way for future iterations.

The following is a low-fi prototype demo showcasing each core feature:

DESIGN PROCESS

Test and Refine

User Testing + Cognitive Walkthrough

We conducted user testing and cognitive walkthroughs to evaluate the low-fidelity prototype, focusing on key tasks such as polling for availability, booking, and rebooking study spaces. These tests allowed us to assess user comprehension, usability, and overall satisfaction with the design. Based on the feedback, we made several key updates and enhancements that directly informed the improvements in our medium-fidelity prototype.

Before

👤 “I’m not sure what would happen. if I click the + icon.”

Users found the "+" icon for creating a poll unclear.

Dashboard Overview before the iteration: The dashboard shows upcoming meetings with participants and meeting details, including icons for amenities like power outlets, whiteboards, and projectors.

After Refinement

We resolved the issue with a prominent "Create Meeting Poll" button at the top of the dashboard, improving visibility and making the action easier to identify, reducing confusion.

Dashboard Overview after the iteration: The dashboard displays a button to create a meeting poll, along with confirmed and ongoing meetings with details.

Before

New Meeting Creation before the iteration: A screen to create a new meeting where the user can add participants by email, specify the meeting duration, and send the invite.
Room Selection with Voting Results before the iteration: Screen displaying room options for booking, showing voting results within each room suggestion, along with the voting status of each member at the bottom.
Room Options with Voting after the iteration: Screen displaying available room options with voting results within each room card, along with the voting status and written statements of each invitee at the bottom.
Meeting Poll Creation after the iteration: Screen for creating a poll with tooltips and step-by-step instructions guiding the user to add the meeting name, attendees, and duration options.
Dashboard Overview after the iteration: The dashboard displays a button to create a meeting poll, along with confirmed and ongoing meetings with details.

After Refinement

👤 “What if I have multiple projects or an unsent poll? Where can I find those?”

Users were unclear about their meeting statuses, especially when handling multiple projects.

Dashboard Overview before the iteration: The dashboard shows upcoming meetings with participants and meeting details, including icons for amenities like power outlets, whiteboards, and projectors.

We introduced labeled tabs like "Confirmed," "Ongoing," and "Draft" on the dashboard to improve clarity and help users track meetings.

Before

After Refinement

👤 “Would be nice if there were instructions for the process.”

User feedback revealed confusion during the polling process.

We added tooltips and clearer instructions of steps to guide users step-by-step, reducing the learning curve and making the process more intuitive.

Before

After Refinement

👤 “Does the checkmark mean they’re available or they have voted?”

The Voting Status feature caused confusion, as some users thought the checkmark indicated their availability.

We added a written statement to clarify the checkmark's meaning, helping users better understand the voting results.

Medium Fidelity Prototype

We conducted user testing and cognitive walkthroughs to evaluate the low-fidelity prototype, focusing on key tasks such as polling for availability, booking, and rebooking study spaces. These tests allowed us to assess user comprehension, usability, and overall satisfaction with the design. Based on the feedback, we made several key updates and enhancements that directly informed the improvements in our medium-fidelity prototype.

Log-in and Create a New Poll 

Receive the Poll, Fill Out the Information, and Booking

Continuation of the booking process in the mid-fi prototype, showing available room options with voting results and a 'Book' button, followed by a confirmation message of successful room booking for the selected date and time.

Rebooking

Rebooking process in the mid-fi prototype, showing an email confirmation of the room booking with an option to rebook for the next week, followed by the rebook interface and a successful rebooking confirmation.

Design System

Palette

We aimed for a professional and organized vibe with a touch of approachability in our color palette. Poseidon blue creates a sense of structure and reliability, while Sultan Gold adds warmth and draws attention to important actions without being overwhelming.

Primary

Secondary

Accent

Typography

We chose to use Inter across our interface due to its versatility in offering a wide range of weights and styles.

Image of typography Inter showcasing various text styles: large bold 'Title' at the top, followed by 'Heading 1,' 'Heading 2,' and 'Heading 3' in descending sizes. 'Body' and 'Text' appear in smaller, regular font styles below.

Inter 22

Inter 18

Inter 18

Inter 16

Inter 14

Inter 12

Takeaways and Reflections

First Experience with User Research

This project was my first formal experience with user research and design, making it one of the most memorable in my journey. I learned how crucial it is to rely on research over assumptions. Often, what we think users need doesn’t align with actual results, and being able to pivot in response to new insights is key.

The Value of User Testing and Iteration

One of the biggest takeaways was the value of user testing and iteration. Testing helped us fine-tune our design, bringing us closer to what users actually needed. It showed me that iteration is not just about refining—it’s essential to creating meaningful user experiences.

Team Achievements

As a team, I’m proud of the rebooking feature we developed, which addresses a significant pain point for recurring meetings. Our decision to integrate UBC’s iClicker technology also added real value, showing the importance of utilizing existing resources.

Working Within Constraints

This project taught me how to work within constraints and prioritize. Though we couldn’t fully develop the review feature, we incorporated a "See Recent Reviews" button as a placeholder for future iterations. Sometimes, hitting 80% of the goal and planning for future phases is the best approach.

In the end, this project was an invaluable learning experience in balancing user needs, team efforts, and timelines. I’m eager to apply these lessons in future work.

Coming Next

This project started as a side initiative while I was a barista at Baroness Bubble Tea. Driven by customer feedback on the online ordering challenges, I took the opportunity to improve the process and begin my UX case study journey, applying user-centered design principles.