Mosaic 2018 Annual Report

Mosaic Christian Church turns 10. To honor their 10th anniversary, they came to me to design and build a special mini-site for their annual report for 2018. Up to now, all their previous annual reports had been printed. Designing the report in digital allowed us to create a much more engaging, interactive, and accessible experience.

See the full site at:
mosaicchristian2018.com

Client
  • Mosaic Christian Church
Year

2019

Role
  • Design
  • Development
  • Art Direction
Website

Process

Concept

Mosaic supplied detailed statistics gathered over the course of 2018. The overall goal was to highlight these stats in a fun, engaging, and interactive way. Stylistically, the only design direction was to generate something in the same spirit as the motion design work I had recently created for Mosaic’s preservice slides. 

Design

70% of Mosaic’s website hits come from iOS devices. It made sense to take a mobile-first approach to the website design. I put together a palette of typography styles, accent elements, image styles, colors, and graph designs. This poor man’s atomic design system lets the design feel consistent while scrolling through the hefty volume of content. I use shifting accent colors and the diversity of the content itself to help keep things fresh from section to section. 

After designing the site in Sketch, we used InVision to collaborate and adjust the design.

Build

I leveraged Webflow to accelerate the building process and filled the gaps between our goals and Webflow’s capabilities with Javascript. After testing it on a variety of platforms, we launched the site alongside Mosaic’s 10th-anniversary celebration at the end of March 2019.