Abide Coaching
Whole-person coaching for those who don't feel whole...yet!
Role: Sole UX/UI Designer, Researcher, Brand Strategist & Customer Experience Architect
Tools: Figma, Google Workspace, Gemini, Zoom
2024
In today's world, individuals with conditions like ADHD and Autism, who are neurodiverse, often face unique challenges navigating everyday life. This can be especially true when seeking guidance and support. Many traditional coaching resources lack the necessary understanding and inclusivity to truly cater to these specific needs. Recognizing this gap, I spearheaded the complete website redesign and rebranding of Abide Coaching, a coaching service dedicated to empowering neurodivergent adults. This project involved not only the website's user experience but also a holistic brand refresh, encompassing name development, color palettes, logo design, and overall messaging.
Please note: This portfolio section is a quick overview, designed to parse through more quickly. For the full project details please click the button below.
At a Glance: Homepage Before and After
This project involved a complete overhaul of a website originally known as 'Big Bang Coaching' and later rebranded as 'Abide Coaching.' The site’s previous design struggled with fundamental UX issues, including confusing navigation, inconsistent terminology, and overwhelming content presentation. These challenges were especially problematic for the site’s neurodivergent audience, who require clarity and ease in navigating online spaces. Through thoughtful redesign and user research, I transformed the website into a more intuitive and accessible resource, focusing on simplifying the user experience while maintaining the coach’s (Sheila) desire for transparency and credibility. The before-and-after comparison of the homepage illustrates this shift from a cluttered, outdated design to a streamlined, user-friendly platform
From the beginning, I felt deeply connected to this project, knowing it could truly impact neurodivergent individuals like myself. The existing site’s confusing navigation and overwhelming content weren’t just usability issues—they were barriers to users feeling understood and supported.
My goal was to create a space that felt intuitive and welcoming. By grounding the redesign in empathy and user research, I transformed the site into one that truly serves its audience, giving users the clarity and ease they need to focus on their personal growth
Stakeholder Insights: Understanding Sheila's Vision and Concerns
My initial meeting with Sheila, the owner and coach behind Abide Coaching, proved invaluable. This conversation allowed me to gain a deeper understanding of her vision for the website, her concerns about the redesign process, and the driving force behind her passion.
While initially apprehensive about some of my initial suggestions, Sheila's apprehension was understandable. After all, she wasn't familiar with the intricacies of UX/UI design. To bridge this gap, I emphasized a collaborative approach, assuring her that she would have final say on all decisions.
During our conversation, Sheila's dedication and passion became abundantly clear. She shared her personal story, revealing a deep understanding of the challenges faced by neurodivergent individuals. This personal connection, rooted in her own family's experiences, fueled her desire to create a supportive and empowering space for her clients.
By actively listening and building trust, I was able to establish a strong foundation for the project. Understanding Sheila's vision, both for the website's aesthetics and her overall mission, would be crucial for creating a solution that resonated with both her and her target audience.
Stakeholder Interview Insights:
Client Acquisition: Sheila's primary client base came from referrals, indicating a strong reputation within her network.
Marketing Focus: She expressed a disinterest in traditional or social media marketing strategies, prioritizing a user-friendly website for existing referrals and clients.
Target Audience: Her primary client demographic consisted of adults with ADHD, followed by individuals with Autism. Her third largest serviced demographic were parents of neurodivergent children.
Abide Coaching: The Before
The original website, formerly known as 'Big Bang Coaching,' struggled with basic UX standards. Disorganized content and clunky navigation made it difficult for users—especially neurodivergent individuals (the websites target demographic)—to find what they needed. Confusing design elements, like hyperlink-style colors, added to the challenge, particularly for users with ADHD.
As someone with ADHD, I understand these struggles firsthand. My design expertise and experience working with this community made this project a perfect fit. I was eager to transform the site, now called 'Abide Coaching,' into a user-friendly resource for its clients.
The Enigma of VAST: User Confusion and the Quest for Clarity
The use of the term 'VAST' (Variable Attention Stimulus Trait) posed a unique challenge. During our initial interview, Sheila explained that VAST was a more empowering term for ADHD, aiming to reduce stigma. However, I raised concerns about user familiarity, as the site inconsistently switched between VAST and ADHD without clarifying the connection. This inconsistency risked confusing users.
We faced a balance between innovation and user-friendliness. While VAST represented a forward-thinking approach, its lack of recognition and inconsistent use created barriers to understanding. I highlighted that 'cutting-edge' doesn’t always mean 'user-friendly.'
To resolve this, I proposed user research to assess understanding of VAST and its communication on the site. This would help us decide whether to define VAST clearly, bridge the gap between it and ADHD, or drop it entirely. Though initially hesitant, Sheila agreed to test these assumptions, ensuring that both her vision and user needs were prioritized in the redesign.
Diving Deeper: The "About Me" Overload
The 'About Me' page posed a specific challenge. Sheila’s bio was dense and complex, followed by a long list of credentials, creating a user experience that felt overwhelming. While the information was valuable for establishing credibility, its presentation felt like 'drinking from a firehose.'
Sheila deeply wanted to showcase her extensive experience but believed the all text layout to be the most “simple and user friendly”. However it was my opinion this layout would lead to an overload of information.
I explained the concept of information overload and how it could be intimidating, especially for her neurodivergent audience. I proposed user testing to validate my observations and explore ways to present her credentials more clearly and engagingly, ensuring both transparency and user-friendliness.
Collective Interview & User Testing Analysis
A variety of demographics were needed to gain a comprehensive understanding of what needed to be addressed.
Neurodivergent User Challenges:
ADHD and Autistic users struggled with navigation, finding the website non-intuitive and overwhelming.
Need for concise, well-organized information and simplified layouts to reduce cognitive load.
The term "VAST" was unfamiliar to all users, confirming it should be dropped.
Industry and Networking Feedback:
Colleagues noted that the website didn’t reflect Sheila’s professionalism, with poor navigation and unclear calls to action.
Usability testing with industry professionals revealed significant issues, reinforcing the need for a redesign.
General Usability Issues:
Neurotypical users also faced navigation challenges, with the website perceived as cluttered and outdated.
The design was seen as overwhelming, potentially affecting the perception of Sheila’s services.
Client Frustrations:
Difficulty navigating the website led many clients to email Sheila directly for appointments.
Nearly half of the clients would have sought services elsewhere if not for strong recommendations.
Parental Concerns:
Parents, especially those of neurodivergent children, found the website frustrating, amplifying their anxieties.
Desire for clear articulation of Sheila’s services and a strong emphasis on her credentials.
Capturing Key Insights:
Detailed notes from user interviews provided a valuable record of key findings and insights, informing the design direction throughout the project.
Interview with Dr. Paul Austin, DC, CCSP, DACNB
To gain a deeper understanding of the user experience for those with ADHD, I sat down with Dr. Austin, a practicing physician specializing in ADHD treatment.
Making Sense of the Data: Affinity Diagramming
After conducting interviews and user testing, a mountain of data needed to be transformed into actionable insights. Affinity diagramming proved to be a valuable tool in this process. By revisiting interview notes and recordings along with user test observations, I categorized user feedback into various "buckets." These initial categories included:
Feelings/Emotions During Navigation
About Me Page Feedback
VAST vs. ADHD Terminology
What's Working Well on the Website
Copywriting & Page Organization
However, the "Copywriting & Page Organization" category rapidly grew due to the sheer volume of user feedback in this area. To further refine this category, I employed a technique called "progressive sorting." Essentially, I broke down the large category into three subcategories based on the nature of the feedback:
Unanswered Questions During Navigation: This sub-category captured instances where user testing revealed users encountering questions the website didn't address.
Copywriting & Navigation Bar Opportunities: This sub-category focused on specific areas where website copy or navigation bar improvements could enhance user experience.
Overall Dysfunctional Points: Here, I documented critical issues in website structure or content that significantly impacted usability.
The comprehensive user research phase yielded a wealth of insights into user needs, frustrations, and website shortcomings. To address these findings and enhance the user experience, a clear action plan was formulated. This plan focused on the following key areas:
From Insights to Action: A User-Centered Redesign Plan
Content Clarity and User-Friendly Copywriting: User feedback across all groups emphasized the need for clearer, more concise website copy. The plan called for a complete overhaul of website content, prioritizing easy-to-understand language and improved information architecture.
Intuitive Navigation and Relabeling: The existing navigation bar presented significant usability challenges. The plan outlined a complete restructuring of the navigation system, including clear labels and user-friendly terminology. Additionally, a more intuitive user path would be created to guide users efficiently to their desired information.
Addressing Unanswered Questions: User testing revealed a consistent theme of users encountering unanswered questions while navigating the website. To address this, the plan included creating a dedicated FAQ page to provide easily accessible answers to frequently asked questions.
Website Functionality and Minor Fixes: The plan also encompassed addressing minor website development issues identified during research. This could involve form optimization, improving responsiveness across devices, and ensuring overall functionality.
Branding Refresh and Visual Appeal: While user experience remained the top priority, the plan also acknowledged the need for a visual refresh. This involved updating the website's branding and color palette to create a more professional and contemporary aesthetic that aligns with Sheila's expertise
Colors and Logo: Unpacking the Desired User Experience
When Sheila described the emotions she wanted her website to evoke—nonjudgmental, safe, understood, hopeful, and rooted—these became the foundation for the design. The goal was to create a welcoming space where visitors felt acknowledged in their challenges and free to explore solutions. Rootedness, symbolizing stability and connection, was central to the design, reflected in imagery and her new tagline: "Abide Coaching - Rooted in Self Awareness, Relationships, and Community," which I helped refine through collaborative brainstorming.
Using Sheila's brand values, I created four color palette options. After initial feedback, we made adjustments to ensure the final palette captured her vision. Though logo design isn't my primary focus, I used my marketing experience to help explore logo ideas, ultimately guiding Sheila to a hand-drawn design that reflected her brand essence best.
Navigation Revamp: Prioritizing User Clarity
The website's navigation bar posed a usability challenge with unclear labels and a cluttered layout. To prioritize user clarity, a collaborative redesign process was undertaken with Sheila. User feedback informed intuitive and concise labels, while unnecessary elements were removed. The final navigation bar prioritizes a streamlined structure and clear information hierarchy, allowing users to effortlessly navigate the website.
Redefining "About Me": A User-Centered Approach
The "About Me" page design presented a unique challenge, evolving through the most iterations and demanding the most creativity throughout the project. The original page, a major user pain point, showcased a lengthy biography followed by an endless scroll of credentials. My initial aim was a user-friendly approach: a concise, segmented bio, an updated photo, and a visually appealing presentation of Sheila's credentials.
However, the project took an unexpected turn when Sheila provided not just one bio, but four – each tailored to specific client demographics. While acknowledging the value of her approach, a drop-down menu solution, as suggested by Sheila, presented usability concerns. We needed to strike a balance: honoring Sheila's desire for comprehensive information while avoiding user overload, especially for those with ADHD.
Accessibility remained paramount. After exploring various approaches, the final design emerged. The top section features a standard "About Me" format, with a concise, segmented bio and easily skimmable paragraphs. User needs were further addressed by presenting Sheila's credentials in a simple, quick-read format with clickable links for deeper exploration. User testing confirmed this approach, with users diagnosed with Autism particularly appreciating the availability of detailed information about Sheila.
The bottom section of the page tackles the remaining bios. Each bio is "chunked" for easy visual identification, allowing users to find information relevant to their needs and skip over irrelevant sections. Two clear CTAs ("Schedule with Sheila" and "Visit FAQ") are positioned at the bottom of the page, mirroring their placement on all website pages.
Included here are some photos of the brainstorming and iteration process in addition to the final product.
First Iteration Takeaways
Setting the Stage: High-Fidelity Prototype
The first iteration for user testing was a high-fidelity prototype. While not every detail was fully fleshed out, this approach offered several advantages. Firstly, it ensured adherence to project timelines and budget constraints. More importantly, it presented a more realistic model for user interaction, fostering more valuable feedback during testing.
Prior to user testing, the prototype was presented to Sheila. This facilitated minor modifications, such as updating button language to align with industry-specific terminology. Additionally, discussions focused on cost-cutting measures, including using hover states for buttons instead of full click animations. At this time I suggested color palette adjustments, In addition the session also involved collaborative brainstorming. We explored potential refinements for the homepage and other key pages, addressing questions I had about specific design elements.
Deliverables: Balancing Needs and Creativity
The project deliverables focused on high-fidelity, user-tested still frames, aligning with the website development company's preference. While a fully-clickable prototype wasn't initially required, I exceeded expectations by designing an interactive header for user testing purposes, providing valuable insights into user interaction patterns.
Furthermore, I delivered prototypes for all website components, including hover and still states for each element. This comprehensive approach went above and beyond the minimum requirements, ensuring a well-defined design system for the developers.
Streamlining User Experience: Building a Design System
To ensure a consistent and user-friendly experience, I adopted a strategic approach for the coaching pages. Recognizing Sheila's desire for website simplicity, I developed a design system for both individual and group coaching pages.
This system utilized a standardized blueprint, allowing for easy customization with unique content, photos, and details for each program. This efficient approach resulted in a cohesive website structure that effectively showcases Sheila's coaching services while maintaining a streamlined user experience.
Logo Considerations and Design Refinement
While Sheila's beautiful hand-drawn logo posed potential detail loss on smaller screens, this wasn't a major concern for her. However, I emphasized the illegibility of the slogan beneath the logo image at smaller sizes, proposing its removal and offering alternative placements for the slogan on the homepage. Sheila readily agreed to explore this option.
Refining the Color Palette
Upon seeing the initial color palette in the context of the design, we decided to refine it collaboratively. This collaborative approach ensured the final palette effectively conveyed the desired brand identity.
During a presentation to Sheila, I showcased various color options and A/B comparisons for the homepage design. This collaborative session facilitated informed decision-making about the website's visual direction.
Iconography Decisions
Sheila also requested the removal of all iconography from the first iteration. This decision streamlined the design and allowed the focus to remain on the core content and functionality.
Collaboration Beyond Design: Ensuring Development Feasibility
As the project progressed, a vital collaboration point emerged: a touch base meeting with the development company. While the initial project scope indicated full design flexibility in Figma, the meeting revealed that some intricate design elements would be considered "custom" and incur additional development costs for Sheila.
To ensure project feasibility and budget adherence, I initiated a conversation with Sheila to prioritize elements with the highest impact on user experience. We then discussed potential redesign options for more "standard" implementations, focusing on elements like the header and footer. This collaborative approach ensured the final design deliverables balanced user experience with cost-effective development considerations.
Effective project management and clear communication were essential for this project's success. While working independently, I maintained regular contact with Sheila to ensure alignment on design decisions and obtain timely approvals.
Furthermore, as the sole point of contact with the hands-off website hosting company, I delivered well-documented and comprehensive deliverables, ensuring a smooth implementation process. My proactive updates on project timelines, expectations, and potential roadblocks kept all stakeholders informed throughout the project lifecycle.
Designed with Users in Mind: The Final Iteration
Drawing on insights from user testing and discussions with Sheila, the final website iteration incorporates refined design elements and content, ensuring a clear, engaging, and impactful user experience.
Building a Cohesive User Experience:
Following client budget considerations, the final design focused on core components with both a steady state and hover state for enhanced user interaction. Maintaining a consistent color palette aligned with Sheila's branding ensured a visually cohesive experience. The intuitive design prioritizes both aesthetics and user-friendliness, reflecting Sheila's brand identity and enhancing user engagement.
Highlighting Flexibility and Clarity: The Final Homepage
For the final homepage iteration, I presented Sheila with two distinct options, offering both the "custom" design and a "standard" header and footer layout. This approach ensured she had a clear understanding of the design possibilities and their impact on development costs.
Maintaining user experience as a priority, the final homepage design strikes a balance between simplicity and functionality.
Key information for potential clients is easily accessible at a glance, without overwhelming them with too much content. User research and feedback played a crucial role in refining the layout, while Sheila's edits on colors, fonts, and verbiage ensured the final design seamlessly reflected her brand identity and coaching style.
Important To Note:
The grey section just below the header is a placeholder for some photography that was not delivered to me at the time of my deleverables being due. Sheila and her photographer were happy to redirect the necessary missing photos to the development team at a later time.
Streamlining for Clarity: The Coaching Page Blueprint
To ensure a consistent and user-friendly experience across Sheila's coaching offerings, I developed a comprehensive "coaching page blueprint" for both her individual coaching and group coaching pages.
While her coaching caters to diverse needs, a key insight from rewriting the copy throughout the website revealed the overall similarity in information required on each page. This realization led to the creation of the "coaching page blueprint," a standardized design framework applicable to both individual and group coaching pages.
This approach fostered simplicity and prevented user confusion by offering a consistent layout for each coaching program. The blueprint prioritizes clear communication by incorporating strong calls to action (CTAs) at the bottom of each page, encouraging user engagement. Additionally, all essential navigation elements are readily accessible within the header, ensuring a seamless user journey.
Bridging the Gaps: Collaboration and Deliverables
While the project scope focused on core website design, there were instances where collaboration with developers was necessary to ensure a cohesive hand off of information and design ideals. These "skeleton pages" served as communication bridges, outlining the intended design direction for specific functionalities.
This collaborative approach ensured developers understood the design vision and could seamlessly integrate third-party applications into the final website.
Similarly, the FAQ page was delivered as a "skeleton," focusing on layout and information hierarchy. This format, communicated through a separate PDF, facilitated easier implementation by the development team.
When delivering the final product, in addition to my Figma file, I included the requested PDF alongside the design itself, maintaining the intended order of questions for the final FAQ page.
Building Trust: A User-Centric "About Me" Page
The "About Me" page presented a unique challenge, explored in detail earlier in this portfolio.
Leveraging those earlier insights in addition to later acquired user feedback, the final iteration prioritized user understanding and emotional connection.
The focus shifted from intricate design elements to clear communication and a user-friendly layout.
This resulted in a page that was not only easy to navigate but also facilitated a positive user perception of Sheila.
Testers consistently highlighted the transparency and trustworthiness conveyed by the design.
Seamless Handover: Prioritizing Clarity and Efficiency
Exceeding expectations, the final deliverables went beyond the initial requirements. Recognizing the importance of a smooth handover, I meticulously organized the prototype, ensuring comprehensive and intuitive labeling for all components. This clear organization benefited both developers and the website hosting company, facilitating a seamless transition from design to implementation.
Building Trust and Confidence: A Website's Impact
This project's success extended beyond aesthetics. The final website empowered Sheila, fostering confidence in her brand identity and strengthening her digital presence. Existing clients will find navigating the website effortless, accessing key information with ease. For potential clients, the website now offers a more comprehensive picture of Sheila's expertise and the value she provides.
On a personal level, this project proved invaluable for my professional growth. It honed my client relationship management skills, emphasizing the importance of clear communication and collaboration. Additionally, it challenged me to become a resourceful problem solver, bridging the gap between client needs and user research findings. This combination of skills allowed me to create a user-centered design that truly resonates with Sheila's target audience.