Celebrating 75 Years
Documenting Mutual of America’s history through an interactive annual report.

WEB DESIGN
MUTUAL OF AMERICA

Role:

Freelance to Decker Design Inc.
UX/UI Designer

Team:
Jason Mangelson (Developer)
Susanne Adrian (Lead Designer)
Lynda Decker (Creative Director)
Ben Jones (UX/UI)
Duration:
February-March 2020
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.
mutual-of-america-logo
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.
front
johns-pizza
map
timeline
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.
interactive-map-print
interactive-map-sketch
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.
user-flow.print_
user-flow
UX/UI
Wireframes
wireframe1-data.1
wireframe1-timeline
wireframe1-story
wireframe1-bod
wireframe2-data
wireframe2-map
wireframe2-story
UI
COLORS
The color pallet and typography were already defined by Mutual of Americas’s brand guidelines.
moa.color_
moa.type_
Final UI Design
Outcomes
My role ended with handing off the design files to the developer. We had been in regular contact about what design route to take and how the javascript functionality and responsive design would work. I led the presentation of the high fidelity concept to the client at their offices, which was in turn signed-off. As of May 2020, the microsite was published with minimal changes.
Presenting to clients
It’s important to remember that presenting a working website to a group of 15+ people will throw up questions and remarks that are perceived as irrelevant and are frustrating. Let this flow and try to accommodate as much as possible.  
The fanciest UI isn’t always the best UX
While researching different functionality designs for the map range slider, the simplest turned out to have the best UX results. Example: Craigslist.com has terrible UI, but impeccable UX.
Next Project
Orca Analytics