Hi, my name is Chelsea and I design websites and digital products.

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

• Overview
• Process
• 🔍 Discovery
• 🎯 Strategy
• 🎨 Design
• Result
• Retrospective

📌 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.

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?

🔍 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.

🔍 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.

🔍 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:

📑 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?”

🎯 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.

🎯 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.

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.)

• Home
• About Us
• Memberships

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).

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

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!

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

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

• More

I’m currently accepting new freelance projects or full-time opportunities, so drop me a line if you’re looking for help with web or product design.

• cheybea@gmail.com