© 2024 MIN HEONG HONG

/

🇺🇸 ENG

OTHER projects

SEOUL–NEW YORK

/

WORK

/

COLLEB

UX/UI Design

COLLEB

COLLEB

PROJECT TYPE

Solo Project

Solo Project

SOFTWARE

Figma, Photoshop,
Illustrator, After Effects

Figma, Photoshop,
Illustrator, After Effects

DURATION

5 Weeks

5 Weeks

TECHNIQUE

User Research, Prototyping
Branding, Motion Graphic

User Research, Prototyping
Branding, Motion Graphic

DELIVERABLES

App

App

overview

Colleb is an exclusive college student matching app that helps students connect with like-minded collaborators beyond their immediate circle based on personality and skills. By prioritizing compatibility, students can review others' portfolios who have similar tastes, relevant skills for a project, and availability to simplify the recruiting process.

Colleb is an exclusive college student matching app that helps students connect with like-minded collaborators beyond their immediate circle based on personality and skills. By prioritizing compatibility, students can review others' portfolios who have similar tastes, relevant skills for a project, and availability to simplify the recruiting process.

initial PROBLEM discovery

Are flyers effective enough to find various collaborators for projects?

Are flyers effective enough to find various collaborators for projects?

Are flyers effective enough to find various collaborators for projects?

I've heard that students in Korea actively find collaborators through student community platforms. Why do students in the States still rely on more traditional methods?

I've heard that students in Korea actively find collaborators through student community platforms. Why do students in the States still rely on more traditional methods?

I've heard that students in Korea actively find collaborators through student community platforms. Why do students in the States still rely on more traditional methods?

Not really.


90% of students reported experiencing difficulty finding collaborators.

Not really.


90% of students reported experiencing difficulty finding collaborators.

Not really.


90% of students reported experiencing difficulty finding collaborators.

PROBLEM STATEMENT

How might I help college students to find their like-minded collaborators easily?

How might I help college students to find their like-minded collaborators easily?

How might I help college students to find their like-minded collaborators easily?

solution

Student Matching App only for Collaboration

Student Matching App only for Collaboration

Student Matching App only for Collaboration

COLLEB is an app designed exclusively for students seeking collaboration opportunities. It allows users to easily browse others' work in a format similar to Instagram Stories and recommends like-minded peers based on their styles, personalities, and skills.

COLLEB is an app designed exclusively for students seeking collaboration opportunities. It allows users to easily browse others' work in a format similar to Instagram Stories and recommends like-minded peers based on their styles, personalities, and skills.

COLLEB is an app designed exclusively for students seeking collaboration opportunities. It allows users to easily browse others' work in a format similar to Instagram Stories and recommends like-minded peers based on their styles, personalities, and skills.

Research Method

Quantitative Research—Google Form

31 Participants (students in USA / Korea)

research FINDINGS

01

Most students in both the USA and Korea experience difficulty finding collaborators.

01

Most students in both the USA and Korea experience difficulty finding collaborators.

01

Most students in both the USA and Korea experience difficulty finding collaborators.

survey result

90%

of students reported difficulty recruiting teammates.

REASON 01

LACK OF CONNECTIONS (42%)

"I didn't know anyone who could join my projects."

"I didn't know anyone who could join my projects."

REASON 03

MISMATCH (13%)

"It was hard to find students whose styles align with mine."

"It was hard to find students whose styles align with mine."

REASON 02

VERIFICATION ISSUES (23%)

"It was hard to identify if students are proficient enough to join my project."

"It was hard to identify if students are proficient enough to join my project."

02

Students in the USA rely more on their social circles and social media than on flyers

02

Students in the USA rely more on their social circles and social media than on flyers

02

Students in the USA rely more on their social circles and social media than on flyers

03

Students in Korea primarily use student community platforms but still have difficulty finding collaborators

03

Students in Korea primarily use student community platforms but still have difficulty finding collaborators

03

Students in Korea primarily use student community platforms but still have difficulty finding collaborators

