Transamerica Data Visualization
The Project
At the end of 2019, my team’s channel and brand partners expressed a need to display visual content on Transamerica.com to engage users and have the ability to showcase important data. Our creative partners had originally found a potential 3rd party system to display this data, however, after further investigation, my team found that the software was not accessible, easily used on Tridion (our CMS), or secure enough for the site. Therefore, we needed to build a custom component in-house that could meet their storytelling needs.
The marketing challenge for this project was engaging users with clear and concise information. Our current website component repository didn’t include anything that had the ability to display visual data across device types that also met accessibility standards. We were also restricted when it came to telling our brand stories on the web since we were limited to simply using text or images. As a consequence, we felt that the website ended up overwhelming our users with a lot of text and no way to break this up with engaging data points.
Since I had experience with the Cardinal Design System, I volunteered to put that process to use for this project and lead the charge from start to finish.
Project Skills
UX/UI Design
Collaboration
UX Research
Component Design
Responsive Design
Technical Writing
Information Architecture
Design Thinking
Accessibility
Project Tools
Sketch
Abstract
InVision
Sketch Libraries
Stark Accessiblity Plugin
WebAIM Contrast Checker
Objectives & KPIs
Our main objectives for this project included:
- Improve user experience, retention, accessibility and SEO by creating a component that displays dynamic content rather than the use of a static PDF. This object would be met with the following KPI’s: Session length, SEO rankings and reduced number of PDFs on the site.
- Adapt visualizations for different device sizes, while anticipating user needs on data depth, complexity, and modality. The associated KPI for this would be to pass engineering QA tests on all browsers and devices
- Provide a component that will allow channel and brand to visually tell their story in an accurate, clear, and engaging way. If we are successful in the other KPIs, this objective would be met.
Along with these main objectives, we also needed to make sure we considered the ability to compare, charts and graphs, large statistical callouts with percentage and dollar signs, and the use of icons.
Design Audit & Research
Education is a valuable aspect of Transamerica’s campaign messaging. This can be seen throughout various print material where the use of data visualization is prevalent. I took this as a starting point, using Miro board to document all use cases of data vis I could find throughout PDFs on the site.
After this initial research and audit, I found that there were two important types of data vis that would be very different to design and build out in the CMS. The first one was stat callouts, these were instances where large stats were displayed in a more visual way with supporting text. I knew we already had components that were built similarly and this would be an easy win for our development team since the data would be static. The second was charts and graphs where data would be more dynamic and interactive. This component would be much more of a heavy lift for not only our engineering team, but also for design. Therefore, we collectively decided to split up the work into two different components, focusing first on the stat callout.
The work represented in this case study will reflect only this portion of the project as our team roadmap has charts and graphs planned for the end of 2020/early 2021.
Discovery & Exploration
During the discovery phase, I recognized 3 different versions of Stat Callouts that we could utilize across Transamerica.com. These included:
- Full Width – a component that has a large number as a visual aid for supporting text that can live on its own without relying on the content around it.
- In-content – similar to full width, but instead this component heavily relies on the surrounding content for context and is more visual in design with less text.
- Sidebar – we had been exploring the use of a sidebar on public pages like blogs, so I wanted to include the option for badges with stat callouts that could be included on those types of pages in the future.
Exploring all the different types of design iterations was the next step. I wanted to account for not only all the use cases that our stakeholders had requested, but I also wanted to cover anything that I thought we may need to supplement these requests so that our development team had everything they needed to build out this component the first time around.
Thorough Documentation
It was important that this component was extremely flexible, readily able to adapt to new, different, or changing requirements from our stakeholders. Defining multiple styles for this component would allow designers to mix and match sizes and styles within a page design, creating several combinations that were consistent. Furthermore, this level of variety would help channel and brand visually tell the Transamerica brand story.
Documentation was required in order to ensure this level of complexity remained consistent, accessible, and readily able to hand-off to devs with ease. I broke down each type of the component by the following:
- Anatomy – Identifying the structure of the component
- Grid – Showing how the component works with the responsive Cardinal grid
- Spacing – Illustrating where to use Cardinal spacers vs. padding
- Text Styles – Identifying the font style, weight, size, line height, and responsiveness as it relates to Cardinal Typography
- Color – Showcasing all the different use cases available for color options
