Queue Me In💡
Team
2 Product Designers;
4 Developers;
1 Product Manager
Skills
User Research
Wire-framing
User Testing
Visual Design
Interactive Prototyping
...
Timeline
Jan-May 2023
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.
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.
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 💁
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 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 the Edit Your Classes page, where most of the add and drop happens. The location is 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 are displayed using a modal window, which 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 tests using the 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
Preventing Scam Requests...
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 students or anyone without certification from creating a new class.
UI Redesign
I also took the initiative to redesign the UI of the "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
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.
