FOLEY & LARDNER WEBSITE RE-DESIGN
RESEARCH | UX
Foley & Lardner LLP, established in 1842, is a leading international law firm with more than 1,100 attorneys located in 25 offices throughout the United States, Mexico, Europe and Asia.
OVERVIEW
Legal
Industry
People Involved
Agency - Reflexions
Client - Foley & Lardner LLP
Partner - The Pensery
Reflexions Team
Project Manager - Olivia Linder Tabel
Art Director - Ian Crowther
UX Designer - Me
UI Designer - Monica Yi
My Key Contributions
UX Research: UX audit, competitor analysis, and stakeholder interviews
Design Strategy: Site architecture
UX Design: Mobile and desktop wireframes & user flows
Timeline
6 Months
Tools
Figma
Context
The team at Foley realized that their website had not been updated in several years and was falling short in many ways:
👉🏼 From the UI Perspective:
The site felt outdated, didn't embody the firm's values or culture, lacked energy and good visuals, was often slow to react to user interactions, was inconsistent across the site, and had several accessibility problems.
👉🏼 From the UX Perspective:
The site wasn't meeting the needs of their clients or employees, users were struggling to properly explore and navigate the site, most arriving from re-direct links, instead of organically.
Original state of homepage
To build trust and credibility, they decided it was time to redesign their website to improve its appearance and effectively convey their values and culture. This would enhance user engagement and improve the overall user experience.
DISCOVERY
I started the project by researching to better understand the website, its users, and the organization.
This allowed me to make informed design decisions based on real data and make modifications tailored to the specific user's needs, ultimately leading me to create a better user experience for the website.
UX Research Methodologies:
Stakeholder Interviews
The first step was conducting 2 interviews with 8 internal Foley stakeholders, each interview averaged 60 min in length.
They were able to provide valuable insights into the organization's perspective, desired outcomes, target audience, and existing user pain points as well as understanding the issues I had to focus on.
👉🏼 Key findings
Business Goals
Modern UI
Increased engagement
Drive recruitment
CRM integration
Gather Analytics
Users
Potential clients
Existing clients
Potential recruits
Other law firms
Referrals
User's Needs
Research Lawyer bios
Recruitment
Find out more about Foley
Read from Insights/Blogs
Learn about Foley's culture
Competitive Analysis
The second step was conducting a competitive analysis. This allowed me to identify industry standards, best practices, and common UX patterns to ensure the re-design was incorporating existing mental models which would make the new site more familiar and user-friendly.
I analyzed competitors like pwc, EY, Allen & Overy, US Chamber, Winston & Strawn, Jones Day, Skadden, Sidley and BCG.
👉🏼 Key Findings
Strong Branding
✅ Other law firm websites showcase visually captivating designs that really embody their brand identity and give off a polished and modern vibe.
✅ They use stunning imagery, cohesive branding elements, a consistent tone and voice, and modern interactions throughout their sites, which all contribute to a cohesive and compelling user experience.
Clear CTA's and Sign-ups
✅ Many law firm websites provide clear calls-to-action that guide users toward taking desired actions like signing up, subscribing to specific topics, or filling out contact forms. These CTAs are prominent, easy to use, and strategically placed in highly trafficked areas throughout their sites.
Use of Vertical Space
✅ Top law firm websites use vertical space by breaking up content into small, easy-to-digest sections using a sticky header and accordions, toggles, or tabs to help users access important information and expand detailed content as needed, without overwhelming the page with too much text.
These strategies provide a clean, organized page layout, making it easy for users to navigate and providing an engaging user experience.
UX Audit
Additionally, I conducted a UX audit to evaluate the website's current user experience and user flows, identify inconsistencies in the UI and accessibility problems, and uncover pain points or areas for improvement that the site was facing.
The findings provided me with specific action items to consider in my designs overall and on specific pages.
Key Findings Across the Site 👇🏼
1- Low color contrast
2- Image dependency
3- Small text size
4- Carrousels w/ no option to stop
5- Graphics not responsive
6- Hidden content behind hovers
7- Not navigable with a keyboard
8- No focus states in elements
Accessibility Issues:
1- Buttons
2- Links
3- Cards
4- Tabs
5- Lists
Inconsistencies:
1- Headers
2- Colors
Not Part of the Branding:
❌ Carousel / Moving elements take away the user's control even though there are navigation controls. They also negatively impact accessibility, especially for those with motor skill issues.
❌ Carousel / Users may have a hard time reading all the text before a slider advances, therefore users may miss information.
❌ There is not a clear CTA or valuable information needed for users to be able to tell what Foley is all about.
❌ Insights should not be on the hero section as they don't communicate the value of Foley, they are typically time-sensitive, and temporary. Additionally, they don't represent Foley's long-term vision, mission, or values.
Hero Section
Search Section
❌ This feature is confusing, because the default tab (find an attorney) is gray, which generally implies a disabled state, giving the impression that the selected tab is the next one (find a service).
❌ The search tabs are not easily identifiable as they don't follow a tab pattern or structure.
❌ Tabs are not the appropriate pattern to use here since tabs should provide users with exact answers rather than topics to browse.
❌ The search feature under tabs is redundant because there is already a search bar in the menu, which goes to the same search page.
❌ Poorly chosen images, low-quality graphics, and poor color contrast make the site look unprofessional and unappealing making it less likely for users to engage with the site or explore its content.
Lack of Visual Appeal
Key Pain Points on Homepage 👇🏼
Original state of homepage
❌ For users to be able to see people, they need to either click "View all", click any letter, or search for a name.
❌ Hiding the advanced search makes it more difficult for users to find the content they need and requires additional clicks. Additionally, this can be particularly problematic for users with disabilities, who may find it even harder to use the feature, which can result in exclusion and frustration.
❌ Alpha listing may not be useful as users may not know the name of the person they are looking for, and the alphabetical search feature can be time-consuming and frustrating, defeating its purpose.
Search Section
Content
❌ Showing news articles on a "people's page" instead of bios can confuse and frustrate users because it fails to provide the expected information and can be time-consuming to browse as users may have to browse through multiple pages or search results to find the information they are looking for.
❌ Displaying people on a list view can be challenging for users to quickly scan through, compare, and find the most relevant information.
❌ When using a list view, it can be challenging for users to find relevant information as they may need to scroll through a lot of items to find the information they are looking for.
Layout
Key Pain Points on People's Overview Page 👇🏼
Original state of people's overview page
❌ Information is hard to digest.
❌ Text is too long.
❌ Text has not enough breathing room between sections.
❌ There is not enough hierarchy between sections (Overview, Capabilities & Insights).
❌ The "Overview, Capabilities & Insights" section looks like a tab for displaying bite-sized info, but it's actually an anchor point that makes the page really long. This can confuse users and is especially challenging for those with motor skill disabilities.
Layout
Inconsitencies
❌ Some bio pages are inconsistent in how they display information to the user. For example, some bio pages may have dedicated fields for sections such as honors and education, while others may include this information as part of the bio overview text without any clear separation. This inconsistency makes it difficult for users to find or skim through the relevant information they are looking for and also makes the page unpredictable.
❌ Long bios take a long time to load which can be frustrating for users. This leads to a poor UX, as users may lose interest and leave the site.
Load Time
Key Pain Points on People's Detail Page 👇🏼
Original state of people's detail page
❌ There is no microcopy or suggestions to help the users search and find what they are looking for.
❌ The initial search doesn't offer any filtering options until the user enters a search term and clicks on the search button.
❌ Search engine doesn’t pick up spelling mistakes and doesn’t suggest the desired or similar results.
Search Section
Content
❌ It's not clear what events have passed and what events are upcoming.
❌ All the different categories are mixed on the page (Events, news, publications, blogs, etc) and that makes content hard to scan and digest.
❌ Blogs and podcasts are mixed and not properly labeled which makes it difficult to distinguish between blogs and podcasts. This can be frustrating for users who want to find a specific type of content and have to spend more time searching for it.
Key Pain Points on Insights Page 👇🏼
Original state of insights page
After analyzing the research findings, we realized that the website had more challenges than the client originally thought and that not only we needed to revamp the UI of the site, but we also needed to enhance the user flows and user experience.
DESIGN
During this phase, I translated the research findings into site maps, wireframes, and user flows. We had weekly meetings with Foley stakeholders to make sure that these solutions were meeting the needs of both the users and the business.
I restructured the menu a little bit so that the content on the pages can be displayed in an easier way for the user:
✅ Removed blogs and podcasts from the ancillary navigation.
✅ I made the sector's link to be the first one since they are Foley's main focus.
✅ I decided to combine the blogs and podcasts into one section called "Insights." This way, users can easily access all the content in one place, without having to search for different sections.
Menu
Key Modifications on Navigation👇🏼
Site Architecture
Footer
✅ I included the CTA message in the footer to reinforce the unique value that Foley offers.
✅ I included the links from the main navigation in the footer to provide users with multiple access points to the same content, which can reduce the time it takes to find what they are looking for.
Modular System
I developed a modular system that allowed me to:
✅ Break the website down into smaller sections.
✅ Allow for flexibility, scalability, and consistency for both design and development.
✅ All these components followed the same structure and variants, desktop and mobile sizes, types, and different states.
Homepage
Since the beginning of the conversations with Foley stakeholders, we defined that the homepage was the page that needed the most attention because it's the front door of the firm and it's the first impression users will have of it, therefore it was the first page I worked on.
Key Improvements👇🏼
Hero Space / CTA
✅ Displayed the main services (Sectors) that Foley provides along with a clear message that is easy for users to understand what Foley is about and its unique value.
✅ Sectors are laid out vertically which allows for more flexibility in adding a new service if needed.
✅ Sectors are displayed before the fold.
✅ Users can click on each sector and understand what each sector is about.
Search Section
✅ Clearly defined what tab the user is on.
✅ Added microcopy to the search bar to guide users on what to search for and to help them find what they're looking for more quickly and easily.
✅ Added autosuggestions to help users speed up the search process and to keep them on-task toward conversion.
Content
✅ Included 3 featured content (Insights) cards as it lets users quickly see more content at once without taking extra steps to see more than one card at a time.
✅ To demonstrate Foley's strong commitment to equity, I implemented direct links for their culture, core values, and DEI, as this was one of the most important messages Foley stakeholders wanted to communicate to their users.
Modularity
✅ Added modules to provide the ability to insert different types of content and functionality to the home page
People Overview
Key Improvements👇🏼
Content
✅ Showcased people at load to provide users with a visual representation of the search results, making it easier for them to quickly find and select the person they are looking for.
Filtering
✅ Displayed the filters at load so the users can filter their search without additional clicks.
✅ Added the word "filter" to the filter fields to provide a clear and concise guide to the users on how to interact with the filters.
✅ To keep a consistent language across the site, I changed the label for the "industry team" filter to "sector".
Layout
✅ Displayed people on a grid view as it reduces the amount of scrolling necessary and makes it easier for users to quickly find what they are looking for.
✅ Vertically stacked the people's details and added relevant icons to make it easier for users to quickly scan and locate the information they need.
✅ Placed new articles related to people at the bottom of the page to avoid distracting users and help them focus on their search.
✅ To save vertical space on mobile, I implemented horizontal scrolling on the alpha listing and new articles.
People Details
As this is one of the most important pages on the site, I spent a significant amount of time working on it to ensure that this page was easy to use.
Key Improvements👇🏼
Hero Space / CTA
✅ Implemented a modular system that features a header, essential credentials, and secondary navigation to showcase a person's overview, experience, highlights, and insights in separate sections.
This made the information easily digestible for the users while avoiding overwhelming them with too much information at the same time.
Layout
✅ Introduced a two-column layout on the page, which is an effective method for maximizing vertical space while still displaying a substantial amount of content.
✅ Utilized tabs to hide information and avoid cognitive load.
✅ The mobile version implements horizontal scrolling to save up space on the screen.
Interactivity
✅ Implemented a sticky header on both desktop and mobile to ensure that important information in the header was always visible to the users as they scrolled down the page.
Insights Overview
Designing this particular page was the most challenging part of the project because:
Foley had numerous categories within categories as well as the same type of content across various pages.
In addition to that, Foley stakeholders did not want to use images in all the cards since sometimes they found it hard to add a picture that was visually appealing while showing the meaning of the article.
As a result, I had multiple iterations to establish the architecture of the page and its contents.
Key Improvements👇🏼
Content
✅ Combined "Blogs & Podcast" into this page so users have access to the same type of information in one place.
✅ Separated the different categories of content on this page into individual sections, each with clear labels to help the user quickly navigate and find the information they need.
✅ The mobile version also implements horizontal scrolling to save up space on the screen.
✅ Clearly displayed upcoming events with a label.
Layout
✅ Added a tag to each card component so users can quickly identify the type of insight it contains. This makes it easier for them to scan the information and find what they are looking for without having to spend too much time searching.
✅ Developed a card component that allows content writers to add or exclude images without compromising the visual appeal of the page.
✅ The mobile version implements horizontal scrolling to save up space on the screen.
Filtering
✅ Implemented the same filter feature as the people overview page and displayed the filters at load so the users can filter their search without additional clicks.
✅ Added the word "filter" to the filter fields to provide a clear and concise guide to the users on how to interact with the filters.
✅ Incorporated new filters for "practice areas," "sector," and "type of content" to help users quickly and easily find the information they need.
✅ Introduced a filter by year, so the user can find content within a time frame.
NEXT STEPS
After several weeks of meeting weekly to review UX wireframes and incorporate feedback, we finally received approval from Foley stakeholders on the UX wireframes. YAY!
Sadly, I was not involved in the next step of working on the UI.
HIGHLIGHTS
As a product designer, my goal is to create products that are both user-friendly and visually appealing, while also aligning with business objectives.
However, juggling feedback from multiple sources can be quite a challenge. Yet, by carefully considering each input and adding my creative twist, I delivered a product that exceeded expectations internally and externally.
1
I was given the opportunity to showcase my work to a diverse group of individuals weekly. At first, it was a bit nerve-wracking to present to people I wasn't familiar with, but I saw it as a great opportunity to improve my presentation skills.
I put in a lot of effort to communicate my ideas clearly and confidently, and I'm so happy to see that all my hard work paid off. The feedback I received from the team at Reflexions was overwhelmingly positive, with several people even reaching out to express their appreciation for my presentations. ❤️
2
Internal shoutout from the PM after the first UX presentation to Foley
Internal shoutout from the agency's director after the last UX presentation to Foley