Mott Foundation

Web redesign for a global foundation.

ROLE

Art Direction, Design

MOTT-Mockup-AllDevices@1xMOTT-Mockup-AllDevices@1x

Local change on a global scale.

The Mott Foundation funds grantees across the globe that are working to improve education, political freedoms, the environment, and local issues in Flint, Michigan.  They give long-term funding to people who are on the ground, making big strides at local levels.

Mott came to us for a complete overhaul of their site that would reflect their vision and international impact. Our goals were to create a compelling look and feel, approachable content, clean UX, and a modern back end that would put users front-and-center and be easy for the client to maintain.

Set the Stage

After the discovery phase, moodboards are the best way to explore a new look and feel.  A curated collection of typography, photography, colors, graphics, and headlines help the design team and the client focus on the brand and vision for the site, without getting stuck in the functional details.

MOTT-Moodboards-ConnectMOTT-Moodboards-Connect
MOTT-Moodboards-InfluenceMOTT-Moodboards-Influence

Process

Plan, design, develop, present, repeat. With moodboards and wireframes in place, we could design and develop in parallel, working from the inside-out. We started with the work-horse detail pages, solidifying general styles, interactions, and functionality that later became the backbone of the robust landing pages. When we got to the home page, we knew exactly what we were working with.

MOTT-ProcessMOTT-Process
MOTT-Process PhotosMOTT-Process Photos

Page Design

We identified unique layouts and modules and used these pieces to build each page. This makes each page is flexible and based on content needs.

MOTT-WebpageMOTT-Webpage

Design for All (screens)

The majority of Mott's users come from a desktop sreen, but all pieces of the site were designed with a responsive layout and functionality in mind. After a quick sketch of how a layout could redistribute on a smaller screen, I worked with the developer to tweak content and styling.

MOTT-iPhonesMOTT-iPhones

Grants Database

The centerpiece of the Mott website is a comprehensive, searchable, filter-enhanced database of all Foundation grants. It delivers quick and easy access to grant information, related news articles, and publications.

MOTT-Mott-iPadMOTT-Mott-iPad

UI Elements

From the highly stylized navigation to checkboxes and radio buttons, every piece of the design was customized to fit Mott's new visual language.

MOTT-UI ElementsMOTT-UI Elements
MOTT-QuoteMOTT-Quote

CREDITS

Vermilion, agency
Paul Knipe, account direction
Scott Kirkwood, creative direction, content strategy, copywriting
Paul Richard, ux design
Alan Dauge-Green, development
Ian Zhang, development