RHR International
At RHR International, I led three impactful projects: Founders Journey, which helps entrepreneurs navigate growth challenges while retaining their unique leadership strengths; Succession Planning, focused on building a talent pipeline for seamless leadership transitions; and a full redesign of RHR’s public-facing website to enhance user experience, communicate RHR’s value, and drive engagement. The case study below focuses on the redesign of their website.
Overview:
In addition to my other design projects for RHR, I was assigned to enhance their customer-facing website, rhrinternational.com.
Duration:
8 Weeks
My Role:
Site audit
Pattern exploration
Usability test design
Testing analysis
Prototyping / Visual design
Final documentation
Quality Assurance Testing
Tools:
Sketch, Zeplin, Baymard
Team:
Aaron Yasko, UX/UI Designer
Mike Biersma, Team Lead
Stephanie Breen, UX/UI Designer
Michael Kusecek, Developer
The Problem
In early 2022, RHR identified a need for a new client facing website.
As a product designer I need to create an experience that communicates RHR’s value proposition more quickly and clearly, and that will drive visitors to deeper and more engaging content.
Before
If left as is, there would low retention & engagement on RHR internationals website which would lead to loss of potential clients and brand recognition.
“Be an even greater force for good in the world by unlocking the potential of new clients, the leaders who shape the world.”
After
A design solution that not only meets client requirements, but does so in a way that is clear and equips users with the information needed to engage with RHR.
Create a new website that:
Refreshes RHR’s brand
Goes broad and not deep with content
Creates a compelling story
Provides lead generation, of net new prospects in support of RHR’s sales goals
How did we get from point A to B?
Setting Context
What is the purpose?:
Identify issues within global and page-level elements.
Enhance accessibility for a more inclusive experience.
Improve brand alignment to better reflect RHR’s identity.
Establish overall consistency across the website.
Challenges to Solve:
Create a more engaging and visually appealing experience to draw users in.
Provide clear and informative content to effectively communicate with users.
“Who will be visiting RHR International?”
Understanding the customer is key to creating impactful designs. To align with RHR’s goals, we developed 7 detailed use cases and user stories that reflect the needs and expectations of their diverse target audience.
Understand the Customer:
Focused on aligning designs with RHR’s goals by analyzing the needs and expectations of their diverse audience.
Target Audience:
Catered to HR professionals, job seekers, companies, organizations, and internal teams.
Example Use Case:
A visitor learns about an upcoming webinar, easily navigates to the registration page, confirms relevance, signs up, and receives a calendar-friendly confirmation email.
Discovery: What You Do Know
Website Audit
My next step was to review and document RHR’s customer-facing website, rhrinternational.com.
I did this to further understand the various use cases, constraints and unusual actions we might need to account for.
I documented the site architecture and components, taking screenshots and noting:
Imagery
Typography
Accessibility
Interactions and hover states
Bugs & issues with proper styling or odd interactions
Website Architecture - Current State
The highlighted items there are the 3 main links on the homepage that will eventually be phase II of this engagement…but for now we are focused on the homepage.
Design Exploration - What doesn’t work?
I preformed a design audit and documented bad practices to present to the client. Here are some of my findings:
-
The CTA lacks impact at first glance, and a thick red line overlays 'the world,' making it difficult for users to read.
-
The search functionality is not immediately noticeable. When accessed via the hamburger menu, it opens as a full-screen overlay on both mobile and desktop, which may feel intrusive.
-
The navigation structure is unclear, as the upper navigation only highlights a subset of the pages available within the hamburger menu, causing potential confusion.
-
RHR’s identity and purpose are not immediately clear to users.
-
The font is too light, making it neither accessible nor compliant with readability standards.
-
The stock imagery, particularly the first one visible, lacks emotional resonance and fails to authentically represent the brand.
-
The site features excessive animation, particularly with the blocks containing numerical data points that scroll upward. This can feel overwhelming, and some numbers don’t finish animating before users scroll past, making the experience distracting.
RHR’s website featured a cursor animation—a trailing circle—that was delayed and laggy, making it appear unresponsive.
-
When selecting 'Our Solutions' or scrolling down, users encounter a section described as 'a trap.' They are forced to scroll through all six solution sections sequentially, making it impossible to quickly scan options. This frustrating feature is likely to result in low retention and high drop-off rates.
-
Known as an anchor scroll, users are forced to go through every section in sequence, which hinders quick scanning of options and creates a frustrating experience that is likely to lead to low retention and high drop-off rates.
“Our Solutions” section:
“Client Stories” section:
-
Scrolling a bit further, you'll encounter a duplicated 'Our Clients' list, displayed in two rows instead of one, with the same seven clients repeated.
-
There's a large gap followed by significant wasted space, which is a recurring issue throughout the site.
-
This section for client stories fails to convey information clearly, feeling uninviting and confusing.
-
The toggle feature is difficult to swipe through, making it cumbersome to navigate.
-
The 'Spotlight' section fails to effectively showcase the latest content, feeling more like filler than important information. It would benefit from a clear CTA strategy.
-
Additionally, 'Highlights' and 'Spotlight' seem redundant and could be combined into a single section for recent updates. The large red navigation arrow is also not immediately noticeable and appears delayed.
“Spotlight” section:
Which doesn't feel like a spotlight at all.
-
The header suggests various resources are available, but instead, only eight blogs are displayed. The 'See More' link leads to a poorly formatted and confusing page with all resources. It would be better to show a mix or allow for filtering. Additionally, the 'Subscribe to our newsletter' option in the footer is not immediately noticeable and feels hidden.
“Resources” section:
External Inspiration - What are our competitors doing?
Analyzed competitors' sites for design inspiration, component ideas, and similar use cases.
Strong CTA’s
Imagery
Simple nav.
Spacing
Consistent typography
Prototyping - Wireframes
After conducting a thorough site audit, wireframes were prototyped with the goal of rectifying the poor user experience.
Enhanced hero image with full-bleed view for better user experience.
Simplified navigation with one bar and a search icon.
Clear presentation of solutions, eliminating the scrolling trap, with hover states for brief descriptions.
Client list condensed to single icon row with more recognizable names.
Thought leadership section reorganized to highlight key resources with a filter option.
Footer redesigned to include a prominent "Subscribe to Our Newsletter" section for better visibility.
RHR Stakeholder
“These look lovely, it might be helpful to see these in color now.”
Brand & Styling - Visuals
Before moving onto visual comps, I reviewed their brand guidelines and site to create a component library. I developed a current vs future state, highlighting inconsistencies in typography, spacing, hover/selected states, and compliance—particularly issues with text being too light and thin.
I then collaborated with our developer to streamline these features, ensuring consistency throughout the site while adhering to brand guidelines (which were frequently broken).
Iterating - Visuals
After the client approved wireframes, I went on to iterate on visual designs.
Header Options:
Explored full-bleed header images or a fixed video view.
Recommended against fixed or auto-playing videos due to added user friction and low engagement potential.
Full-bleed header with Imagery
Getty Image Search
Fixed header with Iconography
My Product Manager
“Let’s see some options for the CTA that draws attention.”
CTA:
Explored multiple visual approaches for the CTA, including bordered, filled, and incorporating their signature right triangle design element.
Full-bleed header with CTA options
Client List:
Explored visual styles for the client list section to highlight their seven most recognized clients, including a colored version on a transparent background and a monochrome design on a dark gray background.
Colored
Monochrome
My Product Manager
“Aaron you create logos right? Let’s see some some custom icons.”
Iconography:
Following their icon guidelines, I designed custom iconography for the resource section, enabling users to easily identify and filter resources. I presented two options: a white section with a red hover state and a bolder red section for a stronger visual impact.
White
Red
Collaboration with Development
What can we feasibly design?
I chatted constantly with my developer and PM to clarify the feasibility of our proposed enhancements.
1. It is possible for us to create the new design components using Elementor, CSS, WP plugins.
2. We can style elements using block themes to create brand consistency across the site
Final Design
Before:
After:
Low retention & engagement leading to loss of potential clients and brand recognition.
See Below…
Streamlined Website Improvements for RHR:
Navigation Simplification: Consolidated into a single action pane, replacing the hamburger menu for easier usability.
Search Functionality: Integrated a prominent search icon to eliminate confusion and enhance accessibility.
Full-Bleed Header Image: Replaced stock images with authentic photography to convey an inviting personality and communicate RHR’s message.
Clear Value Proposition: Better articulation of RHR’s solutions to attract prospective clients effectively.
Impact Highlights: Added prominent stats and case studies showcasing RHR’s impact and collaboration with recognizable brand names.
Recent Updates: Featured recent wins and news to immediately engage users with fresh marketing and advertising materials.
Custom Resource Icons: Designed intuitive icons to categorize resources, improving usability for visitors and clients.
Newsletter Subscription: Made the "Subscribe to our newsletter" feature more visible, ensuring users can stay updated on articles, insights, and podcasts.
Enhanced Spacing: Improved readability by refining margins, padding, and limiting distracting motion effects.
Typography Upgrades: Established a visual hierarchy and ensured accessibility compliance across all text.
Personable Photography: Introduced charismatic imagery to align with and enhance RHR’s brand identity.
Sitewide Consistency: Achieved compliance and uniformity, ensuring an accessible, professional, and user-friendly experience.
Clearer Homepage
Created an initial experience that communicates RHR’s value proposition more quickly and clearly, and that will drive visitors to deeper and more engaging content.
Simplified Navigation
Provided more direct navigation and site search through a single set of menu options in one location. Have this navigation also highlight desirable / engaging content.
Updated Landing Pages
Ensured that key drill-down screens reflect the new content moved from the homepage, and that they match the home page experience.
What did I learn and what would I do differently?
Check in with development early and often.
Allowed me to understand the capabilities available and continuously verify the feasibility of the enhancements I wanted to make.
Design is a team sport.
This project would not have been successful without the collaboration of my team and the relentless design feedback I received.
