logo2.png

QMI is an office hour management application (progressive web app) that enables a remote interaction between students and Teaching Assistants (TAs). Through QMI, students can join the queue for the office hour they want to attend whenever and wherever they are.

 

QMI not only helps students manage their time efficiently but also allows TAs to keep track of the influx of students real time, which makes the office hour much more productive for both student and TA. Upon conducting multiple user interviews with students, TAs, and professors, the idea of QMI eventually evolved to encompass QMI app for students, QMI app for TAs, and QMI analytics (website) for professors.

Duration: Fall 2019

Results: User research, High Fidelity Designs

My Role: Product Designer

My Role

As a product designer, I worked within a team that consisted of 1 product designer, 1 product manager, and 4 developers, from ideation to the execution of high-fidelity design mockups. I was actively involved in solidifying our design language. Lastly, I contributed to the branding effort by creating brand guide.

  • Weekly critique session

  • Communication with PM and developers

  • User Research

  • Visual Design

  • Interaction Design

  • Prototyping

  • Branding

Users & Target Audience

The target users of Q.Me are college students who visit office hours at least once every week. These users have a strong preference for mobile-first, fast, and real-time communication.

 

A key differentiator for this user group is that they value time mostly due to their heavy work load. So they want something that can minimize their down time and help improve productivity.

 

As this project was targeted for Cornell community, we defined our target users to be Cornell student body at this stage.

The Problem Space

Office hours are disordered and very inefficient.

 

Students have to go through a lot of frustrations when they wait in a very long queue as they walk into an office hour session.

 

Problems are that...

 

  1. There is too much idle time on students’ end. Because you never know when your turn will come, you just have to wait in the queue indefinitely.

  2. Office hour space, which most of the time is not very spacious, becomes overly crowded and the line ends up coiling up the entire hallway, leaving everyone using the space unpleasant.

  3. People do cheat. Some desperate individuals will find a way to cut into the queue by jamming their name in the middle of the queue on the whiteboard.

  4. Low productivity of the office hour when TAs have to answer the same questions over and over.

 

For the team: Design an ideal and engaging web-app experience for office hours that better suits students’ and TAs' needs that allow enhanced interactions between them.

 

For me: Create a location managing feature and class selector feature that allows students to manage their appointments easily.

User Research: Understanding the Why

Note: This study goes through the initial research process of QMI product and then focuses on the "class selector" and "location" feature of redesigning the QMI app.

 

In the office hour problem space, there are three stakeholders:

 

  1. Students.

  2. Teaching Assistants.

  3. Professors.

​​

After interviewing potential users and receiving survey results from all of those user groups, it was discovered:

 

  1. Students want to check crowdedness of office hour remotely to minimize wait time. (“I’d like to check the queue size before going to office hours”.)

  2. Students sometimes form a group during the office hour to get through problems collectively. (“eventually students created a network to help each other”, “I’ve seen other students have their questions answered by other students, simply because the consultants are so busy.”)

  3. TAs frequently recognize students coming in with similar questions.

  4. TAs often ran into students asking questions out of the scope of the class or too many questions.

  5. Professors think encouraging a sense of community among students is crucial. (“students should cultivate the autonomy in problem solving by helping each other rather than getting answers directly from a TA”.)

  6. Professors believe students are becoming too dependent on the office hour.

 

Market Research: How other products handle questions and waiting

Competitive Analysis of Other Products

Currently, there is no solution out there that has both remote queueing and question-posting features. Most importantly, other products are geared towards completely different contexts than office hour. All queuing products are designed to book a restaurant or medical service. These products provide an estimated wait time and open time slots. However in the context of office hour, these ideas do not apply since there is a huge variability among students depending on the type of question they bring and the pace at which they understand. Also, question-answering products like Quora and Piazza, they simply lack queue management feature. As a result, QMI can fit an office hour-management area as an efficient and transparent approach towards managing a queue.

Defining the Problem

We initially thought that office hours are messy and inefficient because there is no sense of crowd management, but it was so much more than that. It had to do with the kind of questions students bring and the culture where students treat office hours as time for getting works done rather than getting specific help. So our hypothesis was incorrect. We discovered that office hour management should revolve around the questions.

Persona

Findings

We summarized key takeaways and observations from the interview and survey results. We grouped the findings by stakeholders (students, TAs, and professors) and then clustered similar points into groups of ‘problem’. Afterwards we evaluated which ones are worth attacking. The selected problems are:

  1. Logistics

  2. Lack of structure within office hours

  3. Overlap of questions

  4. Students’ responsibility with their questions

After exploring the team came up with four opportunities:

  1. Calendar View — intuitive way to navigate office hour sessions

  2. Pre-registration — minimizing the hassle to form and manage a queue on the spot

  3. Question as a ticket — requiring students to enter a queue with a question summary. 

  4. Following (Grouping) — letting students follow each others’ question to form a group

Implementing these features into the application, I came to discover there are key features that must be designed across the app in order to make sure this issue was solved. What mattered the most was:

  • Class selection feature: enable users to manage their classes easily, from one class to another seamlessly.

  • Location management feature: make sure the TA and student meets up at the promised location, allow them to change if necessary.

User Research I: Class Selection Feature

Goal: Enable users (students & TAs) to move from one class to another with ease.

The Cornell Design & Tech Initiative team first analyzed currently available applications that are used frequently across colleges to manage their classes. I reviewed two popular applications: Slack and Piazza.

Slack

  • The Good: Users can easily see the organizations they are in without clicking any extra buttons or taking any more steps. The selected option, or the organization, is clearly indicated by the side bar and the emphasis with brighter colors than other unselected organizations.

  • The Bad: When it comes to web applications, having a visible list of options might take too much space. It might also distract users from the main content. When it comes to selecting an option, hiding them until user wants to see them can save more space and allow users to focus on the main content.

