codeFair

codeFair is a platform 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.

Team: Ann Lei, Selina Che, Engineering team, MBA team

Responsibilities: UX Research, Ideation, User Flow, Wireframes, Color and Industry Study, User Interface Design, User Experience Design, Usability testing, Prototype

Timeline: 8 weeks

Software: Miro, Figma

Design Challenge

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?

resident's platform using ipad. Home page mockup

Design Response

The solution is to help maintainers to work on the projects they care about by allowing users to add tips to their issues. We created the smoothest flow with the least amount of clicks for users.

As for the design, we prioritized the user experience before creativity. For instance, the issue page layout is identical to Github's posting layout for user to easily post an issue without increasing the learning curve. However, we did improve some buttons and flows to increase the user experience by adding color as a differentiator and utilizing the hierarchy and layout to lead users' eyes.

codeFair's full user flow mockup in an dark grey iMac desktop

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 her repository. Maintainers can organize their issues on codeFair by starring the issues, or sort by different ways, such as tip amounts or dates.

How was it made?

Research

Term explanation

For those unfamiliar with software development and open source, we recommend reviewing the key terms below before reading this case study:

Open Source Software:

Software that is free to use and typically available through a code hosting platform like Github (other code hosting platforms include Bitbucket, Gitlab, but Github is the industry leader with ~88% market share). Open source code can be used for free by anyone at any time in projects, research, or even to build products. 92% of the world’s applications run on open source.

Maintainer:

Every open source project has a maintainer. The maintainer is responsible for expanding the project, answering user questions, fixing bugs, and much more. Open source would not exist without maintainers.

Open Source User:

A user of open source will generally integrate a series of different open source projects into their project or product where each provides a different piece of valuable functionality. Users may find bugs, have questions, or add new features that they can contribute back to the original open source projects.

Open Source Issues:

Issues are GitHub’s catch-all for user questions, feature requests, bug reports, and general support. Users post issues on the GitHub project page and others can respond. When the issue is deemed resolved, the issue is “closed.”

Secondary Research

There are problems with open source. 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 repo in 2020, and there are 263 unresolved issues. Even though everyone is allowed to answer open source issues on Github, the maintainer is usually the one who has the most knowledge of the project. However, the maintainers are working on it voluntarily and do not have enough time to dedicate to persisting well-maintained and documented code, which makes users less likely to want to continue using the project.​

Semi-structured Interviews

We sent out screeners, survey and conducted 15 semi-structured interviews to understand what incentivize developers and their willingness to participate in the platform. We found out most of the developers are not incentives by money like we assumed in the beginning. Developers are usually getting paid a lot through their day job. The core problem is that maintainers can’t justify spending more time on open source because they have little financial support. On the other hand, users of open source projects can’t get the timely support they need from maintainers.

The initial idea was to create a bounty system 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. However, after understanding the real circumstance through interviews, we pivoted our main stakeholder from the users to the maintainers.

No items found.
Daryl Fellows | Development Services Supervisor
Lucette Ramirez | Communications Officer

Insights

Through lots of interviews and talking to developers and open source consumers, we found some extremely useful insights that pivot codeFair to a completely different direction.

1. Developers are selective when it comes to debuging 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
"Crappy question 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, a third party contributor (developer) is hard to help.

"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 cares about the projects and want them to be better.

"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

Idea Pivoting

Instead of asking random developers on the internet to work on bugs and issues to earn money, it is more sustainable and efficient to ask people who care and are passionate about their projects, the maintainers, to work on the issues of the project. However, open-source is a platform people upload projects for free for the community, and the code can be used for free by anyone, without any kinds of credits. Even though maintainers would love to work on these projects, it just doesn't pay the bills.

We decided to focus on helping maintainers getting the credits they deserved. We wanted to provide an easy system allowing users to quickly add a monetary tip to their issue request on GitHub. This gives maintainers an additional financial incentive to resolve users’ issues quickly. In that case, we can unite the interests of maintainers and end-users.

No items found.
Concept two: The one we chose to move forward with

Design Process

Wireframes

After listing out all the detail features and pages we need, I sketched out the core five pages wireframes to connect the information architecture to the visual design. We checked in with engineering team to make sure the flow works well with the plugin we are using. After iterations, we converted the wireframes into digital version for usability testing.

Usability Testing Key Findings

The low-fidelity Figma prototype was tested by four engineers with different backgrounds, with and without experiences of posting issues on Github. These are our target users, people who would possibly face coding issues, no matter experienced or not. codeFair is a platform for beginning to advanced developers.

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 constantly when dealing with payments and heavy text.

"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

Iterations

We focused on the findings from testing with developers and iterated on all the details and page flows going from Github to codeFair, and from individual pages to pages. At the same time, we worked with the engineering team simultaneously to make sure these are the best solution and achievable. Finally, after six versions, we came up with our final design.

Solution for Key Finding 1 : With each issue submitted by an end user to the maintainer’s repo, 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.

Solution for Key Finding 2 : The individual page search bar is eliminated and the search bar in the navigation bar is the only search bar we keep.

Solution for Key Finding 3 : 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.

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.

In addition, even though we would like to help every developer in all open source platforms, we realized starting small by targeting Github was the best first step we can do. Since codeFair complements Github, and we wanted to build a community for supporting maintainers. We decided to use yellow and black as our main colors.

No items found.
No items found.

Reflections & Further considerations