Open collaboration platform for designers
Product Design
Open Source

Project type

Graduation Thesis

Timeline

01/2021 → 4/2021

Scope of work

Project Management
UX Design
UI design

Team

1 Designer

Context

Collabor8 is my graduation project, and I chose to present it over my corporate work because it’s one of the few projects where I had complete creative control. With its broad scope, I was able to lead the entire design process, not just focus on creating screens. I believe this project better reflects my mindset and approach to design. For this case study, I'll focus more on the design part.

About collabor8

Collabor8 is an open-source collaboration platform where developers and designers work together to build  free & Open-source softwares and push more open design processes.

The platform will serve as a marketplace for Project Maintainers to promote F/OSS projects and their open contribution requests to attract Designers/Contributors to participate. Furthermore, the platform also allow Maintainers to manage contributions submited by Designers within the projects. The users, contributors and maintainers can communicate or discuss via a forum or chat.

🔵 Project Maintainer - ⚫ Developer - 🟡 Designer
Project info page

Problem definition

I conducted desk research on academic papers about the open-source movement, followed by user research to understand motivations behind maintaining and contributing to projects. I then triangulated both sources to validate the problem and assess its relevance.

From the initial research, here are key findings:

  • The accessibility of Non-coders (Designers, Marketers,...) to Free & Open-source projects is low as they encounter technical jargons and unfriendly interface
  • The project maintainers don’t have a channel to request and maintain non-code contributions
  • The community that revolves around Open-source software development lacks people from other disciplines

Design iteration - 1

information architecture & conceptualizing

Based on the research findings, I defined a feature list, created the information architecture and lo-fi wireframes, then tested them with users.

Design iteration - 2

usability efinement & prototype

I updated the feature list and information architecture based on user feedback. For the user interface, I fixed the usability issues and added initial color scheme.

Design iteration - 3

High-fidelity UI Design & prototype

Based on feedback, I refined and unified components, styles, and UI elements. I identified key UX patterns and prioritized building UI templates for them. Finally, I created a hi-fi interactive prototype for the final round of testing.

Design iteration - Final

flows & Micro-Interactions Enhancement

I refined the design, completed the remaining user flows, and added micro-interactions to improve usability and engagement to the platform.

Key learnings

  • During the project, I spent too much time refining an idea, which led to analysis paralysis and delayed progress. I learned that ideas should evolve through testing and iteration.
  • Framing the problem clearly and selecting accessible users significantly impacted the project timeline and research reliability.4o