survey result–Students in korea
survey result–Students in korea
survey result
Students in korea

94%

of students in Korea reported experiencing difficulty finding teammates.

94%

of students in Korea reported experiencing difficulty finding teammates.

Why are Korean student community platforms ineffective in finding teammates despite their usage?

Why are Korean student community platforms ineffective in finding teammates despite their usage?

Why are Korean student community platforms ineffective in finding teammates despite their usage?

competitive research

Existing platforms are not primarily designed to facilitate finding collaborators

Existing platforms are not primarily designed to facilitate finding collaborators

Existing platforms are not primarily designed to facilitate finding collaborators

project goal

To create a platform solely designed to help students find collaborators, enabling users to spend less time checking other student's work

To create a platform solely designed to help students find collaborators, enabling users to spend less time checking other student's work

To create a platform solely designed to help students find collaborators, enabling users to spend less time checking other student's work

Jakob's Law

Jakob's Law

Users prefer your site to work the same way as all the other sites they already know

Users prefer your site to work the same way as all the other sites they already know

Users prefer your site to work the same way as all the other sites they already know

opportunity

To help students save time finding collaborators, I decided to leverage familiar mental models that require no additional guidance to learn. I identified the main keywords for this platform as 'Matching' and 'Gen Z (students)' to pinpoint existing mental models.

To help students save time finding collaborators, I decided to leverage familiar mental models that require no additional guidance to learn. I identified the main keywords for this platform as 'Matching' and 'Gen Z (students)' to pinpoint existing mental models.

To help students save time finding collaborators, I decided to leverage familiar mental models that require no additional guidance to learn. I identified the main keywords for this platform as 'Matching' and 'Gen Z (students)' to pinpoint existing mental models.

01

'Matching' → Dating App → Swiping

01

'Matching' → Dating App → Swiping

01

'Matching' → Dating App → Swiping

02

'Gen Z (students)' → Social Media → Short Form

02

'Gen Z (students)' → Social Media → Short Form

02

'Gen Z (students)' → Social Media → Short Form

About 80% of Gen Z use social media platforms like YouTube, Instagram, and TikTok. To capitalize on this trend, I chose to use the 'Instagram Story' format to showcase multiple works instead of using Reels, which focus on a single work.

About 80% of Gen Z use social media platforms like YouTube, Instagram, and TikTok. To capitalize on this trend, I chose to use the 'Instagram Story' format to showcase multiple works instead of using Reels, which focus on a single work.

About 80% of Gen Z use social media platforms like YouTube, Instagram, and TikTok. To capitalize on this trend, I chose to use the 'Instagram Story' format to showcase multiple works instead of using Reels, which focus on a single work.

* Source: eMarketer

Iterations

01

Matching Screen

01

Matching Screen

01

Matching Screen

I streamlined the design by removing all distracting elements, including white boxes and profile pictures, and placing all information at the bottom for easy skimming. Red boxes highlight overlapping skills and personalities, making similarities easily noticeable.


Also, I redesigned the progress bar to mimic the Instagram Story format, indicating that the next work is coming soon and can be seen immediately with a tap. I also implemented a badge system, allowing users to quickly check a student's availability and reliability.

I streamlined the design by removing all distracting elements, including white boxes and profile pictures, and placing all information at the bottom for easy skimming. Red boxes highlight overlapping skills and personalities, making similarities easily noticeable.

Also, I redesigned the progress bar to mimic the Instagram Story format, indicating that the next work is coming soon and can be seen immediately with a tap. I also implemented a badge system, allowing users to quickly check a student's availability and reliability.

I streamlined the design by removing all distracting elements, including white boxes and profile pictures, and placing all information at the bottom for easy skimming. Red boxes highlight overlapping skills and personalities, making similarities easily noticeable.

Also, I redesigned the progress bar to mimic the Instagram Story format, indicating that the next work is coming soon and can be seen immediately with a tap. I also implemented a badge system, allowing users to quickly check a student's availability and reliability.

