Peter Xu
UX designer

Collabs

Bring your ideas to life.

(Work in Progress)


About Collabs

Collabs is an iOS App that increases student innovation efficiency by streamlining the process for students to find tech related projects and teammates, with the hope of expanding to other fields in future. Version 1.0 went live in May, and we are working on a 2.0 update.

My Role

  • Designed the specific flows of project creation, and user notification

  • Assisted in establishing the App's UX flow and design system

  • Led the qualitative user research effort to establish specific feature requirements

  • User testing

Collabs

Inspiration

Two years ago, we tried to do a personal design project with coding involved. It was during the search for developers when we realized finding teammates wasn't easy. We went along with this problem, and that's how Collabs came to be -- a place for students to find projects and teammates alike.

Overtime, we learned about the greater innovation ecosystem at UCSD and realized projects & startups were foundations for great social impact. During the current COVID-19 crisis, online collaboration is especially important with countless projects emerging. By streamlining the way to find projects and teammates, we help student projects get off the ground more efficiently.

Collabs

Problem Scope

From personal experiences, we believe projects are important for students to land internships and jobs. Especially projects outside of classes because they are often inspired by true passions. But students often have limited knowledge on such opportunities.

UCSD has an online portal to help students and faculty gain increased access to the campus' larger innovation ecosystem. However, it has 2 main issues:

  • Its function as a platform is weak. There isn't much authentic content, and often redirects you to other campus websites that could also be outdated.

  • Resources within aren't personalized and prioritized based on relevancy to the individual. 

There are other third party platforms to post projects at UCSD, namely Handshake and StartupTree. However, their biggest problems are the lack of specific processes that target student projects, because their product logics dictate that they have to support other content as well.

Handshake

Handshake has been used by UCSD for several years, and the majority of postings are full time jobs / internships, and university organized career events. There are student organized projects as well, but they are hard to find as there aren't clear distinctions between those and the full time postings.

StartupTree

StartupTree was adopted by UCSD rather recently, and hosts the actual entrepreneurial community. Its main flaws are the lack of explanation and guidance, worsened by the inclusion of various entrepreneurial stakeholder roles and related jargons, as well as a lack of narrative behind project ideas.

Collabs

User Survey

To explore how the student project experience might be improved, we conducted Google survey and received responses from 122 UCSD students. 

91.8% of respondents have had project experiences, yet only around 1/3 tried to push the projects past classes. Many students lacked initiatives to do so for reasons such as "Afraid (that) my ideas won't be popular enough to gain support", "lack of support", "Most projects live and die in the classroom...just reimplementing technology that is already heavily used".

For those who searched for teammates, 46% were through word of mouth, 35% through social media. However, these methods lacked efficiency and didn't scale well when a project gets more developed, resulting in need for diverse skill sets. At this point, recruiting becomes very hard without a unified platform.

Affinity diagram & interview notes

Affinity diagram & interview notes

User Interview

We interviewed 7 students who have joined projects, and 2 who have started their own projects. The goal is to synthesize concrete pain points, and understand user psychology / motivations better.

Project Founders

We mainly asked about how they started their own projects, and early recruitment issues. We learned that:

  • Teammate retention was their biggest challenge. To make sure teammates don't quit half way, they value work ethics and personal character more than technical skills.

  • Developing a good narrative about the project made themselves more confident about the idea, and made it easier to attract teammates.

user journey map

Project Seekers

For project seekers, we compiled, analyzed, and dissected their thought process into 4 phases:

  • Awareness

  • Consideration

  • Application

  • Committing

From here we created our user journey map which synthesized major insights. Based on these, we decided to create an App that targets the following areas:

Informativeness

Many nuances exist in student projects that affect participation and overall experience. We hope to show them on the table so users can be confident in their decisions.

Customization

Students come from all different academic backgrounds, with different skill sets and their own preferences. So we want them to find the projects that interest them.

Narrative

Similar to a pitch, good narratives attract people more easily. We want to provide an organic and thoughtful process by allowing the stories behind the ideas to be heard.

Personal

Even though application is involved, this is a student project platform, not a job hunting App. We want to foster an environment where users to learn about each other as people, not just merely teammates.

Collabs

User Flow

We categorized our users into 2 groups based on tasks:

  • Project owners find teammates to push their idea forward.
  • Project seekers find projects to join where they can build skills.
Version 1.0 Design
Collabs

Design System

We built our own design scheme, and followed iOS human interface guidelines.


Project Creation 

I was first tasked with designing the project creation flow. The key requirements were:

  • Simplify the process and declutter the UI

  • Streamline the amount of user typing

To simplify the process, I tried splitting up questions into individual screens so users do one thing at a time, which also reduced typing. To convey progress, a progress bar was designed on top. I also thought of showing progress by scaffolding questions, similar to tabs in Safari. Some questions were designed to be "search and choose" instead of typing to ensure consistency of user input, which also helps with developers' coding. But during critique I realized this design didn't provide alternatives if users didn't know / couldn't find a fitting choice. Another problem was users had to think of an answer. 

Collabs

Project Creation - Iteration

