Truist Long Game
WEBSITE
RESPONSIVE
Long Game was a gamified personal finance app that was acquired by Truist Bank, the sixth largest bank in the United States. To prepare for the launch of the rebranded and updated Truist Long Game app, I designed a new product page to be featured on Truist.com.
Problem
Although Long Game had an existing product page, it needed to be redesigned with new content, color, style, and design to align with Truist branding while still being authentic to Long Game design.
Solution
Design a new website that aligns with Truist brand standards while remaining authentic to original Long Game design.
Key takeaway
This small project was a reminder of the constraints of working in a highly regulated industry. Our Legal, Risk, and Compliance partners had lots of input and it helped highlight the need to be adaptable as content and requirements changed.
I met with our team's design director, Truist marketing, and a Truist.com lead designer. We had a high level discussion about how much of the original Long Game product page could be carried over into the new design, access to Truist.com patterns and components, and what the process would look like.
I began by familiarizing myself with the original Long Game page, and looked at Truist.com pages for both major similarities and differences. I also explored Truist design system, searching for components or assets that could potentially be used in the new design.
I reviewed all information and set 3 goals for myself to work towards a smooth design process.
1
Using the original Truist Long Game website as a base, update the design to adhere to Truist design standards and patterns.
2
Ensure that all content and copy has been checked and approved by Legal, Risk, and Compliance.
3
Ensure stakeholders are updated throughout the process and that handoff to engineering is smooth.
Using the original site as a guide, I began creating the new page, adapting it in Truist's design style.
The first thing I did was update the font, and then began experimenting with updating the color scheme to match Truist. I focused on the hero section first, and created multiple versions with different phone mock and background designs.
A lot of the original content needed to be rewritten and prepared for approval from Legal, Risk, and Compliance. I worked with our content editor to identify and organize all copy on the page so that she could begin rewriting it.
I also created new, updated versions of assets. Some only needed color changes while others were recreated completely.
I met with a lead designer of Truist.com for feedback. She made suggestions around how to tweak the design to ensure that it matched both brand standards and current patterns found on the Truist website. One example is the use of eyebrow text above headers, as seen below.
I worked closely with our game designer to choose screenshots to best showcase different features the app, matching the features to the main value propositions. I also continued to collaborate with our content editor, as Legal, Risk, and Compliance had many edits.
Once our team was happy with the desktop design, I created a mobile version as well. This design also underwent multiple revisions, although the process was much quicker since all content had already been finalized on the desktop version.
I met with engineering to review the handoff process. Handoff was potentially complicated because this was during an organization wide transition from Sketch to Figma, which he had never used before. We discussed having an open line of communication, and requirements around breakpoints, assets, and links.
Over the course of development, we kept in regular communication as I helped him navigate Figma and answered minor design questions. I reviewed his work throughout to ensure it matched my design.
Potential key metrics would include:
Number of app downloads from QR code and app store buttons students who successfully apply to a four year college
Number of Legal, Risk, and Compliance issues
Bringing value
The Truist Long Game product page helped inform and educate potential users by providing information about the app, its features, and its benefits, in a fast, highly digestible format. It helped build trust by listing well-known financial websites that featured Truist Long Game, and drove downloads and engagement through both QR codes and app store links.
Supporting engineering
Because the organization as a whole was new to Figma, it was a great opportunity for me to directly collaborate with engineering and learn exactly what he needed from the file, specifically around breakpoints, assets, and links.
Working in a highly regulated industry
This small project was a reminder of the constraints of working in a highly regulated industry. Our Legal, Risk, and Compliance partners had lots of input and it helped highlight the need to be adaptable as content and requirements changed.