Iterations

02

UX writing & Color

02

UX writing & Color

02

UX writing & Color

Initially, I used 'Like' and 'Dislike' for swipe actions, but I changed the labels to 'Team Up!' and 'Next Time' to create a more positive and collaborative atmosphere, considering the nuance I wanted to convey.


Additionally, I originally used Colleb red (pinkish red) and grey for swipe actions. However, I switched to green and red based on their widely recognized associations and color theory, as red typically indicates 'no' or a negative response.

Initially, I used 'Like' and 'Dislike' for swipe actions, but I changed the labels to 'Team Up!' and 'Next Time' to create a more positive and collaborative atmosphere, considering the nuance I wanted to convey.

Additionally, I originally used Colleb red (pinkish red) and grey for swipe actions. However, I switched to green and red based on their widely recognized associations and color theory, as red typically indicates 'no' or a negative response.

Initially, I used 'Like' and 'Dislike' for swipe actions, but I changed the labels to 'Team Up!' and 'Next Time' to create a more positive and collaborative atmosphere, considering the nuance I wanted to convey.

Additionally, I originally used Colleb red (pinkish red) and grey for swipe actions. However, I switched to green and red based on their widely recognized associations and color theory, as red typically indicates 'no' or a negative response.

[ AS IN ]

[ AS IN ]

[ AS IN ]

[ TO BE ]

[ TO BE ]

[ TO BE ]

COLLEB

COLLEB

COLLEB

Find collaborators beyond your social circle

Find collaborators beyond your social circle

Find collaborators beyond your social circle

final design – Sign in

01

Only put a school e-mail address

01

Only put a school e-mail address

Our app only requires a school e-mail address to verify the student status and to reduce the signing-up/in process. Students can sign up/in with only a verification code.

Our app only requires a school e-mail address to verify the student status and to reduce the signing-up/in process. Students can sign up/in with only a verification code.

Our app only requires a school e-mail address to verify the student status and to reduce the signing-up/in process. Students can sign up/in with only a verification code.

final design – Sign up

02

EASY SIGN-UP PROCESS

02

EASY SIGN-UP PROCESS

Users can fill out basic personal information and upload their portfolio and/or resume. The next step is to list their skillset, including software proficiency and hard/soft skills. Finally, users can select personality traits for themselves and their desired collaborators to facilitate better matching.

Users can fill out basic personal information and upload their portfolio and/or resume. The next step is to list their skillset, including software proficiency and hard/soft skills. Finally, users can select personality traits for themselves and their desired collaborators to facilitate better matching.

Users can fill out basic personal information and upload their portfolio and/or resume. The next step is to list their skillset, including software proficiency and hard/soft skills. Finally, users can select personality traits for themselves and their desired collaborators to facilitate better matching.

final design – Search

03

TYPE KEYWORDS TO START

03

TYPE KEYWORDS TO START

Users can search for collaborators by entering keywords such as major, personality traits, and skills. They can input multiple keywords to enhance their matching results. Users can tap to view a student's portfolio and swipe to decide whether they want to match with the student.

Users can search for collaborators by entering keywords such as major, personality traits, and skills. They can input multiple keywords to enhance their matching results. Users can tap to view a student's portfolio and swipe to decide whether they want to match with the student.

Users can search for collaborators by entering keywords such as major, personality traits, and skills. They can input multiple keywords to enhance their matching results. Users can tap to view a student's portfolio and swipe to decide whether they want to match with the student.

final design – detail

04

CHECK DETAILS

04

CHECK DETAILS

Users can click the arrow on the right side of a major to view additional details about the student. This allows them to access information that isn't displayed on the main screen.

Users can click the arrow on the right side of a major to view additional details about the student. This allows them to access information that isn't displayed on the main screen.

Users can click the arrow on the right side of a major to view additional details about the student. This allows them to access information that isn't displayed on the main screen.

final design – Match

05

talk about your project

05

talk about your project

