© 2024 MIN HEONG HONG
SEOUL–NEW YORK
MENU
MENU
/
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.