Queue Me In💡

Team

2 Product Designers;
4 Developers;
1 Product Manager

Timeline

Jan-May 2023

Skills

User Research
Wire-framing
User Testing
Visual Design
Interactive Prototyping
...

Tools

Figma
Procreate
Slack

Overview

As the product designer, I implemented the "add a new class feature" in an 8-person cross-functional team, creating user flow sketches, wireframes, mockups, and prototype interfaces with a data-driven approach.

Click Here to Access Queue Me In Website!

Background

The Office Hour Helper🔧

Queue Me In removes the frustration from office hours by helping students get support and professors better understand their classes. 

Background

The Office Hour Helper🔧

Queue Me In (QMI) is an office hour management tool for students, professors, and TAs

Student: join the office hour queue and ask questions about the coursework.
TA: host office hours and answer student questions
Professor: see office hour statistics to better arrange their classes

Product Problem

Shoot an Email?

Professors and TAs want to be able to create new classes to host office hours. However, currently the only way of doing it is through email 📧

User Research

Users Said It's Tedious...

I interviewed 3 TAs who used QMI to assist with office hours and requested to add their courses to the platform, which I summarized into three key pain points.

Delayed Response

Professors and TAs often have packed schedules and may not respond promptly to emails.

Inefficient Input

Writing a request to the team is time-consuming for users and communication is often back-and-forth due to the lack of a unified format.

Extra Effort

After the QMI team received the email, they had to manually type in the course information to create a course on the admin page.

GOAL

A New Feature with...

Native Data Collection ⚙️

Simplifies the current process of creating a new class for professors and TAs to host office hours.

Direct Admin Approval 💁

Centralizes class information automatically and requests can be approved by the administration team easily.

User Flow

Create a New Class

The user flow for the "create a new class" feature was mapped for both users (TAs and Professors) and Queue Me In team sides.

Low-fi: User End

Low-fi: QMI Team End

Design Decision #1

Entry Point

The entry point for "Create a Class" is located at the bottom left corner of Edit Your Classes page, where most of add and drop happens. The location is clearly separated from the existing classes so that the users will recognize it as an important new feature.

Design Decision #2

"Pop-Up"

The actions of creating a class is displayed using modal window. It assists users in accomplishing their desired task directly.

Design Decision #3

The Different States:

The basic layout contains elements like "I'm a ...", Course Code, Course Name, Year, and Term. Warning text is also needed when users input information in the wrong format.
‍
After discussion with the PM, we also figured that when a TA wants to submit the form, he/she should input the professor email for verification purposes.

User Testings

It takes Iterations

I gathered 3 Queue Me In users who are TAs and conducted user testings using Figma prototype. According to the feedback, most users have the habit of using a drop down to select the Year and Term of the class. Thus, I iterated again on some details.

Constraints

Prevent Scam...

QMI currently has some technical constraints, such that it could not identify whether the user is a professor, TA, or student in the "Edit Course" page. Therefore, it is important to prevent student or anyone without certification from creating a new class.

Comparing to putting a line of text under the submit button, adding an extra step before filling in class information is more likely to be effective. The additional modal window is intended to grab more user attention.

UI Redesign

I also took the initiative to redesign the UI of "Edit Your Classes" page. The screen is designed to be monochromatic, resonating with QMI's brand identity and visual language.

Before

After

More Design Decision

New Course Request

The QMI team uses the admin page only for internal course management (the interface does not look so pretty, but that's ok!). Following the create a course feature, I incorporated a new section, "New Course Requests".

The team can either reject or confirm the request. This step might take 2 hrs in the old-fashioned way, but now it takes 2 seconds.

Final Design

User End

Users can create a new class by filling in the information needed and sending it to the "Queue Me In" team

Final Design

QMI Admin

The QMI team will receive the new class requests at the admin end and be able to either reject or confirm the request

Takeaways:

Teamwork is key.

Working on QMI was the first time I collaborated in a project team setting, with PM, developers, and another designer. I enjoyed the weekly stand-ups and work sessions where great ideas spark.

Detail matters.

The Create a New Course feature is not a big project, so I emphasized hard the details. From icons to warning text and drop-downs, these details work together to make a design look good.

Work with constraints.

Several solutions I came up with were eliminated due to technical constraints. I learned that constraints are also opportunities that designers can take advantage of and create designs that improve experience.