Sekar Setyanto

Kollab

Revolutionizing collaborative learning for college students

Collaborative learning has been proven beneficial, with students reporting significant advantages compared to independent learning. However, many students remain hesitant to form groups.

The final app concept promotes anxiety-free group formation and supports effective group management and fair work distribution, making collaborative learning more enjoyable.

Role

Product Designer, UX Researcher

Timeline

January 2023 - June 2024

Team

Researched in a team of five. Designed independently.

Tools

Figma, FigJam, Google Forms

welcome screeniphone mockup
home screeniphone mockup
groups screeniphone mockup
notification screeniphone mockup
add group screeniphone mockup
group objective screeniphone mockup
join group screeniphone mockup

The Dilemma

The project began with a shared experience: the fear of exclusion, especially when forming groups in class, often feeling overshadowed by those with established connections. Despite knowing the benefits of group work, this anxiety was a common struggle for us.

A research on college students validated our feelings, revealing that this fear is supported by data.

70%

participate in at least one study group per semester

60%

report higher level of learning when studying in groups vs individually

78%

report increased motivation through studying in groups

20%

actually prefer studying in a group setting

Survey

Our own survey involving 38 students helped us understand the general sentiment towards collaborative learning, and the results supported the initially found dilemma.

Do you find studying in groups helpful?

graph on if students find study groups helpful

How often do you voluntarily form groups?

graph on how often students form groups voluntarily

Setting Goals

To uncover the root of this gap and better understand the process of collaborative learning among college students, the following goals were set.

scope icon

Investigate the motives behind collaborative learning

wrench icon

Examine the methods and tools utilized in team formation

lightbulb icon

Identify strategies utilized to fulfill initial motives

trophy icon

Discover the outcomes of collaborative learning

Interviews

We interviewed 8 college students, which allowed us to collect more nuanced findings, unveiling the diverse motives and challenges associated with collaboration.

quote icon

With most of my computer science or math classes, I think I tend to form study groups because it’s impossible to do alone, or at least it’s very miserable to do alone.

Interviewee 1

quote icon

I guess that's my main motivation behind forming study groups—just to have fun while getting things done.

Interviewee 2

quote icon

I feel anxious about not being able to find someone who works at the same pace as I do.

Interviewee 3

Synthesis

To converge the broad range of ideas, I made an affinity diagram which distills the data to general sentiments and emphasizes the main issues college students experience during collaborative learning, as outlined below.

affinity diagram

Groups are formed with diverse, and occasionally conflicting, intentions.

Some students form groups to better understand class material, while others do so to expand their social networks. While some students report being unaware of other members’ intentions when forming groups, they also report only having a positive experience when everyone in the group knows and shares a common goal.

Familiarity with group members enhances group formation.

Prior knowledge of group members before formation is crucial. Students often form groups with acquaintances because they already understand each other’s work habits, personalities, comprehension of the material, and level of contribution. They know what to expect and what to bring to the table. Being uninformed sparks unpleasant experiences.

Group reluctance also stems from past collaborative issues.

Other than challenges during group formation, such as anxiety and fear of judgment from peers, reluctance to form groups often stems from issues that arise after the group has been formed. These issues include members taking advantage of others’ efforts and individuals working independently without collaboration.

Students experience challenges of aligning conflicting schedules.

Students struggle to coordinate meeting times due to their hectic schedules, which include classes, review sessions, exams, and various organizational activities.

Pleasant experiences involve accountability and increased motivation.

Some students seek accountability through collaborative work and report fewer distractions. Groups offer increased motivation, making the class experience less isolating and more enjoyable.

Product Scope

Students’ reluctance towards collaborative learning was traced to issues in group formation and management.

To address these challenges effectively, I identified the top user needs at each stage of group work, ensuring that the minimum viable product would meet these essential requirements.

Group Formation

Align the motive behind the group's formation

Inform students about members’ work habits, personalities, and understanding of the material

Facilitate the formation of groups in a stress-free manner

Group Management

Assist groups in scheduling events at available times

