>
            </div>
        </div>

        <div class= Facebook Safety Center

Client

Facebook Safety Center Team

facebook.com

Responsibilities

mobile ui design, animation

Tools

sketch, after effects, invision


Problem

The Facebook Safety Center was going through a redesign of all its content, and needed the page designs to match.

Project Goal

Provide an engaging experience of the Facebook Safety Center that included all the extensive information provided by the Facebook Safety team.

Solution

This project was split between myself and another designer on my team. Since I have a bit of experience with animation, I was tasked to work on the design for the mobile pages as well as simple animations in the headers and footers, while she was in charge of the desktop and tablet designs.

Process

We started with a kickoff meeting with the project stakeholders, talking through all the different aspects of content needed in each of the pages. As this project was very content heavy, the solution had to make it easy for readers to search through and find the information they were looking for. Facebook provided us with illustrations to integrate throughout the layout which helped breakup our designs and avoid pages from appearing too content-heavy. After the the main parts of the mobile designs were completed, I started working simultaneously on the header and footer animations. Since these were to be subtle motions meant to provide a fun and playful tone in otherwise serious content, I focused on creating slight movements that looped. The end result for this project were Zeplin files passed over to our in-house developer for the pages, and gifs for the headers and footers.


// Animation for page headers
// Animation for page headers
// Whiteboarding user flow (1 of 2)
// Whiteboarding user flow (1 of 2)
// Whiteboarding user flow (2 of 2)
// Whiteboarding user flow (2 of 2)
// The home page and a content page for mobile
// The home page and a content page for mobile