Branding | Research | SEO
Designing a User-Friendly Website for Local Attorneys Resulting in a 56% Increase in User Engagement
The Bartholomew County Bar Association, Inc. (BCBA) is a not-for-profit corporation whose members are attorneys licensed to practice law in the State of Indiana, and who reside, work, or practice law in Bartholomew County, Indiana. The BCBA website is meant to provide resources to current members, attorneys new to Bartholomew County, and the general public.
Project Overview
ROLE
Freelance UX/ UI Designer, UX Researcher
CHALLENGES
The Bartholomew County Bar Association website was difficult to update, had outdated UI affecting its functionality, did not appear in Google Search, and was not mobile friendly. As a volunteer-run non-profit organization, there was a limited budget and the client had to balance their time between this project and their full-time job responsibilities.
SOLUTION
DURATION
June 2023 - February 2024
SCOPE
Research, UI/ UX Design, Branding, Web Design, Usability Testing
To develop a website that is easy to update, appears modern through refreshed UI, is responsive, and replicates functionality found on other regional bar association websites like Marion County Bar Association and Hamilton County Bar Association.
TOOLS
Figma, Google Suite, GoDaddy
Project Goals
Business Goals
-
Develop a responsive, mobile-friendly website
-
Add SEO to improve Google Search ranking, increasing site traffic
-
Develop a website that is easy to update for individuals with limited experience
User Goals
-
Pay annual dues
-
Stay up to date on the latest bar association news and events
-
Find a lawyer who operates in, or around, Bartholomew County
Impact
85%
Of users surveyed felt the new website was more user-friendly than the previous website.
Improved User Satisfaction
56%
Of users used the website to pay annual dues in 2024.
Increased Conversion Rate
The Final Design
Home
The home page features an immediate call to action for users to learn more about joining the Bar Association, as well as quick links to the primary features of the site including where members can pay dues and the member directory.
Members
The member attorneys' primary request was to have the ability to pay dues online. Due to limitations within the organization, we were unable to utilize the eCommerce feature available through GoDaddy. However, I identified a solution by linking the organization's PayPal account to the website.
Events
The member attorneys' secondary request was to know when the Bar Association is hosting events. We added an events page so that users can stay up to date on all Bar Association events.
Initial Research and Heuristic Evaluation
UX Review of Other Bar Association Websites
To better understand the elements commonly found on bar association websites, I reviewed the websites of other regional associations such as the Marion County Bar Association and Hamilton County Bar Association. These websites offered interactive homepages including links to primary resources for their membership, upcoming events, and professional development activities.
Usability Analysis of Previous BCBA Website
The previous website had straightforward header and footer navigation, and users identified in the survey that the process for searching for a lawyer was easy. However, there was confusion about the name of the organization (the top left of the navigation read “The Lawyers of Columbus, IN” and the hero section said “Bartholomew County Bar Association”.) The website included outdated and contradictory information, and it was missing pages commonly available on the regional bar association websites. Additionally, the mobile version was not responsive.
The Users
The Bar Association sent a preliminary digital survey to members to assess opinions of the previous website. The majority of respondents were attorneys, with 94% of respondents primarily using desktops or laptops to access the website. We hypothesized this may be due to the original website not being mobile friendly.
Respondents indicated their top reasons for visiting the website were to find an attorney and pay membership dues. Other reasons included checking their own listings, contacting Legal Aid - District Eleven, or accessing links for local organizations such as the State Bar Association.
"The website needs to be more of a hub for members to update their information and pay their own dues online."
- Survey Respondent
Pain Points
1
The website is difficult to update and maintain
2
New lawyers and members of the public cannot find the website due to poor SEO
3
The user interface does not look modern and inhibits functionality
4
Users cannot pay dues online
Personas
As a result of the initial survey, I defined two types of users: member attorneys and members of the public seeking to hire an attorney. Member attorneys were identified as the primary site user. Based on these user types, I developed personas that were essential while thinking through user flows and designing the usability testing study.
John is a 45 year old librarian and father who needs to hire an attorney because he is getting a divorce
Kathy is a 57 year old attorney who needs to pay annual dues because her Bar Association membership is up for renewal
Ideation, Prototyping and Testing
Information Architecture
To plan the hierarchical structure and flow of site content, I created a sitemap. The sitemap accommodated all elements requested by users and members of the Board of Directors. Since this hierarchy is quite simplistic, I chose not to create user flow maps, if the user wanted to complete a task they would select one of the parent pages.
.png)
Sketching
To explore directions to take the bar association website, I conducted a Crazy 8’s exercise. This allowed me to generate many ideas quickly and efficiently. At the conclusion of this exercise, I selected three design ideas to refine and present to the client.
Wireframes
After iterating through sketching, I developed lo-fi wireframes for three design options that were sent to the Board of Directors for review. Each design option included sample Home and News pages.
.png)
.png)
Sandbox & User Testing
After receiving feedback from members of the board on the initial design ideas, I began to build the site in GoDaddy. I chose to build the design in a test environment instead of creating a prototype in Figma because I was not familiar with GoDaddy’s offerings and did not want to over promise on design deliverables. Once I began working with the website builder, I discovered it was quite limited.
I developed an unmoderated usability test to assess the key functionality of the website. This presented a challenge due to participants tendency to be less engaged and behave less realistically without a moderator.
SEO
A primary goal for this project was to improve Search Engine Optimization so that the BCBA appeared higher in Google search. This was achieved through the following methods:
Improving Content
Quality
Initiating
Keyword
Research
Utilizing
Image
Optimization
Integrating
Internal
Linking
Establishing
Mobile
Friendliness
Branding
To create a cohesive visual identity, I worked with the BCBA to identify brand colors and a primary font to represent their organization.
We selected a color palette with teal as the primary color, as it was similar in visual identity to their previous website and evocated a professional feeling.
Roboto was selected as the font, as it is modern, versatile and easy to read on screens, making it well suited for web.
Reflections
The BCBA website went live in early March 2024. While both the client and I were happy with the final design, I have identified three areas for improvement in future projects.
Website Builder Limitations
Since one of the primary goals of this project was to design a website that could be easily updated by individuals with limited experience, it was important to use a user-friendly website builder for this site. Additionally, the Bar Association wanted to keep the cost of their website under $200 annually while maintaining ecommerce capabilities (so members can pay dues online). Keeping these constraints in mind, we moved forward with GoDaddy as both our web host and website builder. While GoDaddy was within budget and the website builder was easy to use, it lacked many of the customization features found in other website builders with a higher price point. This limited our design options and prevented us from implementing certain features, such as a search bar for the “Find a Lawyer” page. Due to this limitation, I found myself designing to the capabilities of the website builder, rather than to the needs of the user. In the future, I plan to recommend that clients utilize Wix, Squarespace, WordPress, Webflow, or other comparable CMS platforms, depending on their budget and ability to maintain the website after the project ends.
Underestimating the Challenges of Working with an All-Volunteer Board
The BCBA is volunteer-run, so everyone I worked with on this project had other jobs and obligations. When planning my initial timeline, I did not anticipate the amount of time the client needed to review materials. This resulted in extending the project timeline by three months. Moving forward, if I am working with another volunteer-run non-profit organization, I will allow for additional response time in my project planning.
Integrating Face to Face Interactions to Compliment Surveys
Due to requests from the client, we conducted a survey and an unmoderated usability test for our user research including for the usability testing phase. This presented one major challenge: users tended to be less engaged in unmoderated usability tests and behaved less realistically without a moderator. In the future, I will advocate for more face-to-face user interactions (either digitally or in-person) such as interviews and moderated usability testing to hear directly from users both early on and later in the project.
.png)