Legal Associations Management (LAM)

About Company

LAM provides marketing solutions for the growth, management, and service of legal associations nationwide.

Design Goal

To make legal products and services more useful, usable, understandable and engaging for all.

The Marketing Team

  • Marketing Director
  • Front-end Developer (FED)
  • Back-end Developer (BED) (from IT Department)
  • Content Writer
  • Web Designer 👋🏾
    As the web designer for this project, I am responsible for:
    • Identifying and empathizing with the target audience’s situation through design research.
    • Collecting stakeholder and coworker feedback to inform my design decisions.
    • Providing all required design deliverables (wireframes, high fidelity mocks, assets, etc.).
    • Pairing with the dev team to ensure a smooth development and “design QA” process.

Website Redesign

The National Advocates

Locating and connecting with the right attorney who can efficiently help with your particular legal issue may not be easy. Many search via word of mouth or use an online legal service.
The National Advocates (The NA) is an attorney membership organization that also offers a way for people to connect with local attorneys based on their location and type of legal case.

Project Contents

📌 Chelsea Note!
In a hurry? View the 📑 Wireframe Deck and/or the 📑 Design Deck I presented to stakeholders.

Overview

Current siteMy first task at LAM is to redesign The NA’s website. I see this as an opportunity to go beyond a simple reskin and to take a heuristic approach that will focus on the needs of members and searchers.
Luckily, I have the blessing and enthusiasm from the Marketing Director and the COO. We all agree it will be beneficial to apply a user-centered design approach and to push our capabilities.

SOLUTION

Using user research, design intuition, and UX best practices, I designed a website that:

  • Places the focus back on people searching for an attorney which will enable them to feel informed and confident enough to connect with an attorney,
  • Acknowledges the two distinct attorney groups within The NA,
  • And addresses the future search functionality that can potentially help decrease weekly phone calls for assistance.

Case Study

Process

Discovery

I went through a discovery phase to gather data and to present my findings and recommendations.
Before our kickoff meeting, I familiarize myself with the website, jot down my thoughts, and prepare questions for the meeting. I also prepare to explain my process to the team.

🔍 Research Method #1: Stakeholder Interviews

In order to get a better understanding of the situation, I interview 4 Stakeholders, 2 Coworkers, and received insights from The NA’s Top 40 President.

Sample questions:

  • Tell me about the people who visit The NA website.
  • Why do people visit the site and what do they normally do on the site?
  • What things do visitors complain about or ask for most often, and why?
  • What problems do you see most often?
  • Who are the biggest competitors and what worries you about them?
  • What technology decisions have already been made, and how firm are they?

🗝️Key Finding #1: Unclear Representation

The NA represents two attorney groups, The Top 100 and The Top 40 Under 40, but the distinction and importance between the two aren’t strong enough.

🗝️Key Finding #2: Who Ya Talkin’ To?

The NA suffers from a few of the major flaws of legal websites: lack of plain language, word walls, and lack of guidance through the information.

  • The language and tone on the site focus heavily on attorneys.
  • There is a lack of language indicating the site is also a legal directory for those searching for an attorney.
  • Membership is invitation only but people express interest in joining via contact or phone calls. There is a lack of content indicating how to be considered.

🗝️Key Finding #3: Outdated, Replicated Template

Due to fast growth, LAM uses one website template (layout and functionality) for all of their web properties (with slight color variances).
The NA website is visually outdated and has an unbalanced focus between members of The NA and people searching for an attorney. And the search experience is disjointed and frustrating to users.

🗝️Key Finding #4: Weekly Phone Calls For Assistance

There isn’t an official attorney referral service, but people request referrals (weekly) via voicemails and through the wrong channels (case submission form for members). Preference is for them to contact the attorney directly.

📌 Chelsea Note!
A stakeholder mentions this finding for a different project, but it resurfaces during the 📑 stakeholder presentation.

People also request assistance with the directory and some employees struggle with helping:

  • “I hate sending people to the directory. I have to walk them through, step by step -- it’s easier to send a screenshot.”
  • “The search function is too specific and confusing.”

🗝️Key Finding #5: No Competition

“We don’t have competitors.” Oh ho ho ho, I bet you do... 🕵️

🗝️Key Finding #6: Technical

  • The website is built on the WordPress platform with MemberSuite (Associations Management System (AMS)) integration. The IT Department is relocating the current database from MemberSuite to Salesforce (Fonteva AMS).
  • The FED and BED handle the build and maintenance of the website. The BED is in charge of manually updating each member profile; it is a cumbersome and inconsistent task.
  • Stakeholders prefer members to update their own profiles and plan to give users that power once the database relocation is complete.


