Teammie Mockup

Teammie

Teammie is a collaboration platform for design students to find projects and teams to work on. Students can use the projects for their portfolios and gain real-world experience.

Role

Project Lead
UX/UI Designer
in a team of 2 designers

Platform Type

Web Application

Duration

17 Weeks

Tools

Figma, FigJam, Notion, Docs, Sheet, Google Meet

Problem

Design students struggle to find meaningful, portfolio-worthy projects while balancing personal growth and side goals. This limits their ability to gain practical experience and stand out in the workforce.

Why

UX/UI students face intense competition in the job market, where a strong portfolio and proven collaboration skills with engineers and businesses are essential to stand out and succeed.

Solution

Teammie connects design students with engineers, designers, and businesses to collaborate on real-world projects. The platform helps students build portfolios, gain experience, and develop skills needed to excel in their careers.

Final Design

Text
Text
Text
Text
Text

Project Planning

Before I started the project, I created a document to use as a project document (PRD,Grant-chart), where I wrote the product requirement document, project grant chart, and other documents necessary for a team to align with the project goal.

I asked my friend to join this project, and we discussed the scope, time available, and tools we would use.

Team of two

Matt profile picture

Matt Ngamdan

Project Lead + UX/UI Designer + UX Researcher

Keeva profile picture

Keeva Ng

UX/UI Designer

Problem

Students often face difficulty finding meaningful projects that provide practical experience while balancing other side projects or personal development goals. This challenge creates a gap in opportunities for students to gain relevant experience and build their portfolios effectively.

question

"But do they have a problem finding a team to work with?"

Our User

Before we started designing our project, we defined our target users. We separated our users into three groups: first, a design student, second, an engineer, and a business student.

  • UX/UI Students

    Students studying UX/UI design who are looking for hands-on experience, real-world projects, and collaboration opportunities. They often struggle to find meaningful projects where they can apply their skills.

    Goals: To gain experience by working on real-world projects, build a strong portfolio, and collaborate with developers and project owners to bring their designs to life.

  • Developers & Project Owners

    Engineering students, developers, or individuals with a project idea (entrepreneurs, startup founders, or students) who need a team to bring their vision to life. They may struggle to find UX/UI designers who understand technical feasibility and user experience.

    Goals: To find skilled UX/UI designers who can help visualize, prototype, and design user-friendly interfaces while also collaborating with developers to turn ideas into functional products.

User Interview

To support the problem and find an opportunity, I started by finding 5 students who study in the design field and want to work as UXUI designers.

The purpose of the interviews was to support the idea that the problems have the potential to be solved and to find an opportunity to support the project. (Figure: 1)

4/5

want to work in UXUI because they want to solve user problems.

4/5

said that after completing the project, they expected the user's happiness.

5/5

said when working with others will help them complete the project.

4/5

said they expect good results when working with others.

Results from user interview image
Figure 1: See the affinity map

User Journey

To align with the team, I created the user journey from the user interview session to identify opportunities and pain points our product can solve.

Ideation

To move forward with the project, I started brainstorming with the team. I separated the main function into 3 themes, and for each of it had HMW, I generated ideas based on the services we will help users. After generating the ideas, we brainstormed which functions should be in our demo prototype and which should be included in our completed product. (Figure: 3)

how might we

The solution

A platform for a creator (project owner) to post their concept idea and find a specific designer to help them design and build the idea. The creator can share the idea, request skills, and attach their personal LinkedIn profile so that collaborators (design students) can contact them directly.

question

"How can I make my team design but not constrain their creativity?"

Planning the design

Before I jump to the final design, started gathering and grouping the ideas into two types: the demo, where we will use this as a first prototype, and the final product, where we will implement the nice to have features in this. The first prototype will follow these functions. Also, it was to help the team create the design based on the product type. (Figure: 4)

User flow

For the first user flow, I wanted to make it as easy and understandable as possible so that users can complete the task without hesitation when they use the demo. I started by using the scenario so we could know the steps of each click from our target users' point of view. (Figure: 5)

Low-fi for demo

For the low-fidelity demo, I assigned our team to design the landing page, modals, and form in which we will present the design. After that, we voted on which design should be in the demo, where we will conduct a usability test with real users within in the Mid-fidelity. Along the way, I had the developer prepare the demo after completing the usability test. For the final prototype, we concluded that we would use this design to follow the project goal. (Figure: 6)

Goal of design

I started by sketching the design and then transferring it into low-fidelity. The goal of the design is to “Trigger the UX/UI students by making the cards easy to read and quick to scan and hooking them to click on the project.”

The inspiration

During the sketch, I wanted the platform to be as clean as possible for the user. Inspiration came from blog posts and job board websites, where users can read the headline and description while also searching on job boards for skills tags, considering where they should be placed on the card.

Mid-fi for usability test

For the low-fidelity demo, I assigned our team to design the landing page, modals, and form in which we will present the design. After that, we voted on which design should be in the demo, where we will conduct a usability test with real users within in the Mid-fidelity. Along the way, I had the developer prepare the demo after completing the usability test. For the final prototype, we concluded that we would use this design to follow the project goal.

I decided to use my design as a demo and for a usability test, where I designed the landing page, which included a banner, a search input, the category filter, a navigation bar, and the job card. (Figure: 7)

Usability Test

The participants

Our team conducted the usability with 3 participants via Google Meet. Where 2 of the participants were from the target group.

Results from the usability test

After the usability test, we found that users were confused by the message from the banner. Moreover, users were confused by the category filter because it only filtered the job position. (Figure: 8)

2/3

of the participants confused with the banner and suggest to improve it

3/3

of the participants were confused with the category filter

Updated the design

Banners

Our participants were confused with the banner that didn’t explain anything about the site, and the participants clicked on each banner because they wanted to know the website first before moving forward to other sections.

I updated the banner by putting more information about the website and its purpose. (Figure: 9)

Figure 9: Update the banner by adding more information about the platform and a call-to-action for each banner to navigate the website.

Search Input and filter

The participants were confused by the input placeholder, which was not related to the website's proposal. Some of the participants also felt left out because the filter section did not prioritize one of their job titles.

I redesigned the input and the filter. I changed the input placeholder to be more versatile and easy to understand, while I designed the filter as a dropdown. (Figure: 10)

Figure 10: Updated the filter section. Changed from a horizontal scroll of job titles to a dropdown and added a filter for project types.

Teammie

A platform designed for design students that enables them to connect with fellow students and form teams to work on projects aimed at solving user problems. This platform promotes collaborative work on design and development projects, which can be showcased in portfolios or used in real-world situations. (Figure: 11)

Teammie image mockup

Figure 11: Final design

Reflection

Working with team

As a group leader, even with just two members, learning to balance and align ideas was a new challenge for me. However, leading a design group turned out to be an incredibly rewarding experience. Collaborating to gather feedback made the process much more engaging and enjoyable than working alone, and it highlighted the value of teamwork in refining our designs.

Promote the project

The opportunity to promote the project is a good opportunity to get feedback directly from potential users while also being able to go out of the comfort zone is a plus. After promoting it, I learned that not every user is ready to follow the project, and it's difficult to attract potential users to use the app.

underlineunderline