How A Redesigned Website Helped New York State Bar Association Better Serve Their Members

A website should be an extension of an organization's larger goals, specifically their mission.The New York State Bar Association’s (NSYBA) mission is “to shape the development of law, educate and inform the public, and respond to the demands of our diverse and ever changing legal profession.” They advocate for state and federal legislation, promote equal access to justice for all, and work hard to support their members and attorneys across the country.NYSBA was founded in 1876 and since then has been “the voice of the legal profession in New York state.” It is one of the largest voluntary state bar associations in the United States, attracting members from across the country and across the world (with members from all 50 states and over 100 countries).

Photo courtesy of NYSBA

The Goals

In 2019, we became their digital partner for the strategy, design, and development of a new website.The project had three main goals:

1. Communicate, serve, and connect with their members
2. Support organizational goals, KPIs, and workflows
3. Represent NYSBA—who they are and who they want to be

The Challenges

NYSBA is a large organization with many departments and functions, and the website needed to support them all.Their current site was not serving their...

• Team: It limited more than empowered
• Users: Google Analytics and general feedback suggested it was difficult to use
• Brand: The design was outdated, fragmented, and cookie-cutter

The Approach

For every web design project we do at Clique, there’s a process we follow: 1) Discovery, 2) Design, 3) Development, 4) Support (or Post Launch).Because of the size of the organization and the various stakeholders, we extended our typical discovery process—the first phase of a website redesign. This allowed us to gain a better understanding about the organization, its challenges, and its users in order to build a website that accomplishes the project's goals.After conducting in-depth research on their organization, users, and the larger market, we built a new website that serves NYSBA’s members and their team.Here’s how our partnership did it.[section_break]When NYSBA chose us as their digital partner for a new website, they knew the problems their current website had: they experienced these problems firsthand and heard about them from their members.For discovery, we took an immersive approach. We needed the specifics—to uncover why it wasn’t serving their team, their users, and their brand.We needed to learn about NYSBA as an organization: What are their most important business functions? How do they currently use the website to reach prospective members and serve their current members? How could we make their jobs easier?And, we needed to learn about their users: Who were they? How did they use the website? What did they struggle with? What did they find easy? And—again—how could we make their jobs easier?

Discovery Part 1: Diving into the Organization

We set out to learn about their work flows, their goals, and—most importantly—their assumptions.If we could get to a place of understanding 80% of their business, we knew that through the execution phases (Design and Development), we could rely on our NYSBA partners to fill in the other 20%.Discovery activities we did to learn about their organizations:

• Stakeholder Interviews
• Messaging Strategy Workshop
• Heuristic Evaluation

Stakeholder Interviews

We talked to 38 people at NYSBA, covering 12 different departments.These conversations helped us onboard ourselves. We learned about their processes, their goals, and their needs. And, it also helped us dive deeper into the niche issues department teams were experiencing.The NYSBA digital marketing team (our client contact) introduced the project’s goals and scope to their coworkers. This allowed us to involve key stakeholders from the beginning and hear directly from them.In each session, we asked the same questions, a few examples include:

• How does the website affect their role?
• What did they like about the website?
• What was causing them issues?
• How should we define the success of this project?

Some things we heard:

• “I have another site that I use when I’m helping someone. I don't want people on here [previous NYSBA site] because it’s so hard to use, so I direct them to the other site instead." — Lawyer Referral Department
• “Right now I have to copy and paste different products and events a few times throughout the site. If something changes, I have to go through and find and fix every individual post. It takes a long time.” — Marketing Department
• "We’re leaders everywhere else but not in technology. We've never been. We need to regain trust for our members with this project. We need a user-friendly, digital experience." — Membership Department

Messaging Strategy Workshop