🔍 Research Method #2: Inventory of Existing Site Map

To kick off the site auditing process, I start with documenting the current sitemap. I want to learn what content is on the site and how it is structured.


🔍 Research Method #3: UX/UI Audit

Continuing in the discovery phase, I audit the website and identify what works, what doesn’t, and what might be missing. Luckily I have 🍃 👀 to review the site with me: interns!
First, I compare the current state of the website to an established set of web usability guidelines developed by Dr. David Travis (UX consultant at User Focus). But then I discovered a nifty Usability Checklist (Airtable) template from Christopher Peterson (Experience Crafter & Story Teller).
The template features a usability checklist that includes the criteria and guidelines for grading the usability of the product/website.

🗝️Key Finding #1: 5 Second Test

The site appears dated, busy, and packed with a lot of information. There isn’t a clear starting place.
Recommendation: Maybe create a stronger tagline that clearly says what you do and why users should care. And also display a clear call-to-action (CTA).

🗝️Key Finding #2: Search

Search experience and functionality could be improved. First-time users might not have the patience to learn it’s quirks.
Recommendation: To decrease frustration we should explore ways to make it more useful for users and less of a stumbling block.

🗝️Key Finding #3: Performance & Accessibility

The website is not device agnostic.
Recommendation: The new site should have a responsive layout so that any user on any device will have the best experience possible.


🔍 Research Method #4: Comparative and Competitive Analysis

Continuing in the discovery phase, I review websites that focus on attorney membership, searching for attorneys and general membership advertising. I want to find out how useful the search functionality is, how the site engages users and to also document successful attributes that could improve The NA’s interface design.

🗝️Key Finding #1: User Engagement

Best Lawyers balances attorneys and searchers elegantly. There are clear indicators of where you are, what’s here and where you can go. Lawyer profiles are easy to navigate and read. (I’m not too fond of the animation when you first click a tab - talk about a mini whiplash!).

🗝️Key Finding #2: Useful Search

  • Super Lawyers takes advantage of predictive search and Google; leaves no room for input error from users.
  • Best Lawyers features one input field that catches all queries (even relational words). Very efficient!

🗝️Key Finding #3: Successful Attributes

Super Lawyers - Vetted attorneys can showcase their expertise by answering state-specific questions about legal issues. Amazing opportunity to increase visibility!


🔍 Research Method #5: Target Audience

First, I identify only 2 users - members and searchers. But as I continue through each research method, it is clear to me that there are other types visiting the site:

🗝️Key Finding #1: Inquirer

