.gif)
Northern Trust's HR department was on a multi-year journey to replace their HR portal, MyPlace, as well as the back-end databases and case management systems. With the overhaul came an opportunity to change how staff (known as "partners") perceive HR and to seamlessly blend HR into their Northern Trust experience.
I lead the visual and UX design for the project while contributing as an active team member, working directly with the Northern Trust Innovation Lab and serving as a liaison and design resource from Corporate Marketing. I familiarized team members with and leveraged digital tools and workflows such as Invision and Usability Hub to improve comprehension and clarity of the screens being produced, as well as to help validate UX design decisions.
The project was split into four phases: 1. Understand & Prep, 2. Research, 3. Synthesis, then 4. Design Refinement & Document. Within the first phase, we planned to learn about the back-end platform capabilities, identify 5-6 specific use-cases that would represent key workflows, and conduct secondary research on "best-in-class" HR services and portals.
As the project kicked off, the vendor had not yet been on-boarded, so we had to learn all that we could about the new platform with whatever resources were available. We explored other industry examples provided by the HR team for inspiration, which lead to some early research probes and an array of early concepts.
We discovered common behavior patterns of the users on the site from both interviews and analytics. We also spoke with key stakeholders from HR to get a better understanding of the "behind-the-scenes" processes happening on the site, which helped spur new concepts to take into our in-depth interviews.
Initial sketches of the website homepage started taking shape after these in-depth stakeholder interviews, using two distinct approaches: Focus on Search vs. Focus on "Quick-Links."
We took multiple approaches to capturing both qualitative and quantitative input, overall capturing feedback from 91 partners (including several managers) through: conducting an online survey to gauge the most frequent tasks on the site, intercepting staff in the cafeteria for feedback on the current information architecture, and in-depth partner interviews where we created and reviewed low-fidelity homepage wireframe designs and low-fidelity concepts for various components and functionality.
Based on the research, we created low-fidelity designs around different concepts to provoke feedback during our interviews, for both partners and managers. We created ideas for visualizing pay, navigating benefits as "cards," and pitched a concept around "Life Event Guides" that reflected common scenarios, which resonated particularly well with the audience.
All users appreciated the concept of "Life Event Guides," which included detailed information on common yet complex processes. Managers particularly appreciated the "How Do I..." approach to tasks, particularly ones new to the role.
While users loved the idea of seeing a clear breakdown of their pay, unfortunately this concept was not technically feasible.
We created three unique variations of the homepage based on different configurations from our earlier inspiration. One version was a focused search hero, another included "Featured" or highlighted content, and another example included "cards" with key links to the most common activities.
Users appreciated all three versions, but enjoyed the highlighted "tiles" that focused on their most core tasks.
The three homepage variations all included a strong emphasis on search, but explored other ways to highlight key information. The approach that included the most direct-access links was most preferred by the audience.
Based on the feedback from the interviews and intercept surveys, we began eliminating options that did not test well and honed in on the more popular concepts to explore the designs more in-depth and validate their ability to be built within the vendor platform.
Users appreciated high-level overviews of complex processes, written in human terms. Users found other concepts such as personalized "featured content" interesting, but less valuable than being able to navigate quickly.
Following the conclusion of our research phase, we then synthesized the input and research and formed design principles around three specific modes of user behavior:
To best align the experience design with the goals and needs of the different site audiences, we created six design principles:
We learned from the research that users wanted to see a high-level overview of the steps they needed to take for a process, written in a way they could easily understand. Research showed that users would rarely take the time to browse content to learn themselves, and instead would want to find information about specific situations when they occur.
To help provide a new visual identity for the re-launch of the platform, a new logo was developed by the internal graphics team, which leveraged specific shades of aqua, deep blue, and light and dark shades of green, taken from the broader corporate color palette.
I started to explore a homepage design based on a heavy emphasis on direct search, as well as exploring the use of iconography taken from the corporate branding line-art icon family, "Futuro."
The early homepage concepts began aligning with the platform, with sections like "To-Do's" and "Opportunities" being included to help align with user needs and behaviors.
In the interior pages, I began exploring a motif of embedding nature imagery within the hero sections, to help "soften" the site, using shades of gradients of green and blue to put the user at ease while browsing.
I explored leveraging "cards" to provide large, descriptive links to help users navigate, with a "jumbo" call-to-action in the hero section for the most prominent and important link for each landing page, as well as establishing a visual hierarchy to improve the ability to scan the page.
As we began to explore the different page templates required, we refined the designs to reflect the needs and limitations of the platform: the hero section had to be simplified to just text and a call-to-action, without the use of background imagery. The card styling was simplified as well.
The colors and typography in the page headers evolved to better emulate the new logo and sub-brand color palette.
While the designs evolved, we partnered with external writers to begin drafting new content that reflected a more "human" tone, striking a balance between delivering corporate policy, and providing empathy and specific guidance.
Our team researchers conducted additional user testing to establish a baseline for the usability of the current navigation. Overwhelmingly, we determined that users liked the current top-level categories, and that these best aligned with their needs.
The homepage visual design became more refined, as we explored different approaches to incorporating a large, freeform search field in addition to multiple groups of links to common pages and sections.
To validate the different approaches to the homepage design, we conducted further user research using remote testing tools to conduct click-tests around how users would interact and navigate on the homepage between the navigation, search input, and icon row below the hero.
We used a remote-testing tool to perform a "click-test" (effectively, a reverse card-sorting exercise) to gauge whether users preferred to use the top navigation, links below the hero, or the search input box.
We created another variation of the homepage for testing that used a split hero section, with a search input on the left and four large "tiles" on the right, linking to popular/common links. This approach de-emphasized free-form search, and instead surfaced another level of primary "short-cut" links within the hero section.
As we tested, we discovered users would all navigate in different ways: some would rely on the top navigation, some would rely on the large tiles, and others would prefer to initiate a search first.
Once research had concluded, we presented the design to key stakeholders and upper management. They appreciated the research, but we were quickly stopped as we began to share-out the visual design.
In our efforts to validate the homepage, we had skipped an important step: get feedback from key stakeholders on design, early in the project. Our key stakeholder had specific feedback on the approach to the hero sections and the side-wide typography. The design concepts we shared relied too heavily on abstract imagery, which was missing the "human" connection — a critical necessity for a HR portal.
I quickly began to explore more options, mining both stock photography resources as well as a library of images from a global photo shoot that had been taken in support of the northerntrust.com redesign. We were able to reach consensus working directly with executive staff on a photo of an authentic Northern Trust employee in the hero space. We made adjustments to the homepage design to better fit within the platform limitations to avoid additional customization.
.png)
The concept of "Life Events" was loved by users of the site, but content authors expressed concern over the effort to gather the information for a global audience, which included many variables (i.e., maternity leave in Japan vs. U.S.A.).
Our project team continued to fight on behalf of the users for this section and content to upper management. We were able to convince them to commit to the section and we settled on a few specific articles that covered the most common Life Events. Within each article we provided an overview of the entire process, any steps required, and multiple points of contact ("life-lines") for users who required additional assistance.
Interior pages provided quick access to the most common links for each section, followed by secondary links in a list below. We worked closely with the vendor to ensure all styling and formatting for content was within the constraints of the platform.
%20BEST.jpg)
This was a great project to work on, and I feel extremely lucky to have gotten to work with an amazingly talented project team. Along the way we had some missteps and successes, but ultimately we were able to deliver a fantastic product.
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.
