OSSN UI/UX Showcase Image 01

Mozilla OSSN UI/UX

OSSN is a network of university and college clubs dedicated to students eager to create and contribute to Open Source projects. Focused on campuses in the US and Canada, this network brings students together with organizations, mentors and professionals who are actively engaged in advancing Open Source.

The website’s mission is twofold: first, it acts as a central hub for all information needed for this network of clubs, and, secondly, it aims at engaging and motivating students to connect and participate in Open Source projects, providing them with news, resources, and opportunities such as jobs and internships.

UI/UX design, creative direction
Project link
OSSN UI/UX Showcase Image 02
OSSN UI/UX Showcase Image 03
OSSN UI/UX Showcase Image 04

Wireframes & UX

Before designing the website mockups, much consideration was paid in hashing out the various roles of users that will use the website, namely: interested students, club members, and club leaders. That distinction was translated into multiple access levels and marketing strategies for onboarding, while maintaining the approachable and open philosophy Mozilla is known for.

As a result, various wireframes, organized into wireflow maps, were presented to the client. The final wireflow which was agreed upon
can be seen here.

OSSN UI/UX Showcase Image 05

High fidelity mock-ups

The visual identity of the website was decided, after presenting mood boards and a concise aesthetic proposition to the client. The premise was taking the edgy Mozilla identity and giving it a more playful and artsy twist, culminating in a style we codenamed “Memphis style meets MTV”.

The vibrant color palette and the geometric decorative elements bring levity to the organizational aspect of OSSN. More than 20 screens —with various states and in responsive sizes— were designed and iterated over 15 versions.

OSSN UI/UX Showcase Image 06
OSSN UI/UX Showcase Image 07
OSSN UI/UX Showcase Image 08