I learn through 📑 stakeholder interviews (Finding #2), that people who are not invited know about the organization and want to join. They normally send emails requesting to be considered.

🗝️Key Finding #2: Invitees

When I talk to a coworker about the invitation process, I learn that potential candidates receive an invite through snail mail or email. The invite directs them to the ‘join page’ (to enter the invite code).
After submitting the invite code, they instantly see a checkout form. 😱 Ouch, this can potentially be an abrupt experience. Especially if you didn't’ read the (long and wordy) invite letter.

🗝️Finding #3: Researchers

The NA is a resource and method for researching attorneys. It enables law students, journalists, etc. to learn who’s who in American Law.

📑 Back to Project Contents


Strategy

I decide to focus on our primary users (Members and Searchers) and tackle their problems first and then trickle down.


🎯 Frame the Focus

Searchers

“How might we help searchers feel informed and confident enough to contact an attorney (without assistance)?”

Members

“How might we create a sense of community and support for members and potential members within The National Advocates?”

📌 Chelsea Note!
This frame stems from finding out later about our ‘invite acceptance’ numbers. I’m not at liberty to share them, but the numbers are concerning.
Also, networking is one of our benefits, but the presence of a networking environment is dry. Since this project, an ‘attorney re-engagement campaign’ started.😎


🎯 Generating Ideas For Action

I capture all ideas from the Discovery Phase into 3 buckets: Doable, Need to Discuss, and Going Beyond. Now that I have a focus, I narrow them down to a few key actions that have the most potential for positive impact.

🗝️Key Action 1: Use Plain Language

This key action will fall into our Content Writer’s hands.
For the first step, I will write the initial copy that will guide users within the site and help them interact with it. Then, the Content Writer will comb through and strengthen key areas.

🗝️Key Action 2: Improve Member Profiles

This key action will fall into our General Counsel’s hands.
Together we will check out different attorney profiles and then list out important categories for our users.


🎯 Site Map

I revisit the sitemap so that I can optimize the structure in a way that will help users find the information they need across the website. It is simple but it has unnecessary levels and a few areas that can be consolidated.

🗝️Modification #1: Grouped Navigation

I break the navigation into 3 groups (Top, Main, and Footer) in an effort to order the nav choices in the most logical and task-oriented manner.

🗝️Modification #2: Movin’ On Up

I relocate the Member Portal to the top of the hierarchy so members can immediately see where they need to go to update their account and profile information.
I also move the Shop and the ‘Submit Your Settlement, Verdict, or Judgement’ button to the member portal because it is only relevant to members.

🗝️Modification #3: Renaming

I rename ‘Member Portal’ to ‘Member Services’. Portal sounds out-dated. Don’t @ me. 😄
(But honestly, I noticed membership organizations using this wording).
I also rename ‘Submit Your Settlement, Verdict, or Judgement’ to ‘Submit Cases’.

🗝️Modification #4: One Big Happy Family

I decided to merge the two directories, practice areas, and the two officers/executives directories into one unified directory and place it on the main level. This will eliminate the multiple channels, help people understand their surroundings and find what they’re looking for.

If not displaying, view image instead.


🎯 Content Outline

Pushing the new sitemap a bit further, I list out all of the different content types and functionality on each page. Using the Target Audience as a guide, I think about the goals for each page: “Why are users coming to this page and what do they care about?”

If not displaying, view image instead.

I create the first pass for placement, layout, and flow purposes. (I later work with the Content Writer to make sure the content is clear, concise, and useful.)

For member profiles, I create a list of categories with the General Counsel and we organize the groups.

📑 Back to Project Contents


Design

🎨 Functionality and Experience Research

To help kickoff ideas, I research possible features and functionality. I share my findings with the development team so we can brainstorm.

Home - Split Screen

The split-screen layout is the logical and trendy way to give two contrasting elements equal consideration.

Member Profiles - Material Design Tabs

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Events & Legal News - Archive Nav

Breadcrumb navigation element which indicates the current location in the archive.

Search and Filter Outline

I created a rough outline of the features in the filter.

Algolia Search for WordPress

The plugin provides relevant search results in milliseconds, ensuring that your users can find your best posts at the speed of thought.

Reactive Pro - WordPress Theme

Advanced search, filter & grid plugin, powered by react-redux. Simple to install, very extendable WordPress Search plugin.

🎨 Iterative Sketching

Using the 📑 content outline as a guide, I start the design process with sketches. This is the way I iterate through many design options quickly.
Here’s a glimpse of my thoughts when I create each of the iterations.

A. Mini 🐿️moment. The first sketch focuses on how to display the 2 attorney groups:

“What if the attorney groups stand equally side by side for desktop, and on hover of a group the other fades out causing the user’s eye to focus? They will stack in mobile though. Oopsie, I forgot the CTA.”

B. I reel myself in, focus on mobile-first, and work through each section of the 📑 content outline:

“Okay, the Search CTA can appear under the tagline and then we can display the attorney groups. How about addressing the top 3 actions that will benefit all user types up top? (Join, Login, and Search)?”

“To illustrate the wide network, what if we display all the group logos/badges in a slow-moving carousel?”

C. Directory and Filters Round 1

“What if we display the filters in a full-screen menu? Slide in from the right like Amazon’s filter menu?”

D. Card Details

“How about using color labels to distinguish the attorney groups?

Maybe the label can display at the top right of the card. Eh, no. Oh! How about next to the Practice Name? Would work for portrait layout…”

E. Directory and Filters Round 2

“Should the selection of a filter auto apply? (Googles: “apply filters, UX”) No, let the user do it once they finish selecting items. It is frustrating (slow connections) to have the intention of selecting two or more filters, only to see the page reload painstakingly slow with each selection.”

”Maybe display the filter half-screen?”

F. Profile

”We have a lot of categories to display, let’s organize them in tabs.”

”To highlight the primary actions, let’s place them in a sticky footer.”


🎨 Wireframes, Annotations, and Prototypes, Oh My!

Happy with my beautiful sketches, I create wireframes in Balsamiq.

If not displaying, view images instead.

After showing the initial wires to the FED, they suggest I break the wireframes into ‘phases of development’. (Great idea, because it helped us get buy-in from the BED later.)

  • Phase 1 is a semi-realign - completely reimagines the way the site looks, it's structure, but keeps the current directory and search functionality.
  • Phase 2 is a redesign - completely reimagines the way the site looks, it’s structure and the functionality of the site.

Key Prototype Features:

  • Quick access to Member Services
  • Quick access to Accepting an invite (Join)
  • Clear, primary call to action: Search Top Attorneys
  • Efficient Forms
  • Intuitive Attorney Profiles
  • Search with Autocomplete and Relational Words (only Phase 2)
  • Unified Directory with Advanced Features (only Phase 2)

To illustrate interactions, I create prototypes in InVision:

Phase 1 - Mobile

Phase 2 - Mobile

Phase 2 - Desktop

Phases of development:


🎨 Wireframe Presentation

Once I update the wireframes with the developer’s feedback, I create a presentation for the stakeholders. It recaps the process (Slide #5), highlights prototype key features (Slide #15), and outlines the phases of development (Slide #25).


🗝️Feedback #1: Map Interaction

In an effort not to do what other sites are doing, the CEO thinks the first interaction should be with a map, not a search field.


🗝️Feedback #2: Attorney Referrals

A stakeholder would like to know how attorney referrals (Finding#4) will be handled in the site.


🗝️Feedback #3: Practice Areas

The CEO stressed that we must be “very, very clear about what practice areas we cover and who we are trying to promote.”
I initially removed the two ‘practice area’ list because it would display in the search field as the user types in a query. Since the CEO isn’t fond of the search field in general (and there’s a technical issue as well), I’ll find a way to bring it back.


We will move forward with Phase 1 but will need to figure out how to handle the map interaction request from the CEO. The BED will also need to get up to speed on the new database and how to integrate it with WordPress. It will be a large undertaking for the team, so Phase 1 would be the best first step. While we work on that, I start the visual design process. 👩🏾‍🎨


🎨 Inspiration

Colors

With no brand guideline to pull from, I reference the attorney badge for colors:

Photography

I gather photos from Unsplash. I want to use photos that showcase working hands (typing, writing, etc.) and people with authentic, strong facial expressions.

Illustration

I would like to have custom illustrations for each membership benefit. I gather examples for our Graphic Designer to reference. In the meantime, I’ll create rough placeholders.

Version 1 - Design Presentation

To show the stakeholders the creative direction I’m going in. I share the initial visual designs in a presentation. It highlights the design goals (Slide #2), style inspiration (Slide #4), and prototypes (Slide #14).


Version 2

Continuing to work, I warm-up the hero image and background color. Noticing the gradient is too sharp, I adjust the ‘color stops’ and smooth it out a bit more.

Mobile

Desktop

Prototype

📑 Back to Project Contents

Result

The project is still a work in progress, but the new design has the potential to offer a unique lawyer directory that provides a comprehensive profile for each attorney with information that will help people select the right attorney.

As we get more information from the attorney re-engagement campaign, we can implement more wants and needs from our members. We have a new team in place that will connect directly with them and get all the lovely details.

I’m excited to see where this project will go once we have figured out technical issues and gathered more insights!

Retrospective

What went well?

  • The stakeholders were impressed with the presentation. The user-centered-process is new for this company, and seeing it all tie together opened many eyes. The next project will be better and less bumpy.
  • Chatting with the Content Writer gave insights from a different perspective.

What didn't go so well?

  • This was my first time conducting stakeholder interviews. It went semi-well because the initial team ended up not being the primary decision makers. I did not know the CEO (and many others) would be involved in the project so I missed out on interviewing them and getting more insights on their goals and visions for the site.
  • Tracking down people and getting participation is hard! I thought sharing a Google Doc would help, but in hindsight, I should have passed out paper-based documents as well. Paper is more immediate and can lead to a greater return rate (especially at this company).
  • As I worked on this project, I learned about the communication difficulties between departments and individuals.

What have I learned?

  • Oh, I’ll definitely ask in the beginning “who are the primary decision makers?” and if there’s someone missing in the meeting who should be there.
  • I learned that stakeholder’s come in many shapes and sizes. I ran across this checklist a bit last minute, but I plan to use it the next time I conduct stakeholder interviews.
    • I also learned that coworkers are a great source for insights. They see things stakeholder’s don’t normally see on the day-to-day.
  • Everyone, including developers, content writers, and managers, work best when they have a collective understanding of what the user needs and how the design can meet those needs.
  • In a team, it is important to actively display trust and respect for each other's talents even if it’s not reciprocated.

What still puzzles me?

Is the office bird hitting on me? It sure likes to strike a pose whenever we lock eyes...🐤

📑 Back to Project Contents

Thanks for reading my case study! You made it through!! 🎉

I hope you were able to gain insight into my thinking and see how I churn out work. If you’re interested in learning more about me, send a note to cheybea@gmail.com . This site is a work in progress, more will be added soon!

Thanks again,
Chelsea Beachem