.gif)
Northern Trust needed to to reimagine it's primary website to be more focused on lead-generation and to provide a more refined, sophisticated and contemporary experience through a responsive web redesign. Collaborating with an external design agency, a new vision for the look and feel was developed.
Once the design direction was approved, I joined the design team embedded within the agency during the design sprints, serving as UI/UX/Branding Lead, directly contributing to the team by creating new UI components and UX patterns for the site.
I created wireframes for specific internal pages to help provide the content teams and internal clients understand the new direction.
Based on the wireframes, I created visual designs for the the "Business Unit Landing Page" template, the most versatile but complex template available for the site.
In addition to the visual design, I also concepted a few key areas of animation and micro-interaction, including a "collapsable" header navigation, and an animated slide-in panel for the client login.
The header for the site included "utility links" above the main navigation which would make a "sticky" header too large, but we wanted to explore the idea. I designed a concept using a narrower version of the header bar that would fade in or out based on a user's intent.
One of the biggest challenges in the new visual language was ensuring proper ADA "AA" level color contrast with the headline text overlaid on imagery, in particular on hero images and the homepage marquee.
Normally, color contrast ratios can be easily determined using Hex values, but given the dynamic use of imagery and headline overlays in hero images, these methods weren't possible. I was eventually able to source a contrast testing tool and gauge appropriate contrast, then adjusted the hero designs to include a gradient layer above the image but below the text to ensure contrast at all times.
Working alongside the agency designers through all the design sprints, I designed and concepted several critical UI components of the site, including search, modals, forms, and alerts.
Ultimately, the back-end capabilities of the CMS drove much of the search functionality and required a more simplified approach for launch, which eliminated the ability to include categories of results or suggested/trending links.
Forms are one of the most complex interactive components on a website and require extensive consideration around validation styling, in particular. I designed flexible forms that aligned with the capabilities of the CMS and CRM integration with a refined front-end to improve lead-gen throughout the site.
I also created the styling for modals, while solving specific challenges around legally-required alerts on various product pages. Modals designs were modeled after the client login, for consistency. To address long-form legal disclaimers, I utilized an embedded scroll to allow for maximum flexibility, and avoid a modal window that required a user to scroll within their browser.
Another unique component I designed was the "Safety Net," a full-width, imagery-heavy component providing related links at the bottom of higher-level pages to help guide users into alternate user flows.
The new site launched in early 2019 and was an overall success, seeing an overall rise of 24% organic traffic within the first two months of launch, and a consistent up-tick since in overall traffic and engagement. New and improved site components have been continuously added, and continue to grow and improve the user experience.
I'm an accomplished, multi-faceted creative director and senior designer with in-depth and extensive experience in design ideating, concepting, UI/UX, and digital design.
