Mozilla Fixme UI/UX Showcase Image 01

Mozilla Fixme website UI/UX

For the “Fixme” project, our mission was singular: we needed to design an effortless way that would support interested (“wannabe”) programmers in finding programming issues in open-source software projects to resolve. The information was already out there, but the overhead was quite steep.

More specifically, a volunteer would have to research a particular software, check if there were unresolved issues, and then evaluate if they were right up his/her alley. If not, the volunteer would have to repeat the process, spending many hours scouting the web, and possibly losing interest.

Client
Mozilla
Services
UI/UX design, Branding, Naming
Project link
Mozilla Fixme
Mozilla Fixme UI/UX Showcase Image 02
Mozilla Fixme UI/UX Showcase Image 03
Mozilla Fixme UI/UX Showcase Image 04
Mozilla Fixme UI/UX Showcase Image 05
Mozilla Fixme UI/UX Showcase Image 06
Mozilla Fixme UI/UX Showcase Image 07

Thus, what we had to design was a hub of sorts, to easily browse and filter issues from multiple GitHub project repositories. We added all the necessary filtering without overcomplicating the process. Additionally, we color-coded every issue panel to visually denote the difficulty of each issue.

But we didn’t stop there. We needed to match different approaches to accessing the same information. So, in addition to the issue browser, we designed a project directory, where every participating project is briefly described alongside with the corresponding programming languages. Last, but not least, we designed an interactive Call-to-Action section which on-boards newcomers using first-person, friendly statements which are easily internalized and encourage them to take their first steps.

Fixme UI/UX Showcase Image 08
Fixme UI/UX Showcase Image 09
Fixme UI/UX Showcase Image 10