First Horizon Redesign
redesigning the bucket life and economic digest email & website pages
OVERVIEW
This project consisted in refreshing First Horizon Bank's digital presence for their "Bucket Life" and "Economic Digest" initiatives. The goal was to enhance user experience and engagement by redesigning email templates and landing pages, ensuring mobile and desktop optimization.
Client: First Horizon Bank
Timeframe: Summer - Fall 2023
MY ROLE – LEAD UX/UI DESIGNER
I took on this project as the sole designer, which was initially daunting, but I quickly embraced the challenge and took ownership of the design process. After analyzing First Horizon's existing offerings, the project scope, and identifying areas for improvement, I familiarized myself with their brand guidelines and conducted a competitive analysis. This research informed the creation of desktop and mobile wireframes, which were refined through collaborative feedback sessions with the team.
Once we aligned on the design direction, I proceeded with UI design, ensuring a cohesive visual language across all deliverables, including client presentations, best practices documentation, and measurement framework. This experience provided valuable hands-on learning, allowing me to hone my design skills while developing a strong sense of ownership and autonomy.
SKILLS & TOOLS
Getting Started
-
Take a look at current offerings and make note of shortcomings and what is being done successfully
-
Study brand guidelines and other First Horizon content to better understand the brand as a whole
-
Research how other financial institutions are handling similar offerings, what their website and emails look like.
-
Modernize and templatize First Horizon's Economic Digest and Bucket Life emails.
-
Create landing page for Economic Digest and refresh Bucket Life's current site.
-
Provide an email best practice guide.
Key Tasks
Competitive Analysis
To see how other institutions presented their content, I went into their respective websites and found the "equivalent" of the Bucket Life initiative (a place where people can make a savings plan, achieve their financial goals). Analyzed them and took notes of the elements that worked.
Catching Mini-Game
This or That
Emoji Personality Quiz
Catching Mini-Game
This or That
Emoji Personality Quiz
Catching Mini-Game
This or That
Emoji Personality Quiz
Catching Mini-Game
This or That
Emoji Personality Quiz
Wells Fargo
- Intro with big image, title and brief description
- 3-6 specific options for users
- Featured Articles
Chase Bank
- Uses tabs for navigation
- "Contact us" at bottom
- Featured articles with reading times
Bank of America
- Specific site for only for financial education
- Quiz to learn user's needs
- Use of icons, images and buttons
Capital One
- Big, eye catching image at the top
- Tabs for navigation
- Users tailor their search and get specific content
(Left to Right)
Paypal
- CTA button above fold
- Bullet points with icons and redirect links
- Prominent brand colors
Venmo
- Lifestyle photo at the top
- Bullet points
- Wrap up CTA with backhground treatment
Bank of America
- CTA button above fold
- Bullet points
- Website redirect for video and more info
Current Situation
Analyzing the current offerings was imperative to pinpointing what could be improved and how the visuals could be refreshed. As well as understanding what is existing and what we needed to create from scratch.
Bucket Life Email
Purpose
Provide clients who subscribed with tips to achieve their financial goals
Observations
-
Visually heavy, no clear hierarchy or CTAs.
-
Outdated look and feel
-
Not optimized for mobile
Bucket Life Landing Page
Purpose
Incentivize clients to sign up for Bucket Life program
Observations
-
Image and text above fold don't spark curiosity
-
Form takes up a lot of space
-
No clear path as you scroll down the page
Economic Digest
Purpose
Share economic insights from FH Analysts
Observations
-
Color palette feels restricted and outdated
-
Opportunity to offer preview that's easily scannable
-
Need to highlight featured analyst more
Changes made in first client round
Bucket Life Landing Page
-
Place form above fold
-
Choose a more eye-catching, edge to edge image for the hero
-
Provide information about the offerings
-
Establish clear visual hierarchy
-
Add testimonials
Bucket Life Emails
-
Make better use of brand colors
-
Establishing stronger visual hierarchy
-
Increase contrast for title within image
-
Clear CTAs throughout email
-
Usage of relevant imagery
-
Incorporating bullet points
Economic Digest Email
-
Make use of brand colors
-
Provide preview of Econ Digest and add CTA to read more
-
Include past articles for reading
-
Showcase events and the featured analyst
Economic Digest Landing Page
-
Place form above fold
-
Choose a more eye-catching, edge to edge image for the hero
-
Provide information about the offerings
-
Establish clear visual hierarchy
-
Include photos/quotes by the featured analyst
Templates and Components
One of the main deliverables requested from the client was templates, allowing for easier customizations and variations on their emails and sites. We created base templates for different needs, and provided them with a component library.
Bucket Life
Landing Page
Email v1
Email v2
Economic Digest
Landing Page
Regular Email
Welcome Email
Final Look
Bucket Life Email & Landing Page
Economic Digest Email & Landing Page
Learnings & Reflections
Taking on bigger responsibilities by myself
At this point in time I was still an intern, yet I took on this project as the sole designer. I was scared at first, but quickly found myself having to be confident, my team trusted in my capabilities and I had to deliver.
Dipping my toes into E-mail Design
This was my first time delving into email design, there were a lot of things I had to learn, since it's different from what I had worked on in the past. This ended up being another skill I could add to my toolkit and ended up making me a valuable asset for future projects since I had this experience.
Speaking directly with the client
I got exposure to the client first-hand, something I hadn't before during my time as an intern. It was nerve-wracking at first having to present my work to them, but found that being confident and open to feedback is the key. Moving forward, I have become much more comfortable when it comes to this.