What Makes Website Designs Accessible?

What Makes Website Designs Accessible?

5 UX Tips from a Redesign Project

A great website isn’t just beautiful, it’s accessible. It guides users effortlessly, communicates clearly, and reflects a brand’s identity while meeting measurable goals like engagement and conversion.

When I joined Framework Digital (FD), I had the opportunity to lead the redesign of their website at a pivotal time. The project was part of a larger rebrand, with new colours, typography, and a refreshed logo already established. My challenge was to translate that brand identity into a user-centred website that performed better than its predecessor. Here are five user experience (UX) lessons from that process that can elevate any web design project.

 


 

1) Empathise with users early-on

Before touching the interface, I focused on understanding the audience. Through user interviews and empathy mapping, I explored how visitors felt while navigating the site; what confused them? What worked? And, what caused friction?

This revealed critical issues: inaccessible heading structures, inconsistent font styles, and a content-heavy navigation system that risked cognitive overload.

Tip: Don’t start by designing… start by listening. Empathising with users early helps uncover invisible barriers that data alone can’t show.

Image: Empathy map


 

2) Define the Problem Clearly

With insights in hand, I moved into the Define stage of Google’s UX process. The main challenge wasn’t visual; it was clarity and usability. The existing website struggled to convert because visitors couldn’t quickly find what they needed or trust the experience.

By defining the problem, “How might we create a clear, accessible, and conversion-focused website that reflects FD’s rebrand?”. Every design choice became grounded in purpose.

Tip: A well-defined problem statement prevents feature creep and keeps both stakeholders and designers aligned.

Image: Personas.


 

3) Mobile-first, then scale up!

This redesign adopted a mobile-first approach, starting with small screens and scaling up to desktop. Designing for mobile first forced clarity. Only essential content and interactions made the cut.

As the layouts expanded to desktop, the design gained depth without losing focus. This method also helped ensure accessibility and faster load times across devices.

Tip: Start small. Mobile-first design naturally prioritises content hierarchy, performance, and user clarity.

Image: app mockup. 


 

4) Prototype with Stakeholders

From the start, I onboarded stakeholders and clients into the design process. Low-fidelity prototypes allowed them to visualise ideas early, fostering collaboration and reducing revisions later. Remote testers also provided real-world feedback that informed content hierarchy and interaction design.

Tip: Prototype early and share often. Collaboration builds ownership and uncovers issues before they reach development.

Image: AB Testing.


 

5) Test Continuously

Designing doesn’t end at launch. Using heat maps and Google Analytics 4 (GA4), I evaluated how the redesigned site performed against its goals: tracking engagement, conversion rates, and user flow. The data guided continuous improvements, ensuring the design evolved with user needs.

Tip: Treat testing as an ongoing feedback loop. Data and usability insights are your best design partners.

Image: Heat Map.


 

Bringing it all together

A great website balances brand expression with user needs. It’s empathetic, focused, mobile-friendly, collaborative, and data-driven. By following Google’s five-stage UX process, Empathise, Define, Ideate, Prototype, and Test, you can transform a standard site into a meaningful experience that connects and converts.

Image: Google UX.

Image: Previous designs. 

Image: Data-driven, new designs. 

Back to blog