To connect with a student, users should send a message detailing their project. This message is sent directly to the student's invitation inbox. Once the student accepts the request, they can start connecting and chatting.

To connect with a student, users should send a message detailing their project. This message is sent directly to the student's invitation inbox. Once the student accepts the request, they can start connecting and chatting.

To connect with a student, users should send a message detailing their project. This message is sent directly to the student's invitation inbox. Once the student accepts the request, they can start connecting and chatting.

final design – like

06

Click 'Like' to connect later

06

Click 'Like' to connect later

If users don't have any ongoing projects but like this student's portfolio, they can click a 'like' button on the top bar to connect with the student later.

If users don't have any ongoing projects but like this student's portfolio, they can click a 'like' button on the top bar to connect with the student later.

If users don't have any ongoing projects but like this student's portfolio, they can click a 'like' button on the top bar to connect with the student later.

takeaway

What I learned was…

01

A problem still exists in our daily lives

01

A problem still exists in our daily lives

When I started my project, the main challenge was identifying a unique problem to tackle. It seemed like every issue had already been addressed by other designers. However, my project began to take form when I started focusing on overlooked aspects, like the walls I usually disregarded. Moving forward, paying attention to my surroundings will be key to uncovering new problems that haven't been solved yet.

When I started my project, the main challenge was identifying a unique problem to tackle. It seemed like every issue had already been addressed by other designers. However, my project began to take form when I started focusing on overlooked aspects, like the walls I usually disregarded. Moving forward, paying attention to my surroundings will be key to uncovering new problems that haven't been solved yet.

When I started my project, the main challenge was identifying a unique problem to tackle. It seemed like every issue had already been addressed by other designers. However, my project began to take form when I started focusing on overlooked aspects, like the walls I usually disregarded. Moving forward, paying attention to my surroundings will be key to uncovering new problems that haven't been solved yet.

02

Every decision should be made intentionally

02

Every decision should be made intentionally

In the early stages of the project, I created various elements such as user personas and competitive metrics, following the UX design process I had learned. However, I realized that elements without a specific purpose influencing design decisions are unnecessary, no matter how well-crafted they are. With this lesson in mind, I will consider the purpose behind each process in my next project.

In the early stages of the project, I created various elements such as user personas and competitive metrics, following the UX design process I had learned. However, I realized that elements without a specific purpose influencing design decisions are unnecessary, no matter how well-crafted they are. With this lesson in mind, I will consider the purpose behind each process in my next project.

In the early stages of the project, I created various elements such as user personas and competitive metrics, following the UX design process I had learned. However, I realized that elements without a specific purpose influencing design decisions are unnecessary, no matter how well-crafted they are. With this lesson in mind, I will consider the purpose behind each process in my next project.

OTHER PROJECTS

takeaway

If I had more time,

I would…

If I had more time,

I would…

If I had more time,

I would…

01

Conduct user testing for improvement

01

Conduct user testing for improvement

I would like to identify potential improvements to better understand what additional information is needed for more accurate matches and to assess if this platform is effective in finding collaborators easily.

I would like to identify potential improvements to better understand what additional information is needed for more accurate matches and to assess if this platform is effective in finding collaborators easily.

I would like to identify potential improvements to better understand what additional information is needed for more accurate matches and to assess if this platform is effective in finding collaborators easily.

02

Consider students in non-creative fields

02

Consider students in non-creative fields

demonstrated how to showcase student portfolios and recruit students in creative fields, inspired by a wall at my design school. However, another challenge is highlighting the skills of students who don't have visual portfolios. Solving this problem would further develop the platform into a community for students from all fields.

demonstrated how to showcase student portfolios and recruit students in creative fields, inspired by a wall at my design school. However, another challenge is highlighting the skills of students who don't have visual portfolios. Solving this problem would further develop the platform into a community for students from all fields.

demonstrated how to showcase student portfolios and recruit students in creative fields, inspired by a wall at my design school. However, another challenge is highlighting the skills of students who don't have visual portfolios. Solving this problem would further develop the platform into a community for students from all fields.