Our Messaging Strategy Workshop is a tool that we use to understand the organization’s brand communication. The goal was to figure out what they wanted to say to their members (messaging) and how they wanted to say it (voice).We did this with two activities: Audience Venn Diagram and Personality Sliders.For the Audience Venn Diagram activity, we brainstormed a list of factors, benefits, offerings, and differentiators that NYSBA offers their members. Then, we mapped them on a venn diagram by audience—talking through which audience needed to hear which benefit.

Note-and-vote activity to rank benefits in terms of top audiences

For the Personality Sliders activity, the NYSBA team did a little homework: each individual mapped where their brand fit on spectrums of polarizing words. Is their brand serious or playful? Rebellious or conventional? Mature & classic or Young & fresh?

Personality sliders results

This activity helps us establish a shared language between us and the NYSBA team, and talk about the “why” up front. So, rather than feedback being, “this doesn’t feel like us” or “this doesn’t look like NYSBA,” it’s “This is too playful for our brand,” or “This is too elite, we want to be more welcoming.”From this workshop, we understood what design direction might better represent NYSBA and speak to all of their users.The most important message to convey was that NYSBA is a global leader, one that takes its work seriously and cares passionately about the future of the profession. To execute a design that matched this concept, we identified the need to balance the authority scale with the young & fresh vs. mature & classic scale.And, understanding their key messages allowed us to lay out an information hierarchy that balanced their communication goals with user intentions on the website.

Heuristic Evaluation

NYSBA’s website is expansive, with countless pages, user flows, and pieces of content. We wanted to get first-hand experience with the frustrations we heard in the stakeholder interviews to eliminate any gaps between what their team relayed to us and the reality of the site.We conducted a Heuristic Evaluation, a type of usability analysis, to identify the website’s critical errors.Specific things we found:

• Disorganized Information Architecture (IA): There were long navigation branches (sometimes 5 levels deep) that forced users to go deeper and deeper into the rabbit hole to find content.Missing Pages: There were broken links for commonly referenced content, which completely disrupted a user’s path to find what they needed.
• Lacking Responsive Design: On desktop alone, navigation was difficult due to the amount of content; this issue was enhanced with a mobile device.
• In-line PDF Links: There were a lot of PDFs linked throughout the site—to forms, fliers, and whitepapers—but there were not any visual cues or copy to signal it to users. They were surprised by an initiated download to their laptop or a redirect away from the website.
• Organization-centric (not user-centric) Language: When navigating the website, we often were confused by page names that seemed to be lacking the language a user would be familiar with. Since we weren’t users ourselves, we flagged this as something to keep our eyes on for the user interviews: Was this bad jargon that would confuse users? Or were we just unfamiliar with it as outsiders?

After our usability testing was complete, the website scored 31 out of 100, which translates to “Poor.” This meant users were likely to experience some difficulties using the site or system and might not be able to complete some important tasks.We also formed hypotheses on what some of the biggest issues were (like our hunch with the not user-centric language). Now, it was time to test those with real NYSBA users.

Discovery Part 2: Understanding NYSBA’s Users

Speaking in hypotheses and waxing philosophical can only get you so far in fully understanding what users want and need. So, after we learned about NYSBA by speaking with their team, doing interactive activities, and performing an analysis on their current website, we wanted to learn from their users.With NYSBA’s help, we were able to speak directly to a handful of their users.Discovery activities we did to learn about their users:

• User Interviews & User Testing
• Card Sorting

User Interviews & User Testing

NYSBA knows who their members are: it’s how they’re so successful at serving them through programs, resources, and opportunities.They’re geographically diverse: 71% are New York Residents, 23% are Out of State (represented in every state), and 6% are Out of Country (and over 100 countries worldwide) .They have a variety of titles: They include partners, associates, judges, academics, practitioners (solo, small, and large), students, and emerging professionals.

NYSBA’s about page banner

This membership data is valuable—it helped us inform design decisions, language recommendations, and accessibility standards.But, we wanted to understand how their members were interacting with the website. When and why did they use the website? How was it helping? How was it failing?We interviewed and tested a handful of attorneys, judges, and NYSBA members. Each participant performed a series of three tasks. We monitored their progress through each one, and recorded their screen and facial expressions for analysis—we could see their frustration with frowns, sighs, and commentary.

