Project Brief

Project Timeline

Jan - Feb 2022

Project Type

UI/UX Design

Contributors

Just me :)

Skills

UX Research
Prototyping
User Testing
Design Handoff

Teamfinder: Building experiences that bring together people of all disciplines to create for social good

Teamfinder is a web app that helps users form well-rounded teams to build innovative solutions during the hackathon.

Opportunity

A balanced, multi-disciplinary team is a melting pot of unique skillsets and perspectives where individuals can share ideas and learn from one another to make more informed decisions that bring creative solutions to life. Diverse blends of perspectives positively influence group attitudes and motivations, enhancing the overall morale and productivity of a team.

Product Preview

Create your Profile

Sign in to personalize your profile with your unique skills and aspirations.

Remember, you bring a unique perspective that will be invaluable to any team!

Find a Team

Don't have a team? Browse and filter through teams to find teammates that you can learn and grow with.

Create a Team

Need more people on your team?
List your team on Teamfinder and highlight your team's vision and needs to hackers.

Challenges

Exploring the opportunity space

01

Discovery

02

Ideating with Constraints

03

Prototyping and User Testing

Challenge

We need a place where people can search for a fitting team with a diverse range of skills, so they can contribute their own unique perspectives.

When mingling around at team mixers eating free donuts 🍩, people often gravitate toward others who are similar, forming teams with limited skillsets.

User Research

Identifying User Types

I started off the project by surveying 800 previous hackathon participants and setting up 7 one on ones to define their pain points when finding teammates at team mixers in person.

To understand my users, I identified 3 user types along with key user pain points.

User Flow

How did I structure this product?

I worked with the Product Manager to align on the features needed for this project. The larger team had outlined the three necessary parts of team matching used in past team mixers.

User Flow

Diagramming for Understanding

After discussing with developers and stakeholders, I clearly visualized possible points of confusion to ensure everyone had a collective understanding.

Challenges

Finding opportunity within constraint

01

Discovery

02

Ideating with Constraints

03

Prototyping and User Testing

Challenge

Learning to be creative within technical constraints to refine my design for technical feasibility.

Ideation

Lofi Wireframes

We then created quick wireframes to visualize the feature and understand how the content would place against the entire screen.

Technical Constraints

Mobile Adaption is Not Feasible for the Hackathon Timeframe

The development of the desktop web app took longer than expected, and the Technical team needed to prioritize implementing other systems for the hackathon. Unfortunately, my mobile adaptions were never implemented.

Stakeholder Constraints: Ops

Disconnecting the two user type views in the flow to prioritize efficient team creation

Delays in response time to confirm teams lasted longer than expected, but Ops needed to finalized hacker teams. So, I disconnected the Hacker and Team Views to prioritize efficient team creation. Now, only Hackers can request to join teams, and are automatically added to the first team they are accepted by.

Stakeholder Constraints: Ops

New User Flow Focused on the Two User Type Goals

Create two separate flows based on the goals that different users have when using the team finder.

Technical Constraints

Heavy profiles require Devs to Implement and Store Complex Databases

Moving away from detailed profiles, I focused on refining the search and filtering features instead to help users focus on the right pool.

Technical Constraints

Modals are not Technically Feasible

My first design relied heavily on using modals to carry large displays of information.
... I discovered that a large use of modals was not technically feasible.
Instead, reserve modals for quick pieces of information!

Edge Case Example

Defending the Search Feature

A group of 2-3 friends want to list their team to recruit an additional hacker.

‍Is the search feature necessary to accomplish this?
‍A user can still list a team without the search feature, and eliminating the search feature would allow the technical team to focus on developing other aspects.

Challenges

Test, test, test!

01

Discovery

02

Ideating with Constraints

03

Prototyping and User Testing

Challenge

Having the courage to let go of my ideas, and prioritize my user. Take feedback from other teams who know the needs and timelines of the larger picture.

Final Iterations

Isolating Flows for a Smoother Development Process

User Testing

Simplifying the Confirmation Process

The user's priority is to find a fitting team, not the best team. From user testing, I learned to prioritize my user's security in knowing that they have a team ASAP.

In the process, I also simplified the flow for an even smoother development process!

User Testing

Learning to Use Modals Intentionally

Users mentioned that the scene behind the modals looked gloomy. So taking them out not only improved the visual design and lightened cognitive load on the user, but also improved technical feasibility!

Edge Case Example

Approaching the Search from a Different Perspective

By turning the user's focus on the collective team, users were able to get a more comprehensive understanding of how they fit into the team.

Thinking of creative ways to prioritize both feasibility and help the user find a fitting team involved trying to see the problem from a different angle.

Impact

Teamfinder is now a permanent tool that the collegiate hackathon uses each year

Pushed and developed by a team of 6 software engineers! 🎉

Why is this shift worth it?

↓

Matched at least 200 teams across 800+ attendees in 2022

Previously, teams were unbalanced (all developers, all designers) but

Over 75% of code-based projects were designed in Figma

This means that over 75% of teams had at least one designer! Previously, only 1/3 of projects had user-centered interactive flows, often just displaying single-page data and analytics.

Less awkward conversations with similar folks at team mixers

We all naturally have an affinity bias for things that are relatable and similar to us. So, of course designers gravitate towards designers, and likewise for developers, marketers, etc. Now, diverse teams that meet online can hang out and get to know each other at mixers... and gravitate towards our free donuts! :)

Survey says... 278 responses, no confusion, just Gmail verification issues :')

Each year we send out a feedback form to our hackers. No complaints about teammates this year, just a few about a stressed hackathon director managing the crowds in a Hawaiian shirt, which is a win. This year has been one for the books!

Reflection

📦

Look for Opportunity Within Constraint

Although I was faced with many constraints left and right from the Technical and Operations teams, I am proud of the creative solutions and agreements that I reached with my teammates! I might be the designer, but that's OUR design. WE did that!

🌍

Tap into Your Community

Reaching out to 800+ hackers was no easy feat, but it was worth it to hear their frustrations and relatable stories of social anxieties. I'm glad this tool was able to give new and returning hackers a more fulfilling and enjoyable experience!

👊

Be Specific and Active!

This was my first time working with developers, and I learned to be specific in my annotations and active in my communication to ensure a smooth handoff (or should I say hand-in-hand). Although we are all students, it felt so thrilling pushing out a product together that made an impact on our community!