To fix the search problem, I experiment with a tag & card based design with pre-populated answers, which presented users with options, instead of them having to thinking about them. This made the process more streamlined and reduced the mental strain of users. I also designed more questions such as asking about the project's problem space to provide it with more comprehensive context.

Collabs

Project Creation - Final

Through critique, we adopted the tag & card design because it organized different information through a visually consistent manner, and also encouraged users to perform actions. Due to coding difficulty, the progress bar was replaced by a step overview screen. 

Users start by naming their project, then choosing project stage and categories. Next they answer descriptive questions about what the project does, select the skills they need from members, and finalize the logistics. With these information in place, project posters can make sure people applying know what is needed, and project seekers can apply to those that fit his skills and interests. We also used tags to indicate these skills in other sections such as user profile to ensure consistency. 

Collabs

User Notification

Next, I started designing the user notification flow. The first thing I discussed with other designers was: How to make the process uniform? A user can get different kinds of notifications and perform different actions, but the process should be the same. To maintain this consistency, I made an action modal. User enters the notification section, which uses a list view. The modal appears when you tap on a notification and offers actions to perform. 

Collabs

User Notification - Iteration

While iterating, I explored variations of the modal's interaction and text content. 

One concern was how to manage the white space. We wanted to reach a balance between content and action. Along the process, I asked myself: Could the modal be integrated into the action of browsing notifications, instead of making it take up one screen? 

Guided by this question, I redesigned the modal to be a pop-up, which captures essential information, while eliminating extra white space. User exits the modal by swiping down the screen.

Collabs

User Notification - Final

After consolidating with teammates, we adopted the idea of a pop-up modal. 

We also decided that when completing actions in the modal, users will be taken back to the notification screen, instead of being routed to other pages (depending on modal content). We believed this would reduce user confusion, and maintain consistency because user returns to where he started.

Collabs

Prototype

Over time, we worked with the developers to produce an interactive prototype. We knew some designs and screens wouldn't be in the App's 1st release for technical reasons, but we wanted to flesh out the core function --posting a project for user testing.

Collabs

User Testing

At this stage, I tested the core user flow -- posting a project with 2 users, all with experience in projects or startups, to find issues in usability and the flow. The team conducted 5 tests in total. Users are asked to navigate 10 screens, while answering specific questions.

Below are some major insights & problems we found:

  • There are no limits for selection items, resulting in inconsistent user responses. Some selected too few, others too many. 
  • Users misled by the UI to continue without providing answers to all questions.
  • Project categories aren't diverse enough. 
  • Misleading icons and wording make users hard to decide subsequent actions in some screens. 
Next steps:

  • Consolidate findings and make changes to the main flow itself, such as combining screens, changing the order of some questions and screens.
  • Add constraints to actions for error prevention.
  • Include more project categories.
  • Disambiguate the UI by improving icon design and text content.

Collabs

Main Flow Redesign

The overview screen was supposed to show users what the following process was like. However during testing, many users didn't understand its purpose. To address this, I came up with 2 versions of redesign. 

Version 1 reused the card components for easier development and a more dynamic feel. But this meant when users click "Continue", they tend to expect navigating to whatever step they just clicked on, which breaks the linear flow. To avoid further confusion, I decided to use a version 2, with the description under the steps, and nothing more.

Collabs

For the "Basics" screen, users had to fill out the information before continuing. But in the old design, there were no indications of such, and users often clicked "Continue" without completing the questions.

In my redesign, I placed asterisks next to the questions to indicate they had to be answered. I also used an inactive state for the "Continue" button, which only changes when both text boxes have inputs.

final design of version 1.0

MVP Launch & Continuation

Our MVP went live on May 13th!

Update: Since summer 2020, we've been continuously debugging, and designing a 2.0 version of the App.

Collabs

Version 2.0 Design

As the App went live, we referred back to the research results, and identified new areas to improve.

The first problem we identified was a lack of specificity while selecting needs and skills, resulting in user confusion and frustration. The left screen is user selecting skills during sign up, while the right is the "needs" page during project creation. The issue is various "sub-skills" exist under each need, for instance various JavaScript frameworks can go under "Web Developer", but the design didn't address this specificity.

As improvement, we developed a new mapping logic, which builds on top of the current flow, while also facilitating users to discover related projects.

During sign up, users select broader categories of interest. All available choices here are then mapped 1 on 1 with filters in the home screen. When applied, the filters then link to all projects with different roles that still correlate to the general categories. The screens shown here aren't finalized yet.

Some other improvements being worked on include:

  • Addition of personality questions during sign up to make application less stressed, and let users get to know potential teammates on a more personal level. This addresses the "personal" aspect that we identified during research, and works in reverse for project seekers as well.

  • Polishing the project creation flow with improved visuals and addition of information that project seekers care about, like weekly commitment hours.

  • Implementing a more minimalistic visual style.

  • Redesign of home screen: including adding / removing attributes from project cells.

  • I'm currently redesigning the applicant screen that's is available to project founders: Improving layout, adding action state modals, conveying application status changes to both project founder and seekers.

Work Still in Progress!