The welcom screen for Mozilla Social's account creation mocked up
Mozilla Social

Onboarding initiatives and design system

Background

Mozilla Social was an experimental project from Mozilla that explored the decentralized social media space. During my time on the project, I was the interim lead designer on the user onboarding and account initiatives. When the full-time lead returned, my contract was extended to assist with design system maintenance, and I proposed and worked with the lead web developer to unify the web experience with the native mobile experiences.

Invite codes experience

One effort I was the design lead for was the invite-a-friend feature. As a closed alpha, we wanted to allow existing users to invite people as a way to grow the network gradually and encourage a sense of community. I worked with front and back-end developers and project managers to map how users could connect and find their friends more easily.

After receiving the PRD, I began diagramming the flow of information that needed to happen between the existing user, the invited user, and the backend system from Firefox authentication. In the Figma embed below, I've included my early diagrams of possible solutions that the PM and I walked front and backend developers through.

Page 1: Initial flow map with current, least ideal (but most easy to implement), and the ideal flow for the invited user.
Page 2: The low-fidelity wireframes of the most ideal and most technically feasible user flows. Feasibility was highlighted to facilitate discussion on feature scope.
Page 3: The agreed upon flow after discussion with the front and back-end development teams.
Page 4-6: Wireframes showing various use cases to account for in relation to the existing user's experience with invite codes.

A screen labelled 'Invite a friend' which shows invite codes for the closed beta, and shows how codes will display when it's just been copied vs how those copied codes will sort on refresh
A second view of the 'Invite a friend' screen labelled 'Check back soon' since all of the private beta invite codes are shown as having been redeemed

Trust and safety dashboard

Following new regulations regarding appeals, I worked with our Trust and Safety project manager and engineer to develop the front-end interface. The aim was to create an in-application dashboard with information on open violations and reports. Decisions could then be appealed by the reporter or the person who was reported and allowed them to provide additional context such as in-app posts or links to off-site public activity.

A mobile page labelled 'Trust and Safety' which shows account status for someone who's account has been limited
Mobile page for a post violation screen showing an input for the user to submit a repeal
Post violation screen showing that the appeal by the user has been denied and the history of the decision.

Design system

As a member of the team, I contributed to the design system regularly, and I also worked with our senior web developer to refine semantic token names for development. I also did multiple accessibility reviews of minor patterns like text inputs and buttons to ensure the designs met or exceeded accessibility standards.

Figma's variable panel which shows the Semantic colors library featuring dark and light mode
The Figma Variables panel showing semantic tokens for different component padding and radius values.