AB Therapy

Introduction & Rationale

When I first encountered the original AB Therapy website (www.abtherapy.co.uk), I noticed it had served well but began showing its age slow load times, a rigid grid, and a lack of mobile optimization. I decided to create a new site (www.abtherapy.online) to provide a seamless, modern experience that aligns with how clients seek therapy today. This case study reflects on my UX research, audits, design decisions and outcomes from that transformation.

UX Research Approach

To ground my redesign in real user needs, I combined quantitative and qualitative methods:

  • Stakeholder Interviews: I spoke with Aideen, the therapist and a user of the website. They expressed concerns about content management difficulties and wanted clearer therapist presentation.

  • Competitive Analysis: I reviewed three leading therapy sites notable for their empathetic imagery, clean typography, and streamlined booking flows (https://annaelstoncounselling.com/, http://www.drjoelowenstein.co.uk/, https://coralestherapy.com/)

From this research, I identified three guiding insights:

  1. Mobile usability is paramount. Users on the go need a fast, thumb‑friendly interface.

  2. Trust is built through transparency. Clear intuitive navigation coupled with clean aesthetics

  3. Simplified journeys increase conversions. Every extra tap reduces the chance of booking.

Stakeholders & Objectives

Primary Stakeholders:

  • Therapist (Aideen) seeking easy profile updates.

  • Prospective clients needing fast access to services.

  • Administrators requiring simple CMS integrations.

My Objectives:

  • Prioritize a mobile‑first, responsive design.

  • Strengthen brand trust through consistent visual language.

  • Streamline content management via a headless CMS.

  • Enhance site performance to load under 3 seconds globally.

Visual & UI Design Rationale

Color Palette:

  • I selected Teal #2A9D8F as the primary hue for its calming, trust‑evoking qualities.

  • Slate #264653 serves for headers, grounding content, while Coral #E76F51 highlights CTAs, drawing attention without aggression.

Typography:

  • Montserrat for headings: Its geometric letterforms convey professionalism and modernity.

  • Open Sans for body: Humanist proportions ensure legibility at small sizes and on retina displays.

  • Type Scale: A 1.25 modular scale means each heading incrementally guides the eye H1 (48px), H2 (32px), H3 (24px), H4 (20px), Body (16px, 1.5 line‑height).

Imagery & Iconography:

  • I chose authentic, diverse photos to foster relatability; all images are cropped and optimized

  • Custom SVG icons for key services maintain crispness across devices and load under 10kb each.

Heuristic Audit of the Legacy Site

In reviewing the legacy site against Nielsen’s heuristics, I noted:

  • Visibility of system status: No loading indicator for image‑heavy pages, leaving users uncertain.

  • Match between system and real world: Terminology like "Our Approach" blended with long copy, obscuring practical steps.

  • Consistency & standards: Varied button styles (“Book Now,” “Schedule”) confused clicks.

The audit validated my research: navigation confusion, typographic inconsistency and poor mobile performance.

Design Goals

Building on research insights, I framed five design goals:

  1. Mobile‑First & Responsive: Use a fluid grid

  2. Clear Visual Hierarchy: Employ a 1.25 modular type scale and consistent spacing (8px base unit).

  3. Accessible & Inclusive: Achieve WCAG for text, color contrast, and keyboard navigation.

  4. Brand Consistency: Use unified fonts, colors, and iconography to reinforce a reassuring tone.

  5. High Performance: Leverage image optimization, and lazy loading to maintain <3s full‑load times

A redesign of the website

Information Architecture & Navigation

I reorganized content to match user expectations:

  • Simplified Top‑Level Menu: Reduced to Home, About, Services, Therapists, FAQ, Contact. This aligns with feedback

  • Sticky Header: Keeps navigation within thumb reach; includes a persistent "Book Free Consult" button.

CONCLUSION

Through surface UX research and iterative testing, I successfully transformed AB Therapy’s online presence into a modern, user-cantered platform. Engaging directly with Aideen and truly listening to her needs enabled me to design a website that is not only visually compelling but also highly functional, trustworthy and effective in driving engagement and bookings. In future projects, I aim to conduct even more in-depth research, develop additional prototypes and implement more rounds of iteration before development to ensure an even more refined and impactful user experience

OLD WEBSITE VS NEW WEBSITE

VS

VS

FOLLOW ME ON SOCIAL MEDIA RIGHT NOW:

GOOD JOB!