codeFair

codeFair is a platform that enables users to add monetary tips to their issues, incentivizing maintainers to dedicate more time to projects and offer timely responses to user issues. It is a tool designed for the Open Source Software (OSS) community.

My Role: Lead UX Designer

Team: Design team of 2, Engineering team of 4, Business team of 4

Responsibilities: User Experience Design, Wireframes, User Interface Design, Ideation, UX Research

Timeline: 8 weeks

Software: Miro, Figma, HTML, CSS

Design Challenge

There are many issues that users asked on open source platform (e.g. Github) that have never been addressed.

How might we unite the interests of open source maintainers to work on their projects full time, and end users to get their issues resolved quickly?

Context

This project is a school project of the Entrepreneurship elective course from the University of Washington with MHCI+D, HCDE, CSE, and MBA students.

Why open source platforms?

Open source platforms, such as Github, is a resource almost every developer constantly use to look for projects, bug solutions, plugins, and so much more. However, there were countless issues on Github that have never been solved and they cause problems for developers.

resident's platform using ipad. Home page mockup

Key Features

1. Add tips to your issue

After users create an issue on the maintainer's repository, they can add a tip to encourage the maintainer to prioritize the issue. 

2. Notify the maintainer

The maintainer gets an email notification that a tip has been added to an issue in their repository. Maintainers can organize their issues on codeFair by starring the issues or sorting by different ways, such as tip amounts or dates.

How was it made?

Research

Secondary Research

The image below is an example of an open source repository on GitHub. Although it has 1600 stars and 1500 users, the documentation isn’t up to date. There have only been 4 updates to the repository in 2020, and there are 263 unresolved issues. As a result, the projects can't be used by the developers.

Initial Concept

A bounty system is used to help open source consumers get their issues and requests faster and at the level of quality they seek. The users get to set criteria and offer price to the issues that they would like to get help with. The developers get to select issues and earn credits and money.

Semi-structured Interviews

We sent out screeners, surveys, and conducted 15 semi-structured interviews to understand what incentivized developers and their willingness to participate in the platform, as well as what would benefit end-users the most.

Key Insights

1. Developers are not incentivized by money.

Our research concluded that the primary reason was that developers were already getting paid generously through their day job.

"Crappy questions are not fun. You can pay me but I don't want to do it." - Participant #3

2. It would require maintainers of repositories to fix a bigger issue, and a third party contributor (developer) is hard to help.

The maintainer is usually the one who has the most knowledge of the project.

"It is too difficult for developers with no prior knowledge of a project to come in and fix bugs. Also ramp up on project is time consuming/challenging. It would require a lot of money." - Participant #6

3. Maintainers are the only ones that truly care about the projects and want them to be better.

The developers are selective when it comes to debugging and solving code issues.

"Unless it’s a fun project, I need more than $10K to work on a feature or bug. It takes a lot of efforts to convince others on the right bug fix and get things merged."- Participant #1
"It depends on how well the question is being stated. I don't want to waste time fixing stupid issue such as typos no matter how much they pay me." - Participant #7

View Research Report

Ideation

Pivoted Concept

We pivoted our stakeholder from developers to the maintainers since maintainers are the ones who care and are passionate about the projects.

We decided to provide an easy system allowing users to quickly add a monetary tip to their issue request on GitHub. We envision a world in which successful maintainers can get paid enough to work on their projects full-time.

User Flow

Creating a user flow helps us visualize the smoothest user journey and make the website as simple and clean as possible.

Wireframes

The goal was to confirm that we have all the necessary information on the correct pages, which is the easiest way for the user to locate the information they're looking for, and provide more thought through detail within each pages.

Low Fidelity Wireframes Version One

(Click on the image below to view full size image)
No items found.

Usability Testing

We wanted to learn about the thought process behind users trying to post an issue on Github, as well as how useful codeFair is to them. In addition, our goal was to test out how to make the user experience as efficient as possible by providing the least amount of clicks.

Participants: Developers x3 (with/without experience posting on Github), Github User x1, Self-taught (Amateur developer) x1
WHAT WE LEARNED

1. Having the link inserted in the Github text box for inputting issues can be confusing and might lead to accidental deletion.

"I would delete the link immediately when I need to type in my issues or after I open it up. It looks like it would be added to my submission."  - Usability Test Participant #3

2. Users get confused about whether the search bar searches for the whole website or the current page.

"I only wanted to search this page but it implies searching the whole website." - Usability Test Participant #1

3. It is important to provide feedback consistently when dealing with payments and redirection to websites without confirmation.

"I got confused when I got brought back to Github. I'm not sure if the payment successfully went through or not." - Usability Test Participant #3
"I'm not sure if I need to resubmit my issue or not" - Usability Test Participant #3

HOW WE RESPONDED

1. Auto-generate a comment

With each issue submitted by an end user to the maintainer’s repository, codeFair will auto-generate a comment that notifies the end users that the maintainer is accepting tips and links them to codeFair where they can add their tip.

2. Keep the global search bar exclusively

The individual page search bar is eliminated and the global search bar in the upper navigation is the only search bar we keep.

3. Reassurance

codeFair will send out a confirmation email to the user after payment. Also, since users pay after they post their issues (Key Finding 1), the concern of whether they need to repost the question or not is eliminated as well.

Wireframe Iterations

At the same time, we worked with the engineering team simultaneously to make sure these solutions are achievable. Finally, after six versions, we came up with our final design.

Design Process

Industry research and color study

Reliability, Trust, Fairness, and building a community are the core values of codeFair and what we want our users to feel. We did an Industry color research of our competitors before we develop the color palette for codeFair.

codeFair Brand Style

(Click on the image below to view version one UI full size image)
No items found.

Final Design

Full website flow

(Click on the image below to view Final UI full size image)
No items found.

Reflections & Further considerations

Good communication leads to better team dynamic and better project

This project has taught me how to communicate the process with people who have no knowledge in design. I worked with engineers and business people closely that I got to understand what their priorities are. I was also able to let them understand my point of view and deliver the design decision in a way that everyone could understand.

Working with constraints

I learned a lot about how to find a balance between having a good user experience design and creating an achievable design through this project. There were times that we were informed by engineers that we had to make changes because the design was not feasible with the code but in the end, we still managed to find other ways to make it work.

Testing with real target user

Testing with our target users helped me understand the importance of this process. People think differently. How engineers think is totally different than how designers think. Because of testing with the right user, we got to receive many insightful feedback we never thought of when we were designing.

More Work