Help group members maintain accountability

Ensure equitable contribution from all members

User Flows

I created possible user flows for the product’s onboarding, where user information on work habits are collected, and both stages of group work to assure the minimum viable product will meet all the user needs determined.

Onboarding

kollab's user flow for onboarding

Adding a new group

kollab's user flow to add a new group

Prototype and Usability Testing

An early prototype with minimal visual design was made to facilitate usability testing.

The usability testing involved observing participants using the early prototype. They were instructed to complete predetermined tasks while thinking out loud.

I aim to uncover areas for structural or functional improvements, which were then implemented in the subsequent iteration.

Change in Group Formation Method

The initial design was inspired by modern dating apps, which are widely used to browse and connect with individuals.

However, students reported feeling anxious about the initial formation method, likely due to its focus on appearance, which is unnecessary for academic group formation. Additionally, it lacked a direct way to form groups, making students hesitant to ask about joining a group after connecting, which felt redundant.

To address these issues, the design was reimagined as an open group board. Group creators can now create and publicize groups for interested students to join, minimizing individual interactions and reducing anxiety.

Before

Dating-app inspired networking

prototype of group formation before redesign

After

Open groups bulletin board

prototype of group formation after redesign

Change in Tasks and Events Default Sorting

Separating tasks from events is a common trend among productivity apps, likely due to users preferring to view them separately.

Although the early prototype considered this, the initial design made it difficult for students to prioritize tasks and events upon opening the app, highlighting the need for clearer organization.

The home page was redesigned to sort entries based on time while still using a segmented control bar to separate tasks from events.

Before

Task and event-based sorting

After

Time-based sorting with task and event separation

Change in Tasks and Events Creation

The initial design allowed for creating tasks and events only on each group’s page.

User testing revealed that users did not think of the group first when creating new entries. Students initially searched for this option on the homepage, which led to confusion.

To address this, tasks and events can now be created from both the homepage and group pages using an all-inclusive floating action button.

Before

Group-based task and event creation

After

All-inclusive task and event floating action button

Redesign

The initial design of Kollab was completed in May 2023.

After refining my aesthetic sense and sharpening my design systems skills, a year later, I undertook a major redesign.

Before

May 2023

kollab before redesigniphone mockup

After

June 2024

kollab after redesigniphone mockup

SF Symbols 6

arrow clockwise icon
arrow left icon
book icon
bubble icon
filled bubble icon
bell icon
building icon
calendar icon
checklist icon
checkmark icon
flask icon
filled house icon
house icon
xmark icon
uptrend icon
puzzle icon
plus icon
filled person icon
text checkmark icon
filled 3 person icon
2 person icon
filled 2 person icon
pencil ruler icon
pencil Clipboard icon
magnifying glass icon
network icon
default buttonsecondary buttondisabled button
task componentevent component

Learnings

Don’t be afraid to iterate because every design process is different.

While I understood the double diamonds and the design processes in class, my hands-on projects had always followed a linear path. Building Kollab was the first time I truly grasped the importance of user testing. The functional improvements derived from the testing insights were crucial to Kollab’s final designs.

Things change when you start scaling.

Starting with spontaneous designs was effective initially, but scaling becomes challenging. I abandoned my initial redesign and created a simple design system inspired by Material Design and Apple’s Human Interface Guidelines , significantly speeding up the scaling process.

Look at real apps, not just pretty ones.

I was too focus on visually appealing designs, especially those on social media, yet realize they aren’t always functional. By examining real app designs on platforms like Mobbin, I found inspiration to create a better user experience for Kollab.

Hone your skills, no matter how experienced you become.

Although I felt I wasn’t gaining much theoretical knowledge, the year between the initial design and the redesign was transformative for Kollab. I am committed to continuously improving my skills and learning from others to produce better, more enjoyable experiences.

Learning everyday.

Designed in Figma and coded in Visual Studio Code. Built with Gatsby and Tailwind CSS. Deployed with Vercel. Font set to Inter Tight and Source Serif Pro. Symbols from SF Symbols 6.