Celebrating 75 Years
Documenting Mutual of America’s history through an interactive annual report.
WEB DESIGN
MUTUAL OF AMERICA
MUTUAL OF AMERICA
Overview
Leading the way in financial investment and retirement services, Mutual of America wanted to celebrate its 75th anniversary with a dynamic interactive annual report to showcase its history and growth.
Employed in a freelance role, I was responsible for designing the 2019 annual report microsite that would not only sit with the printed version but would also provide an interactive experience.
Discipline
UX/UI & Interactive Designer
User Interaction, User Experience, Information Architecture, Visual Design, Interactive Design, HTML, CSS, & JS
Background
Mutual of America’s annual report has been traditional up to 2015. From 2016 the annual report was created as a microsite with the print version. Their 75th anniversary was the perfect opportunity to create an interactive experience for their audience showing the organization’s history and success.

Identification
Previous Years
Part of the process of analysis is to look at the past year’s microsite annual report designs. As you can see these lack user interaction and represent straight conversions from the print version.
THE PRINT VERSION AND IDENTIFYING SPECIFIC INTERACTIVE ELEMENTS
Upon starting this project, the print version was already 2/3rds of the way through its design process. This made identifying which elements required interactive design treatment clear. The main element would be the map, but also consideration was required with other elements as the product would be built in WordPress.




UX
INTERACTIVE MAP
The map shows the growth of Mutual of America’s branches from 1945 to 2020. Research and consideration into what would be the best way to convert a static image to an interactive element was required, and how to translate the data.


UX
User Flow
Defining how the user would experience and move through the microsite in accordance with the print version was important. There were certain sections the client wished to have added and also we took the decision combine certain sections to promote flow.


UX/UI
Wireframes







UI
COLORS
The color pallet and typography were already defined by Mutual of Americas’s brand guidelines.

