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
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.
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.
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
- 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.
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.
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.
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.
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!