UX, Visual Design

Family Online Safety Institute

A website redesign for fosi.org that combines industry news, resources, and events with a new platform, Good Digital Parenting.

Visit the Site

The Family Online Safety Institute (FOSI) came to ISL to redesign and rebuild their website. Our mission was twofold — to combine fosi.org and aplaftormforgood.org (now Good Digital Parenting) under one umbrella, and to create a beautiful design and a user friendly experience

The redesign process involved diving deep into Google Analytics, conducting user testing with key audiences, and unifying the two sites through detailed wireframing and design.

Working closely with our client, we successfully created a digital hub for online safety news, research, and events. With a focus on information architecture and design, the project aimed to reorganize content and present it in a digestible, mobile-friendly format.

Understanding the Audience

The new fosi.org was a challenge due to its wide range of intended audiences. In addition to online safety information for families, the site needed to cater professionals seeking out industry conferences and events to policy makers who utilize FOSI’s many research articles in everyday work.

Personas

In order to better understand each type of user, we created a variety personas to serve as references throughout the design process. By working closely with the FOSI team, we could ensure that the personas accurately reflected the intended audiences. We used these personas as a reference for any debates or decisions throughout the process.

User Flows

Fictional personas allowed us to create user flows that aided in the identification of discrete goals and actions for each type of user.

Site Structure

After analyzing user flows and also interviewing stakeholders, we reorganized content into three main buckets:

  1. Family Resources (a.k.a. “Good Digital Parenting”)
  2. Policy and Research
  3. Events

The reorganization and consolidation of the site’s content makes it easier than ever for each audience to discover what they need.

FOSI.org Sitemap pt. 1
FOSI.org Sitemap pt. 2

Prototyping

Some of the functionality we wanted to include in the site, such as a sticky navigation and fixed filters, are often difficult to describe to clients using static wireframes.

To better communicate the small details that would improve the new FOSI experience, our team created a set of animated wireframes in addition to our standard wireframe set.

FOSI.org Wireframes

Visual Design

Typography

In order to be inviting to parents, yet authoritative and reliable to professionals, I chose typefaces that mixed organic sans-serif headings with more traditional serifed text.

Aaux Next

Aaux Next is an approachabe sans-serif that was chosen for headings due to its mix of solid structure and rounded, more quirky, characteristics.

Minion Pro

Minion Pro exhibits functional qualities that makes text highly readable. I chose it to give formality and legibility to the site’s main content.

Colors

With content being broken up into several main sections, I defined colors that would be related to each type of content (green for Good Digital Parenting, red for Policy & Research, etc). By tying specific colors to content, we were able to visually separate internal platforms each internal platform and give the user clear context to their location on the site.

A Flexible, Responsive Publishing Platform

At its core, the new FOSI.org is a multi-faceted publishing platform. From online-safety print outs to the latest research on internet privacy, FOSI works to publish educational content that helps families (and the industry at large) learn and grow in the new digital age.

By creating flexible layouts, a new design system, and an integration with Wagtail, a Django-based CMS, we were able to provide FOSI with a rethought and redesigned responsive experience.

FOSI.org Homepage
FOSI.org Good Digital Parenting Page screenshot (tablet)
FOSI.org Events Page screenshot (mobile)

Visit FOSI.org