Mutual of America – Ben Jones

Celebrating 75 Years

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

WEB DESIGN
MUTUAL OF AMERICA

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:

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.

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.

2019 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.

2019 PRINT VERSION

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.

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

BACK TO HOMEPAGE