User shares their screen during a user test (identity blurred for privacy)

60% of the tasks were failures, meaning the user was not able to complete the task correctly and/or they quit trying. A failure is unacceptable for a digital experience. It’s like going to Target and not being able to purchase a candle because you can’t find the checkout: not only frustrating for you as a user, but harmful to Target as a business (they just lost a sale).From the interviews, we were able to recognize patterns, specifically how they assumed content was grouped (navigation) and what they used to troubleshoot when navigation didn’t work. Almost all users relied on the search functionality to find content (which didn’t function well at the time).Some things we heard:

• “I’d be well past at giving up at this point. I seriously don’t know if I can find this.” — Public user, while searching
• “I don’t find [using technology] easy—if I’m being honest.” — Experienced attorney, when asked about overall experience
• “Not cool. *Laughs* To go at [the task] through navigation, it gets confusing quick.” — Mid-level attorney, when asked about overall experience

Cardsorting

The current navigation on the website was failing—we heard it from User and Stakeholder Interviews and experienced it first-hand from our Heuristic Evaluation.One of the biggest challenges was a matter of quantity. NYSBA provides a lot of resources to a lot of different audiences, and with each audience, came a different priority in terms of what they wanted and needed to find.

Preliminary cardsorting showcasing the previous state, with the new proposed navigation, showing only primary and secondary

To help us figure out a better way to organize the information architecture, we did cardsorting. It’s a UX (user experience) technique where users create a dendrogram (aka a category tree). We cut the top navigation and made the main level more audience-focused, rather than organization-focused. We organized the pages, one by one, figuring out where the page made sense to live within the larger system.We worked through iterations with the NYSBA team until they had a navigation that was flexible enough for their future growth, but strict enough so everything had a home.(Spoiler alert!)

Showing the chunky navigation for hovering over “Membership Benefits”

In design, we also chose to build out, what we call, a “chunky navigation.” Rather than a typical drop down, this allowed NYSBA to showcase a lot more pages upfront, but in an organized, clear fashion.[section_break]At the end of discovery, we confirmed some problems and opportunities the NYSBA team were familiar with, but uncovered new ones too.Now—with a better understanding of NYSBA’s organization and users—we could deliver on the three core goals for the project:

1. Communicate, serve, and connect with their members
2. Support organizational goals, KPIs, and workflows
3. Represent NYSBA—who they are today, and who they want to be tomorrow

These three goals were the basis for all of our ideation and decision making.

Goal 1: Communicate, Serve, and Connect Their Members

A website should be an extension of the organization’s mission and vision. For NYSBA, that means being built to serve its members.Their members deserved an easy-to-use website that acted as a repository for all things law. Moreover, they deserved a true resource, somewhere they could go to sign up for events, stay up-to-date with their Sections and Committees, and find what they needed, when they needed it.With our learnings from the extensive discovery process, we built a website that puts its users first.Specific features we’ll highlight:

• Calendar & Events
• Search Functionality
• Clean, Uncluttered Design

Calendar & Events

NYSBA hosts hundreds of events per year—from committee meetings to large-scale milestone celebrations. When we interviewed their team, we heard the same thing over and over again: events are hard for people to interact with on the website.The calendar and events page needed to be easy to find in the navigation, to share events with their colleagues and network, and to register for an event.Our heuristic evaluation showed us that wasn’t the case. Sharing was difficult. There wasn’t simple registration functionality through the calendar. It was hard to discover events unless members specifically sought them out.

Events Calendar pageNow the Events Calendar is accessible through a utility navigation link. With one click, users can navigate to the page and filter by date, region, or event type (section meetings, CLE programs, admin, etc.).The calendar itself is very easy to skim, with clear event tags, a non-crowded user interface (UI), and a hover feature showing more information about a specific event without forcing a user to commit with a click.

