C-lab

SHARE-CONNECT-COLLAB

Background

C-lab is a new, innovative app designed to promote discussions and share independent projects and ideas among people with similar interests.

It all started when I came across a post written by A in 2018. A was creating a fan-translation for a game not available in their language. According to A, 80% of the game has been translated, but have decided to drop the project because they couldn’t recruit enough people to collaborate with them to finish the project. After some digging, I found out A has only posted about their fan-translation recruitment on tumblr and a small game forum, both gaining little attraction.

As I read the comments posted years later, I found that it wasn’t because people wasn’t interested in collaborating, but the fact they didn’t know of its existence. If they knew years prior, they would have stepped up to help. This got me thinking, just how nice it would be, if there was a platform dedicated to people who just wants to promote project ideas and recruit interested individuals.

Research

Given that there isn’t a pre-existing platform dedicated to those who want to promote ideas and recruit individuals, I decided to look into platforms where online recruiting does occur and found that they are prevalent in online discussion sites as well as social media platforms.

Step 1: Competitive Analysis

In order to determine what factors attract users, the first step I took is conducting competitive analysis on three popular platforms dedicated to online discussions. Following this, I organized the findings based on the pros and cons of each application.

Step 2: User Interview and Survey

The next step is to identify user needs, preferences, and pain points. The surveys allow me to gather quantitative data from a large audience, which will help me identify common trends and issues. On the other hand, the interviews can offer qualitative insights, revealing user motivations and behaviors.

Together, they inform design decisions, improve usability, and enhance user satisfaction, ultimately leading to more effective and engaging interfaces.

Step 3: Interview and Survey Summary

The next step is to identify user needs, preferences, and pain points. The surveys allow me to gather quantitative data from a large audience, which will help me identify common trends and issues. On the other hand, the interviews can offer qualitative insights, revealing user motivations and behaviors.

Together, they inform design decisions, improve usability, and enhance user satisfaction, ultimately leading to more effective and engaging interfaces.

Methodology

Sample Size: 10

Methods: Survey and Interview

Sample Questions

What do you like/ dislike about the online discussion communities you've used?

Which of the following sites are you familiar with in terms of recruiting people?

Based on the previous question, what do you like or dislike about the platform?

How comfortable are you sharing your project ideas with the public?

When teaming up with strangers online, what are you most concern about?

Survey Summary

Interview Summary

Step 4: Define Possible User Persona

At this step, I created two user personas whose problems reflect the interview and survey data. This allows me to empathize with users and understand their needs, which will help me determine the best solution for their problems.

Design Process

Step 1: Structural Planning via Site Map

Important Notes: Emphasizes on the important aspects of the application, such as the functions for users to freely browse, and communicate with others, as well as a easy to navigate on-boarding page that can eliminate bot accounts.

Also eliminate and add features by exploring and using other existing applications as reference.

Ex. reddit, twitter, Instagram, facebook

Step 2: Sketch Phrase

Before I started the sketch, I first created a task flow, in which users are tasked with creating an account. This was then followed by the user flow, in which users are free to comment, like, and post in the application. After these flows were decided, the first key pages were designed. These pages include the onboarding page, home page, direct messaging page, and post page

At this point, we decided to register the app under the name C-lab, which is our abbreviation for Collab. Since the app doubles as both a online forum/ social media app, one of the key feature is that it’s meant to be a casual app. Therefore, both the logo and the icons should exhibit friendliness.

Step 3: Refine and Improve

After the initial sketch, I built the skeleton, known as a mid-fidelity wireframes. The purpose of this is to refine the sketch and simulate vital interactions in the final solution. The results gathered from this prototype will also provide me with insights into the functionality and expectations for the final product.

Step 4: Finalization

As I approach the finalization of the product, I made adjustments to the mid-fidelity prototype by incorporating finalized design choices to create the high-fidelity prototype. This step is crucial as it imitates how the end product will function, offering a realistic preview of the user experience.

Usability Testing

With our high-fidelity prototype complete, the next step is to pass it off to potential users to get their feedback. During this stage, the users are given two tasks to complete, and after the completion of both tasks, had to report any complications, or pain points they came across while navigating.

Step 1: Task Objectives

With the high-fidelity prototype complete, the next step is to hand it off to potential users to gather feedback. During this stage, users are given two tasks to complete. After finishing both tasks, they are asked to report any complications or pain points they encountered while navigating the prototype.

Task 1: Register Account

During the first user testing phase, users were tasked with registering for a new account on the app. In this phase, users also experienced error situations to assess how effectively information to resolve these issues is communicated to them

Task 2: Site Navigation

As part of the second user testing phase, users were given the freedom to explore the app after logging in to an existing account. Here, they could browse various functions such as viewing and creating posts, liking and favoriting content, and commenting and replying to others. This was to assess the user-friendliness of the UI for first-time users.

Step 2: Gathering User Feedback

As the final user testing concluded, each participant was interviewed regarding their experience using the app. All user feedback was categorized based on their likes, dislikes, and any pain points they encountered. We then summarized the major pain points identified across all users.

Step 3: Making Iterations

Now that I understand the major pain points, the goal is to address these shared problems and eliminate them by devising reasonable solutions.

Finalization

After identifying and devising suitable solutions to address the user pain points, I proceeded to implement these solutions across the entire application. This involved integrating the necessary changes and improvements to enhance the user experience and ensure that the application effectively addresses the identified issues.

Task 1: View Comments and Replies

Task 2: View Direct Messages and Reply

Task 3: Create Post

Prototype Demonstration

Create An Account Prototype Demonstration Here: Create Account

Login and Explore Prototype Demonstration Here: Login and Explore

Main Takeaways

This journey was a long and tedious one. I went into this project blindly, not knowing what to expect. However, over the course of this project, it really challenged me to think outside the box and accumulate new skills to make this project possible. Overall, some of the key takeaways from this project are: first, don’t be afraid to make massive changes to your design. Second, designs are not always about aesthetics; sometimes, you must sacrifice certain design choices for accessibility for all. Lastly, simple and direct UI should always be prioritized to ensure the best user experience.