Piazza

  • The Good: Follows the traditional method of information organization and the web standards. Classes are grouped together and indicated by a dropdown arrow, allowing users to easily perceive that they will be able to see a full list of classes by clicking the dropdown arrow.

  • The Bad: As the list grows, users might be overwhelmed by the list and the dropdown menu might get too crowded.  Since some class names are obviously longer than others, users might become confused.

Design I: Class Selection Feature

Ideation

I brainstormed various ideas for the class selection feature. This included:

  • Dropdown menu that appears clicking the current class in the main page of the application.

  • Visible "tags," or bubbles of classes the user is currently taking.

  • Search feature that allows the user to search the list of classes one is registered for.

  • Pop-up menu that shows up when user clicks the class number.

Low-fi sketches for the exploration of class selection feature

Feedback

During the weekly design team standup, which was held every Wednesday, I received feedbacks from the other product designer and the product manager.

  • Tags would go well with other design components of the product, but might take too much space in the header depending on the number of classes a user is taking.

  • Search feature would be "extra" since a user is unlikely to take as much classes to need to search for the class one needs help for.

  • The function of a pop-up menu seems to overlap with the dropdown menu. But dropdown menu would be better than a pop-up because it distracts users less and does not interrupt user's flow.

  • Dropdown menu follows the conventions many webpages use today and will be easily perceived as useful by users. Also, users do not need to learn to use it because they are already used to how dropdown menus work.

Based on the feedback from QMI team, I decided to focus on designing dropdown menu for the class selection feature.

All Hands Design Critique

During the weekly all hands design critique session, during which product designers from across the project team to meet to give feedback on each other's work, I presented 3 designs of the dropdown menu.

Hi-fi design iterations of the dropdown menu

Key Takeaways

  • Changing the color of the background instead of text is more easily perceivable and gives immediate feedback to users that their inputs (hovering) are being received.

  • Distinguish between currently selected class and other class options by using different font weight.

  • Highlight the newly selected class by changing the font weight to something that is more heavy so that it has similar importance as the currently selected class.

  • Show users that the dropdown menu showed up because they clicked the current class number by changing the background of current class number to something that is more vibrant than plain white.

Moving forward, my solution was combining the best of three versions with the key takeaways from the critique session in mind.

Final High Fidelity Design

User Research II: Location Feature

Goal: Allow the TA and student to select a location to meet and allow them to change if necessary.

The Cornell Design & Tech Initiative QMI team first analyzed currently available applications that are used frequently that need location selection. I reviewed two popular applications: Grubhub and Yelp.

Grubhub

  • The Good: Users can select their location easily by typing or using the GPS function. The use of graphics for the location field allows us to perceive with ease that this field is for selecting one's location. The user flow is very direct, because the location field is located at the top of the homepage.

  • The Bad: Grubhub's location field allows user to only input the conventional address (with street address, City, State, Zip code, etc.). For buildings on college campuses, the physical location of the user tends to be more specific. 

Yelp

  • The Good: Users can easily input their location information and do not have to be too specific about it (such as Near... function). 

  • The Bad: Without any graphics, Yelp might be difficult for first time users who are not familiar with their current location. Use of icon can help resolve this issue and help users use the product without hassle.

Design II: Location Selection Feature

Ideation

I brainstormed various ideas for the location selection feature. This included two parts:

  1. Choosing the location when uploading a question.

  2. Edit location in the queue screen.

Choosing the location when uploading:

  • Text field for selecting the location.

  • Bubbles/tags of a popular location chosen by other users.

Edit the location in the queue screen:​

  • A tooltip that appears when users click the location icon in the queue on the main page.

  • A pop-up field that appears when users click the location icon in the queue on the main page.

Low Fidelity Sketches for the Exploration of Location Feature

Feedback

During the weekly design team standup, which was held every Wednesday, I received feedbacks from the other product designer and the product manager.

  • For selecting the location when uploading one's question, tags would go well with other parts of the pop-up. Having popular locations there can help users reduce time.

  • Icon is better than text for the location indicator. Users are used to the icon because many famous companies already use it.

  • A pop-up for editing the location can break user's focus. A tooltip allows users to stay on the page and be on track of everything that is going on.

Based on the feedback from QMI team, I decided to focus on text field for selecting the location when uploading the queue and design a way to edit the location without having users to take redundant steps.

All Hands Design Critique

During the weekly all hands design critique session, during which product designers from across the project team to meet to give feedback on each other's work, I presented 4 color variations of the tags for selecting the location when joining the queue and 3 variations of the tooltip for editing the location.

High Fidelity Design Iterations of the Location Feature

Key Takeaways

  • After users select the location icon in the queue, having users click an "edit" button after choosing a new location is redundant. The system is forcing users to take an unnecessary step. Giving freedom to users is important, but some users might actually not like the freedom. Restricting user's input by limiting the number of texts can prevent some users from taking advantage of the system.

  • Although tags would go well with other parts of the pop-up, they actually reduce user's freedom in selecting their location. If user cannot find one's location, user will be forced to relocate.

Moving forward, my solution was a text field that has text limit and popular location autofilled. This design will also increase consistency among the application.

Final High Fidelity Design

hi-fi copy 2.png

Mockups

mockup1.png
mockup2.png
mockup1.png

At this point, CDTI’s Fall 2018 semester had ended..

But the QMI team will return to this project in the spring. We are planning on expanding the beta testing to more classes beginning Spring 2019.

Meanwhile, check out QMI at: https://www.queueme.in

Aiden Yeonsuk Kim's Portfolio

Hi!! I'm Aiden, a problem solver and product designer

who loves fashion, humaneness, interactions, and doggos.

Say hi, Email me

Menu

Check me Out