Example of a specific event detail page

Because social sharing and registration were important for users and NYSBA, they stand apart from the rest of the event information on the event detail pages.Now, a user can easily find, share, and register for an event.

Search Functionality

As we talked to users, we heard something over and over again: if they couldn’t find something, they tried to search for it. Sometimes, they relied on Google, typing in long-tail keyword searches hoping to land on what they needed. But, they also tried—and at the time, failed—to search via NYSBA’s global search feature.The search was broken. When we talked with NYSBA stakeholders, they were aware and frustrated: the search would surface old content, prioritizing hits over relevancy. In some cases, it would come up completely empty, not recognizing misspellings or synonyms.

Search pop up page

The new search functionality helps surface content for users who have a specific need in mind.From the utility navigation, a user can click on the search icon, triggering a pop-up that overcomes the page, simplifying the user’s experience and eliminating distractions. A user can search immediately (by keyword), choose to use the advanced search, or enter specific search areas that garner high-search-traffic for users (for ex. CLE program catalog or NYSBA store catalog).

Search results page

Additionally it:

• Shows what the users searched, so if they spelled something wrong, they can see what they typed
• Allows users to filter by type of content (section, news, events, etc.)
• Gives users the ability to adjust pagination limits (showing more than 10)

Clean, Uncluttered Design

NYSBA’s website relied on design conventions from years ago: it was outdated.

Examples of NYSBA’s previous homepage design

A few specific problems we identified:

• The Homepage was cluttered with ads and too much content served all at once
• Fonts lacked distinctive personality
• Stock imagery made it feel impersonal and cookie-cutter
• Walls and walls of text

New homepage first impression

They were eager to modernize their website, but had one very important caveat: above everything, it needed to improve the UX (user experience). Yes, it could be cool, carry the proper weight of prestige, and set them apart from other Bar Associations, but not at the expense of making it more complex for their users.A few specific user-friendly design decisions:

• Animations are smooth and clear, not flashy
• White space and clear content sections
• Clear typography hierarchy with headlines, subheadlines, and microcopy
• Bright blue color accent for call-to-action (CTA) buttons

See more on the design decisions in section titled “Ambitious, Innovative Design”With an intuitive interface, it’s easier for users to solve their own problems rather than relying on the support of NYSBA staff to walk them through simple transactions.

Goal 2: Support Organizational Goals, KPIs, and Workflows

A website is often an organization's most important marketing tool. It should align with internal initiatives and goals and help push it forward.When we interviewed stakeholders we asked a question to help summarize our conversation: How would they define a successful website?Here are some answers we heard:

• “A website that generates higher membership recruitment numbers and member retention.”
• “It helps generate revenue.”
• “When it only takes 5 minutes to upload something, not 2 hours.”

People at the organization wanted to do their jobs better: they wanted to serve their members, support their budgets, and be more efficient everyday. With the new website, we wanted to empower them. We wanted to build something that made their jobs easier.

Back-end Solutions

Across stakeholder groups, we heard that updating content was frustrating and time consuming due to a lack of connectivity. On the back-end of the website and across their various platforms, NYSBA staff had to enter, update, and save data in multiple places.If an event changed location, they needed to find and update each place the event appeared, rather than having it automatically pull the new location across the website. At best, the work was monotonous. At worst, they’d miss a page and create confusion for their users.

Salesforce: Syncing Schedule

Salesforce is the platform NYSBA uses for all committee groups, events, and products (like CLE courses).

Example of a CLE course and data associated with it (format, date, location, etc.)

With the newly engineered back-end, we were able to create a centralized hub for all of their data. The staff only has to update the information in Salesforce and the data automatically syncs nightly. If changes happened within the last 24 hours, they will be reflected on the website. No more hunting down events, and no more worrying about forgetting to update data.

Salesforce: Single-Source Sign In

