Redesign

American Addiction Centers Website Redesign

Background đź“–
This redesign project was a major effort to transform the American Addiction Centers' website, focusing on accessibility, enhanced user experience, and the implementation of our newly developed design system. As one of the first projects to utilize this system, the redesign ensured a cohesive and scalable framework for delivering a new modern, user-centric website.

Key improvements included clearer navigation, more engaging content layouts, and accessible design elements, making it easier for all users to find the information they need. Upon completion, the project transitioned into a data-driven optimization phase, leveraging multi-variant testing to refine each page further. This iterative approach aimed to maximize user engagement and drive higher web lead conversions, solidifying the redesign's impact on both user satisfaction and business outcomes.

Project Details đź“‹

Role:
Product Designer
Project Timeline:
May 2020
Tags:

End-to-End

Responsive Web

Landing Page Design

Design System

User Interface Design

Homepage
The redesign of the homepage demonstrates several key improvements that enhance the user experience compared to the original design. The new design offers a modernized, user-focused approach with better structure, navigation, and accessibility. It balances content density, integrates emotional and visual elements to build trust, and provides a more engaging and intuitive experience.
1. Visual Design & Layout
Original Design: The original layout feels less structured and has uneven spacing. The focus on the hero section with the form feels somewhat overwhelming due to a lack of distinct grouping and whitespace.
Redesign: The redesign employs a more modern, clean, and organized layout with improved spacing and alignment. Sections are clearly delineated, making it easier for users to digest information.
2. Improved Navigation
Original Design: The navigation bar is present but appears minimal and lacks clear organization for quick access to critical sections.
‍Redesign: The redesign introduces a more prominent and well-structured navigation bar with dropdown menus and quick links (e.g., “Check My Insurance” and “Admissions Process”). This improves accessibility to key information.
3. Social Proof & Testimonials
Original Design: Social proof is present but feels understated and less impactful.
‍Redesign: Testimonials are highlighted prominently with star ratings and quotes, increasing trust and credibility.
4. Form Optimization
Original Design: The form appears in the hero section but is large and visually dominant, potentially intimidating users.
‍Redesign: The form is simplified and uses clear labels with concise fields, reducing friction for users to fill it out.
5. Trust Signals
Original Design: Trust badges and accreditations are present but less visually prominent.
‍Redesign: Trust badges and accreditations are clearly highlighted, reassuring users about the credibility and reliability of the organization.
Admissons Page
The redesigned Admissions page significantly improves the user experience by creating a more intuitive, accessible, and engaging journey for prospective patients and their families. These enhancements also position the page as a critical touchpoint for driving web leads and increasing patient conversions.
1. Visual Design & Layout
Original Design: The page relied heavily on static text blocks with minimal visual aids, making it appear dense and less engaging. The vertical flow of information was monotonous and lacked visual hierarchy.
‍Redesign: The redesign uses a cleaner layout with improved typography, illustrations, and white space. It incorporates visual elements and expandable sections, breaking up content into more digestible pieces.
2. Clearer Information Architecture
Original Design: The admissions process was presented in a sequential manner (steps 1-4), but the content lacked interactivity and required users to scroll through all details to understand the process.
‍Redesign: The steps are now presented in an interactive, expandable accordion format under "What are the steps for getting into treatment?" Each step is concisely described, and users can expand sections for additional details.
3. Use of Multimedia
Original Design: The page was static, with no dynamic content to engage users.
Redesign: The redesign includes a video component explaining the admissions process, catering to visual and auditory learners.
4. Addition of Payment Options
Original Design: The page lacked personalized content, providing only a general explanation of the admissions process.
‍Redesign: The redesign includes a "What to Expect" section with specific guidance for different audiences, such as families, parents, co-workers, and veterans. This content is presented in collapsible sections for easy access.
5. Addition of Payment Options
Original Design: Payment information was limited, requiring users to infer or find details elsewhere on the site.
‍Redesign: A dedicated "Payment Options" section clearly outlines choices like health insurance, financing, and private pay, using visually distinct cards with actionable buttons like “Check My Coverage.”
Editorial Page
The redesign of the editorial page brings numerous improvements to the user experience, focusing on readability, navigation, and engagement. By improving navigation, readability, personalization, and interactivity, the redesign effectively supports users in understanding their situation and taking the next steps in seeking help. These changes make the content more accessible and actionable for a diverse audience.
1. Visual Design & Layout
Original Design: The original design features heavy text blocks, minimal whitespace, and dated styling. It lacks visual elements that make the content engaging.
‍Redesign: The updated design is cleaner, with structured content blocks, ample whitespace, and visual enhancements like icons, illustrations, and buttons. This creates a more inviting and professional look, reducing visual clutter.
2. Improved Content Layout
Original Design: Content is presented in large, dense paragraphs, which can be overwhelming and hard to skim. Important points are buried in the text.
‍Redesign: The redesign uses concise sections with clear headings, subheadings, and bullet points. Key information is highlighted and broken into digestible chunks, making it easier for users to scan and find relevant details.
3. Content Personalization and Relevance
Original Design: The page has a general tone and approach, without addressing diverse user needs directly.
‍Redesign: The redesign adds sections like "Am I Addicted to Alcohol?" and includes an alcohol use self-assessment. This personalization caters to users who might be unsure about their situation, making the content more relatable and practical.
4. Navigation Improvements
Original Design: Dense text and small font size make it challenging for users with visual impairments to read comfortably.
‍Redesign: Larger font sizes, better color contrast, and improved spacing enhance readability and accessibility, catering to users with different needs.
5. Accessibility Enhancements
Original Design: Limited focus on credibility, with few visible trust signals or authoritative references.
‍Redesign: The redesign prominently displays the author and medical reviewer, along with a last-reviewed date. This increases trustworthiness by showing the content is medically accurate and up-to-date.
6. Improved Trust and Authority
Original Design: Limited focus on credibility, with few visible trust signals or authoritative references.
‍Redesign: The redesign prominently displays the author and medical reviewer, along with a last-reviewed date. This increases trustworthiness by showing the content is medically accurate and up-to-date.
Treatment Center Hub
The redesign of the treatment center hub page introduces significant user experience improvements by focusing on usability, content clarity, and visual enhancements. These changes guide users through the discovery process more effectively and make it easier to compare, learn about, and take action regarding treatment facilities.
1. Visual Design & Layout
Original Design: The original layout is utilitarian. The page looks crowded, with minimal spacing between elements.
‍Redesign: The redesign features a modern aesthetic with larger, more visually appealing treatment center cards. Icons, illustrations, and updated typography improve the page's overall appearance.
2. Personalization Options
Original Design: The page lacks tools or prompts to help users find the right facility for their specific needs.
‍Redesign: The addition of the "Discover which AAC facility fits your needs" section offers tailored options based on preferences like "I need individualized therapy" or "I prefer luxury treatment." This makes the experience more user-centric and helps users find the most relevant information quickly.
3. Information Accessibility
Original Design: Each facility card includes basic details but does not present user reviews, which are critical for building trust and credibility.
‍Redesign: Facility cards now include ratings and reviews (e.g., “5.0 based on 120 reviews”), which adds credibility and allows users to make informed decisions at a glance.
4. Inclusion of FAQs
Original Design: No FAQ section, leaving users with unanswered questions about treatment centers or the admissions process.
‍Redesign: A "Frequently Asked Questions" section at the bottom addresses common user concerns directly, reducing friction in decision-making and minimizing the need for external searches.
Facility Profile Page
The redesigned facility profile page provides a much-improved user experience by prioritizing clarity, usability, and engagement. The inclusion of reviews, interactive features, and detailed staff profiles makes the page more trustworthy and informative, while the modern visual design and structured navigation enhance overall accessibility.
1. Visual Design & Layout
Original Design: The original design is visually cluttered, with inconsistent typography and a lack of modern design aesthetics. The visuals and content feel disjointed.
‍Redesign: The redesign features a polished, modern design with consistent fonts, ample white space, and better alignment. It creates a professional and approachable look that builds trust and makes the page more inviting.
2. Improved Facility Information
Original Design: Facility details are scattered and presented in long paragraphs, making it hard for users to locate key information.
‍Redesign: The redesigned page organizes facility information in a concise and digestible format, with a prominent header displaying ratings, address, and quick actions (e.g., “Take a Tour,” “Check My Coverage”). This makes critical information immediately accessible.
3. Addition of Reviews
Original Design: User reviews are absent, leaving potential clients without the benefit of social proof.
‍Redesign: The redesign incorporates a "Facility Reviews" section with star ratings and testimonials. This builds trust and provides credibility, helping users make informed decisions.
4. Focus on Services
Original Design: The explanation of services and programs is lengthy and lacks visual differentiation, making it less engaging.
‍Redesign: Services are organized into clear categories (e.g., "Services & Treatment," "Specialized Programs"), with checkmarks and icons to highlight offerings. This makes the content more scannable and engaging.
5. Highlighting Staff and Expertise
Original Design: There is no mention of the facility staff, which can make the page feel impersonal.
‍Redesign: The redesign introduces a "Facility Staff" section with names, photos, and titles of key personnel. This adds a human touch and instills confidence by showcasing the expertise of the team.
6. Inclusion of Statistics
Original Design: The page lacks data or statistics about the facility.
‍Redesign: The redesigned page includes a "Our Stats" section, showcasing metrics like the number of patients treated, registered nurses, and care managers. This builds confidence in the facility’s credibility and scale.
Verify Insurance Page
The new "Verify Insurance" page is a critical addition to the website, addressing a previously non-existent functionality. This new functionality not only addresses a previously unmet need but also has a significant impact on generating high-intent leads and driving patient admissions, making it a valuable addition to the website.
1. Visual Design & Layout
Original Design: The original design is visually cluttered, with inconsistent typography and a lack of modern design aesthetics. The visuals and content feel disjointed.
‍Redesign: The redesign features a polished, modern design with consistent fonts, ample white space, and better alignment. It creates a professional and approachable look that builds trust and makes the page more inviting.
2. Improved Facility Information
Original Design: Facility details are scattered and presented in long paragraphs, making it hard for users to locate key information.
‍Redesign: The redesigned page organizes facility information in a concise and digestible format, with a prominent header displaying ratings, address, and quick actions (e.g., “Take a Tour,” “Check My Coverage”). This makes critical information immediately accessible.
3. Addition of Reviews
Original Design: User reviews are absent, leaving potential clients without the benefit of social proof.
‍Redesign: The redesign incorporates a "Facility Reviews" section with star ratings and testimonials. This builds trust and provides credibility, helping users make informed decisions.
4. Focus on Services
Original Design: The explanation of services and programs is lengthy and lacks visual differentiation, making it less engaging.
‍Redesign: Services are organized into clear categories (e.g., "Services & Treatment," "Specialized Programs"), with checkmarks and icons to highlight offerings. This makes the content more scannable and engaging.
5. Highlighting Staff and Expertise
Original Design: There is no mention of the facility staff, which can make the page feel impersonal.
‍Redesign: The redesign introduces a "Facility Staff" section with names, photos, and titles of key personnel. This adds a human touch and instills confidence by showcasing the expertise of the team.
6. Inclusion of Statistics
Original Design: The page lacks data or statistics about the facility.
‍Redesign: The redesigned page includes a "Our Stats" section, showcasing metrics like the number of patients treated, registered nurses, and care managers. This builds confidence in the facility’s credibility and scale.
Contact Us Page
The redesigned "Contact Us" page significantly improves user experience through better structure, and accessibility features.
1. Visual Design & Layout
Original Design: The page lacks clear separation between sections. The contact information and form are visually cluttered and not well-organized, which could overwhelm users.
‍Redesign: The redesigned page uses a clean, structured layout with distinct sections for the helpline, inquiries, mailing address, and contact form. This separation improves readability and helps users locate information quickly.
2. Improved Form Design
Original Design: The form design is basic, with limited guidance or context about how to fill it out. Optional fields (e.g., phone number) are not clearly marked.
‍Redesign: The form now has clear field labels, placeholders, and indicators for required fields. It includes a dropdown for “Inquiring About,” which helps categorize user inquiries for quicker responses.
3. Accessibility Features
Original Design: The page lacks any mention of accessibility or features to support users with disabilities.
‍Redesign: The new page introduces an "Accessibility Statement," highlighting the organization’s commitment to inclusivity. It invites feedback and provides options for users with accessibility needs to reach out.
4. Addition of Trust-Building Elements
Original Design: The page provides contact information but lacks explicit reassurances about data security or privacy.
‍Redesign: The redesign adds a HIPAA compliance badge and reCAPTCHA protection, ensuring users that their information is secure and private.
Self-Reflection ❤️
One of the key achievements of this redesign was successfully transforming a static, text-heavy page into a dynamic, user-centric experience. By incorporating interactive elements like expandable sections and multimedia, we made the admissions process more approachable and digestible for users. Implementing our newly developed design system allowed us to maintain consistency, scalability, and brand alignment throughout the project, and it was rewarding to see how well it streamlined the design process.
‍
While the project was a success, it also presented challenges that became opportunities for growth. Balancing the complexity of the admissions process with a clean and accessible layout required multiple iterations and constant refinement. Designing for accessibility was another learning experience, as we worked to integrate inclusive features like better contrast, larger fonts, and responsive elements while maintaining visual appeal. If I could revisit this project, I would dedicate more time to user research, incorporating interviews to gain deeper insights into the emotional and practical needs of users. This experience reinforced the importance of empathy, collaboration, and iterative testing in creating impactful designs, and it has left me better equipped to tackle future projects with a user-first mindset.