Remote Product Design

The Mozilla community is a large group of enthusiastic volunteers who are passionate about Mozilla’s mission. Mozillians are an eager group of people that strive to accomplish great things on the web. These volunteers support the company’s overall initiatives by contributing in areas such as marketing, development, design, and support.

View Website

Overview

The goal of this project was to create a web experience that facilitates communication between the community and its members, and directs efforts towards Mozilla’s initiatives.

We designed and built the Mozilla Community Portal with help from their community members. We incorporated our user’s insights throughout the whole process; from sketches to final product. We even leveraged Figma’s sharing capabilities to collect feedback from the whole community! Hundreds of members were able to view and leave feedback on designs. This kind of open collaboration was my favourite thing about the project.

Follow the repo here: Github Repo


Platform

Wordpress


Team & Role

Project Manager (Remote)

Product Manager

2x Community Managers (Remote)

Mozilla Ecosystem Designer (Remote)

2x Product Designers (Yours truly)

2x Software Developers


Timeline

8 Weeks for Design

Problem Space

Mozillians needed a space where they could discover events, groups, and learn about the community and its members. This space also needed to house impactful Mozilla initiatives such as Campaigns and Activities. In order to mobilize members towards impactful initiatives, the community needs to be constantly maintained and managed by Community Managers.

Mozillians were using a variety of different platforms in tandum, such as Activate, Splash, Discourse, Reps Portal, and others, to accomplish their goals.

Illustrations provided by Mozilla Community

Getting Started

We leveraged a variety of tools to manage the different channels of communication between the Playground team, the Mozilla team, and the Mozilla community. We used Slack for all communication, Mural for collaborating on design exercises, and the Google suite and Figma for sharing functional and design artifacts.


Strategy and Research

  1. Research existing platforms and breakdown client briefings

  2. Develop user personas

  3. Outline current user journeys and identify ideal states

  4. Generate persona based user stories

  5. Sort and identify epics

  6. Translate from epics into final product

Persona Developement

After completing our preliminary research, we were ready to start sprinting. The ‘Exploratory’ sprint consisted of three group exercises:

  1. Persona exercise

  2. Mapping exercise

  3. User Stories exercise

The initial sprint ran for 5 days. These design exercises were critical in transferring knowledge from the Mozilla team to the Playground team. Community Managers were extremely helpful in defining and transferring knowledge about the target audience. As a group, we were slowly uncovering and developing a shared knowledge of the problem space.



Persona 1: Katya [New Volunteer]

I'm always looking for new opportunities to gain new skills and meet new people


Persona 2: Rhea [Participant]

I have similar values to that of Mozilla's mission. I care deeply about privacy and security


Persona 3: Ajay [Organizer/Creator]

I've always wanted to start something, a group or meetup. I love organizing and managing


Persona 4: Kristy [Mozilla Staff/Community Manager]

I need to target and mobilize the right contributors towards impactful campaigns

Identifying Current User Journey

Mozillians were using a number of tools to accomplish their goals. Discourse for communication, Activate to host activities, Splash for event discovery, and the list went on. In order to shed some light on how we could create a cohesive experience, we needed a way to visualize each persona's relationship with the brand, across all the different touchpoints.

Communicating Key Goals
Mapping Future User Journeys

We then compiled a series of user actions for each persona into timelines. In order to create a narrative, we incorporated ‘thoughts’ and ‘emotions’ into each persona’s timeline. Each narrative was then revised and condensed, to form a more accurate representation of each perona’s optimal journey.

User Stories

From the rich fund of information gathered and created, we were able to move onto the next step in the process; user story generation. User stories were the most vital part of the process because they translated the users’ needs into a wealth of potential product functionalities. Community managers, project and product managers, developers, and designers were all encouraged to participate and write out as many user stories as they could.



Writing as much as possible

We encouraged everyone on the team to write as many user stories as they could; the goal was to be plentiful not critical



Sorting and expanding on

We then went through the user stories; removing redunances, cleaning errors, and looking for patterns. Related user stories were then clumped into higher patterns (Epics).

Each persona had its own set of user stories. We used Google Sheets to manage and sort the user stories. The document was then made available to the whole team.

From Epics to Wireframes

Each Epic, such as the ‘Create Event’ or 'Create Group' epic, was then translated into a set of wireframes. The wireframes were then shared with the team and Mozilla community for feedback. We used the feedback to move through each level of fidelity; from hand-drawn wireframes to Hi-fidelity screens.

Lo-Fi

Mid-Fi

Hi-Fi

Groups
People
Activity
404

Results

The Mozilla Community Portal was designed in a total of 8 weeks. Mozillians now have a space where they can gather and do great things for the internet.

Follow the repo here: Github Repo

Tools Used

Mural Google Suite Invision Figma Jira

Related Work

Don't hesitate to reach out. I'm just a line away ✌🏻