AL-ANON FAMILY GROUPS
Redesigning the Al-Anon website to establish a clear path to resources.
Year: 2024
Duration: 65 hours
Role: Sole UX/UI Designer
THE CONTEXT
Over half of all American adults have a family history of problem drinking.*
Coping with a loved one’s alcohol use disorder (AUD) can be isolating, emotionally draining, and leave individuals feeling helpless. Al-Anon Family Groups offers a global support network designed to compliment professional treatment through group meetings and literature. Their belief is that AUD is a family disease that can be resolved through changed attitudes.
80% of users are unaware that resources like Al-Anon are available to them.
THE PROBLEM
Al-Anon’s existing website is not optimized for easy exploration or quick access to resources. Without clear visual hierarchy or accessible definitions, users face overwhelm and barriers to the support they seek. Al-Anon in turn could suffer low engagement and funding opportunities. Let’s see if we can help.
The Goal
HIGHLIGHT THE ORGANIZATION’S PURPOSE WHILE REDUCING FRICTION BETWEEN USERS AND THE SUPPORT THEY NEED
THE RESEARCH METHODS
So, how can we find out what support is most valuable to users?
Before designing begins we want to learn what new and existing members value about Al-Anon’s resources to improve upon their experience. Our assumption is we’ll need to streamline meeting registrations and the bookstore, as well as modernize the overall look and feel of the pages. We used a few research methods to test this theory.
Competitor Analysis
A competitor analysis was conducted with four similar organizations to identify industry standards and opportunities. It’s clear there is a lot of useful information and educational materials to be shared, but can access be streamlined?
Strengths
Clear introduction with trust-building and straightforward copy
Neutral and approachable visuals
Consistent UI
Weaknesses
Excessive header navigation
Overuse of industry jargon
UsABILITY TESTS
To gauge how real users interact with the existing platform, participants were asked to partake in a usability test with the following tasks in mind.
Learn about Al-Anon and what it offers
Make a donation
Search for a meeting in your vicinity and virtually
Browse the offered literature
Immediate feedback was gathered by observing their behaviors.
4 of 5 users found the imagery to be off-putting
4 of 5 users felt there was an excessive use of acronyms with no clear definitions
5 of 5 users felt information overwhelm
5 of 5 users experienced confusion navigating the website for one or more task flows
USER INTERVIEWS
We furthered our qualitative research by speaking with five participants one-on-one. The aim was to gain deeper understanding of their goals, needs, and pain points through the following questions:
What has prompted you to seek support? What motivates you to engage?
Has anything prevented you from seeking resources in the past, whether online or in person?
What information would you find most useful on a landing page?
How do you see support being maintained or evolving?
How important is privacy to you in the process?
“I WAS UNSURE WHERE TO NAVIGATE AND NEEDED GUIDANCE ON THE NEXT STEPS.”
“The layout feels unapproachable, I don’t know where to start.”
THE RESEARCH SYNTHESIS
Collecting and sorting the results for analysis.
With our three research methods behind us, it was time to turn the raw data into actionable insights.
AFFINITY MAPPING
Research insights were grouped to concentrate on common and high-impact areas. We identified why users were motivated to seek out resources like Al-Anon, what hindered their engagement, and what would support their journey.
PERSONAS
The process of affinity mapping informed two personas, who would represent the target market and be a constant guide in the design process. While The Skeptic requires action steps and The Hopeful requires validation, both have limited time and a fear of being exposed.
KEY finding 1
People approach resources with a desire for change and/or action steps. We need to ensure users can identify the support that is available to them. More definitions, less unexplained acronyms.
Key finding 2
Users seek efficient access to information and self-directed learnings. Time is limited so navigation needs to be swift, especially if their loved one is nearby.
key finding 3
Users feel privacy and anonymity is important to uphold for both themselves and their loved one. The subject is sensitive and nuanced, so we need to build trust to encourage engagement.
key finding 4
Users require calm and clean UI. Photos of frustrated or upset people is deterring for curious newcomers and stress-inducing for returning members seeking relief.
How might we
expedite access to information by limiting clicks to available resources?
How might we make next steps approachable by organizing primary actions?
How might we protect user privacy and allow them to navigate discreetly through neutral UI?
How might we encourage learning by organizing information architecture, visual hierarchy, and clearly defining terminology?
THE ROADMAPPING
Detangling existing architecture to prioritize features.
Design opportunities were then prioritized with the project timeline and scope in mind; arguably the most challenging part of the process. Al-Anon’s existing platform was extremely dense, which we knew from our research caused cognitive overload and needed to be resolved. We referred back to all research insights and iterated on the information architecture until a clear roadmap was established.
FEATURE ROADMAP
Landing page with clear CTAs
About
Meetings search & results
Resources
Bookstore
Donate
FAQs
Site map
This blueprint highlights navigation and content hierarchy. We visualized this relationship between pages to factor in the necessary features and to remove any redundancies.
Due to the project timeline and goals we chose to omit two pages from the existing website in our redesign. This was to concentrate on our personas’ needs.
For Professionals - materials for counselors, doctors, and teachers
Calendar - events offered by the parent group of Al-Anon, World Service Office
USER FLOWS
The final planning step was to get granular with two specific tasks:
Search for an in-person meeting
Browse resources
This process allowed us to identify potential obstacles and ensure smooth navigation for the user.
BRANDING
Reimagining a trusted brand.
One of our key research findings showed that users need a calm and clean UI. A participant explained, “The person arriving to the site has already felt stress and shame, and are now seeking answers.” Other participants shared that they didn’t want their private research exposed to onlookers. Our task was to develop a neutral look and feel.
We modernized the font but kept the original triangular logo to maintain consistency with other branches of Al-Anon. The center of the logo inspired the new circular hero illustration, which was woven through each page. To soften the subject matter the existing photography was replaced with curved icons or images of nature. And finally, we complimented the original primary blue with grounding neutrals and a proactive new accent color.
THE DESIGN
Building the wireframes and mockups.
Lo-Fi wireframes
Considering our goal of familiarizing people with Al-Anon and it’s resources, we focused on the landing page for the lo-fi wireframes. Visual hierarchy was explored in four different sketches with key objectives in mind:
Define Al-Anon and the available resources
Indicate clear and efficient action steps
Present opportunities for users to browse at their own speed
mid-Fi wireframes
We evolved the design into mid-fi wireframes and performed usability tests to check if we were on the right track. Users were asked to try three task flows:
Explore the landing page navigation options
Search and locate results for meetings
Browse resources
The good news was that all participants successfully completed the flows and found the navigation bars to be intuitive and clear. 60% of users noted that the language ‘Take the next step’ was helpful in context of the subject matter.
There was room for improvement, however, in the hero and definitions. 60% of users were unsure where the hero CTA ‘Learn More’ would lead. They were also curious how the ‘about’ page would differ from the landing page, indicating potential bloat.
Our next steps were clear:
Refine primary actions and CTAs
Simplify definitions and avoid repetition
Move resource videos to the resource page
Add FAQ section above base navigation on each page
Hi-Fi Wireframes & PROTOTYPE
Once again recalling our main objective, we made the following changes to create our hi-fi screens and prototype.
Confirmed the hero CTA as ‘Find a Meeting’
Moved the ‘Take the Next Step’ section higher, streamlining the path to action
Reduced repetition of ‘About’ by removing it from top navigation
Improved clarity by replacing content blocks with curved illustrations
TESTING & ITERATING
“The purpose of the platform was very clear and well-explained.”
We evaluated our hi-fi prototype with seven participants in an unmoderated usability test with Maze. Users were asked to move through the following tasks.
Search for in-person and virtual meetings
Navigate to resources and find a member story
Browse the Bookstore and make a selection
Gain a general understanding of Al-Anon
The results showed an 85% user satisfaction rating and an 100% task completion rate. Users Two quick wins were established.
remove confusion in section headers
While navigating to ‘Member Stories,’ a few participants thought the ‘Testimonials’ section might lead them to the right place, whereas these were just featured quotes. We removed the ‘Testimonials’ header to avoid confusion with the other resources.
adjust header font for added visual interest
Users were curious to see variation in the typography and noticed a few spacing concerns. To improve hierarchy and add visual interest to the pages we:
Replaced the header font with a serifed option
Increase the hero description text size
Decrease the spacing between page titles and content on the ‘Resources’ and ‘Bookstore’ pages
The Solution
“EASY TO NAVIGATE AND FIND WHAT YOU NEED”
FINAL THOUGHTS
Iterate on the design early and often.
A potential high effort and high impact iteration that emerged from the usability test would be to change the hero title and image. 28% of users thought this would better transfer the mission upon first visiting the platform. Further improvements would be seen by completing the ‘Contribute,’ ‘For Professionals,’ and ‘Calendar,’ pages.
Takeaways from this project included:
When possible, conduct a practice interview. We found by the second or third interview that a certain order of questions would yield the most insights. Don’t waste an interview on these tweaks.
Don’t overthink lo-fi wireframes. Focus on the information architecture and visual hierarchy, as content and styling will enhance the rest.
Identify and build assets as early as possible. Component assets in your wireframe makes platform-wide changes easy as you continue to iterate.
Seek moderated and unmoderated feedback often.