We also implemented single-source sign-on for members. By integrating with Salesforce, we ensured that a member would only have to login from the NSYBA website. When they go to make a purchase, rather than being redirected and re-entering their username, password, and information, they are redirected and entered directly into the purchasing user flow.Salesforce wasn’t only a big help to their internal staff, but also to their membership.

API Integration with a Third-Party Consultancy

NYSBA uses an API integration for committees, eCommerce, and events. Our role was two-fold: 1) To create a pathway for the data from the website to the API (integration), and 2) To establish the logic for the website (what data would be automatically pulled onto the website).A technology consulting company who specializes in non-profit and associations platforms managed the API integration. Together, we took a proactive approach to the partnership, meeting daily to communicate progress and priorities to their development.We used an API mapping document to track issue reporting and avoid duplicative work between our two teams. All teams involved also remained flexible and open to modifying the plan as different challenges arose; we didn’t just “stick to the scope,” we adjusted the scope when and where it made sense to do so.

Goal 3: Represent NYSBA—who they are today, and who they want to be tomorrow

NYSBA is one of the biggest bar associations in the country. One of the highest priorities in designing their website was the look and feel: their old website didn’t do their prestige justice.They needed a website that accurately represented their presence in Albany, NY; the country; and the world.

Cohesive, Flexible Templates

In our stakeholder interview sessions, we were able to speak directly with the Section and Committee managers. We learned that each Section and Committee had different information they wanted to share. Some prioritized communicating meeting times, while others shared policy updates, focusing on keeping their members informed.Their previous Content Management System (CMS) was creating a lack of cohesion: each Section and Committee chose to use a different template for their unique content. It made sense for the leaders of the committees, but it was confusing for a member who belonged to multiple committees.Each time they went to a different page, they had to relearn how to read the information, find the events vs. the information vs. the contact information. The member’s confusion would snowball into phone calls and emails to the leadership. It was a patched solution for everyone.

Example of pages using the Section and Committee’s template

So, we built a flexible Section and Committee template, a modular design to manage the needs, wants, and goals of all 787 different Sections and Committees. The leaders just needed to select which sections of the page they needed (i.e. choosing to show events, but not news) and they could build the best page for their members.And, with the template having robust content, it also allows for future growth. If a Section or Committee grows larger and now has news to share, they can enable that section on the back end with just a few clicks.Across the website, we used flexible templates like this. It helps us design and build in the back-end, and the NYSBA staff to create content that has a cohesive look and feel for their users.

Ambitious, Innovative Design

After looking at other Bar Association websites across the country and world, we noticed many sites relied on a grid design, clean lines, “boxes” around content, and formulaic templates. Why? Because a lot of content calls for a more minimalistic approach. But, did a minimalist approach have to mean a boring aesthetic? No.

Examples of gradients on CTA buttons

NYSBA is always looking to the future, not anchored in the ways of the past. We leaned into this aspect of their personality with color application and rounded shape elements. A color gradient highlights NYSBA’s signature blue and photos and call-to-action (CTA) buttons are cut into a rounded shape—this adds intrigue, while also balancing the simplicity of a grid-like layout that the content calls for.

Examples of half bridge and shape design elements

To represent their mission to create connections for their members, we introduced bridge-inspired elements (see in the foreground of the homepage). These half-arches are cool, but in a meaningful way that compliments the rest of the content.[section_break]From the beginning of this project to the end, we took a strategic approach—defining the different problems, goals, and opportunities for the NYSBA team and then executing on those with what we were hired to do: design and development.Now, NYSBA has a new digital presence that enables them to better serve their members. A member can navigate with ease, their staff can leverage the website as a true marketing and communication tool, and their future values, priorities, and goals are represented.We’re incredibly proud of the work we did and are looking forward to continuing our partnership with NYSBA as we kick-off a project to redesign and rebuild their foundation website (the non-profit branch of the organization).With that, we rest our case.