Overview.

For college students enrolling in large-size transdisciplinary courses, it is not always easy to find the right team members from a pool of unfamiliar classmates.

TeamUP is a mobile app that helps students form groups with balanced skills and facilitates a more efficient and effective team formation process. This project won the 2nd prize in the Convergence Innovation Competition @ Georgia Tech.

Role.

Interaction Design (except for the onboarding part), Usability Testing, User Research (as co-investigator and note taker)

Duration.

Jan.2019 - Apr.2019

Platforms.

iOS and Android

THE CHALLENGE

Solution

TeamUP

A mobile app that makes team formation efficient by providing the visibility of team vacancies, classmate availability, and detailed profiles.

Know about any team openings

Team composition, vacancies, project ideas ... just right there on the surface. Join the team you’re most interested in and avoid grouping with people you don’t want to work with

Communicate needs efficiently

Feel free to ask before making decisions. Invitations, applications, and status are updated in real-time.

THE OVERALL PROCESS

User Research

Is there a problem with team formation?

We started by investigating the team formation process in college. Desktop research and online survey helped understand the problem scope. The online survey was sent to 60+ students enrolled in U.S. colleges. Over half of the participants have 3+ courses involving team-based projects each semester. 78% feel slightly confident or not confident in finding ideal teammates from unfamiliar classmates.

Research Insights

User needs and pain points

Through desktop research, survey and stakeholder interviews, we gained a deeper understanding of the needs, motivations and pain points of end-users.

According to relevant research (Siha, S., & Campbell, S. M. 2015), the degree to which students feel they have input into teammate selection is positively related to their perception of the effectiveness of their teaming experience. However, using the self-selection approach, students still have a lot of frustrations during the process. We investigated it in surveys and interviews.

MVP

Core user tasks

Brainstorming

Generate ideas

Based on research insights, we further defined the design goal, brainstormed and voted for design alternatives. Initial ideas were sketched for communication.

Design Principles

Things we kept in mind

1. Team vacancy and individual availability should be easily recognized.

2. The needs and interests of both sides should be well communicated, with as little friction as possible.

3. The team formation process should be easy to understand and the chances for error should be reduced.

Low Fidelity

Early solutions

Usability Testing

Design iteration

Through the formative usability tests, we checked the hypotheses and tested whether users can find the information they need to form a group. We analyzed the findings and fixed the problems revealed in the tests. A follow-up study was then performed to see if the fixes worked.

How to switch between courses?

This app is built around teaming up activities. There might be several ongoing courses requiring teamwork. How can users switch between courses in the app? The first idea I came up with is to use a slide-out menu, which allows users to deeply focus on the team formation for a particular course. Another method is to apply a drop-down menu on lower level screens, which clearly indicates the course page that the user is currently staying on.

“I prefer version 1 because it is aligned with my mental model.”

The first version guarantees that users will not confuse one course with another and saves the effort of switching between teams, classmates and inbox, which might be a frequent operation in the app. At the same time, participants mentioned that they would like to see the course name on the page. I took the feedback and other findings and redesigned the team page.

Hierarchy

In the formative usability testing, people mentioned that the openings were more important to them than the team name. When redesigning the card, I used the position name as the card title and applied the dashed circle to indicate the vacancy. It brings users to the openings faster and communicates the team composition more effectively. Participants gave positive feedback on the second version in the follow-up study.

Unavailability or availability?

Compatible schedules are necessary for team collaboration. When designing the sign-up flow, I prefer asking for unavailability than availability, which could maximize flexibility. For example, I don’t want to meet at 8 on Sunday unless this is the only time that every team member can attend. In the usability test, participants were able to identify that their unavailability was inquired and understand the design intention.

Icebreakers

Can icebreakers help classmates know more about each other and add color to the sign-up process? Participants felt that three fun facts were redundant, and choosing topics was not very interesting. Based on the feedback, we replaced icebreakers to the bio, providing users with a stage to freely display themselves.

Concern for the button ‘APPLY’

Participants had concerns for the button ‘APPLY’. They didn’t know what would happen after they tapped the button and worried that the action is irrevocable. Some also mentioned that they are likely to chat with the team before making the decision.

I replaced ‘Apply’ with ‘Check details’ to help users relieve and better understand this vacancy. I also switched all the buttons to the sentence-style capitalization to convey a friendly tone.

High Fidelity

Final Design

Onboarding

Our goal is to make the onboarding process simple and quick. We leverage this flow to build a profile of a unique individual. Basic information like major and syllabus will be preloaded. At the same time, users are free to add multiple titles, write a bio, etc. Depending on what title users enter on the previous pages, we will provide corresponding skill options later.

Design Details

How we apply the design principles

As I mentioned, users were a little hesitant to tap ‘Apply’ because they did not know what would happen after clicking. Now the added ‘Details’ page could provide an overview of the opening and serve as a soft transition. When applying for the opening, users can directly write messages on the same page. Beyond that, I switched the button to a slider to reduce mistakes and help users make prudent decisions.

When there is no team to display, I drew the illustrations to let users know what’s happening and what to do about it.

I used different color labels to indicate different states. After users apply for teams or are invited by someone else, they will be able to distinguish the specific team or vacancy from others.

Conclusion

Future directions

It was a great honor for our team to win the second prize in the CIC competition. However, this is just a beginning. Based on feedback from judges and peers, I think this project could still be improved in several ways:

Encompass more use cases

Currently, the app is only available for Georgia Tech students to form teams. It also has the potential to be extended to other use cases. I heard a lot of students complain that they missed a hackathon because they could not find appropriate teammates. It would be great if our app could help them find the right team and seize the opportunity to enrich their experience.

Tone of voice

Some friends gave me feedback that certain terms in the app were too serious and made them feel like they were looking for jobs. The tone of the app should be pleasing, not serious. I have used illustrations to set a vivid personality for the application, but there is still a need to improve the writing and create a more relaxed atmosphere.

© Designed by Yixin 2022