keybank: bicentennial
interactive microsite
project overview
ThePub was tasked to develop a content series for KeyBank’s bicentennial. Their expansive history was to be highlighted in three parts:
Museum installation at the Cleveland headquarters.
Bicentennial content series, to live on the microsite and beyond (1x Overarching video, 3x Focused videos).
Bicentennial Microsite housing KeyBank timeline.
ROLE: Research/Ideation, Wireframing, Interaction Design, Prototyping, Quality Assurance.
DURATION: September - December 2024 (Launch)
UX/UI Designer on the team, responsible for creating Website concepts and pitching to KeyBank. Working feedback into an actionable and interactive prototype, and providing QA during the development cycle.
Role & Duration
Problem Statement
The bicentennial experience (Microsite, Videos, Museum) should help KeyBank connect with three unique audiences:
Clients & Communities: with whom they do business with, to show their support for their interests and ambitions.
Employees: to show them their company shares their values and has a solid track record.
Investors: to show that KeyBank demonstrates a history of commitment and performance.
The product goals are aimed to tell the history of KeyBank and to reaffirm the brand's stability and impact.
The design should be consistent with the current key.com look and feel, by utilizing the core brand font/colours with an extra emphasis on the brand red that’s used as a visual anchor.
business & user goals
design process
Modern Historical Timeline
Each point in time is represented as a narrow glimpse into that moment which Users can click on to explore further.
Users can scroll through the cards horizontally and reveal more information as they hover/click. This keeps the layout clean and helps to minimize the amount of information on screen at once.
DESIGN
features
The final Design is a great culmination of design thinking; addressing a number of UX challenges throughout its creation:
-
Entries expand to fit your screen width and support various media formats (Audio, Video).
-
Dates with multiple entries use an alternate layout on Default, Hover and Clicked states.
There is an indicator of the number of entries underneath the Date, which can be accessed through a Carousel.
-
Nav Menu allows for quick access to Timeline and Video content. Jump Links (top left) can be used to quickly cycle through centuries.
-
The site loads to an instruction of how to scroll through the timeline.
-
Designs are optimized for each User device (Desktop, Mobile and Tablet breakpoints).
results
The Microsite Timeline includes major milestones (accompanied by audio, photo, and video) in a functional, interactive and responsive experience. It redirects traffic to keybank.com and tracks: site visitors, page views, time on site, video completion rates, total/unique views for both site and videos.
The Microsite does a great job at the fundamental mission of this project:
“To tell the story and history of KeyBank, and reaffirm the brand's stability and impact over the last 200 years.”