Website design

Westminster Foundation for Democracy

Client

Westminster Foundation for Democracy (WFD) is the UK public body dedicated to strengthening democracy around the world. 

Audience

• Government Ministers
• Journalists
• Diplomats
• Staff

My role

• Design lead
• Creative direction
• UX lead
• UI design
• Stakeholder presentations
• Research
• User testing

Brief

To redesign and implement WFD’s website ensuring it:

• Meets WCAG 2.1 AA accessibility standards
• Improved the user experience
• Developed digital ways to share our publications
• Upgraded the CMS
• Improved brand trust



Approach

Working closely with internal stakeholders and the web development agency resources we took a Design Thinking approach to understand our user's needs, and organisational objectives to inform the information architecture and establish a content strategy to suit the audience. I was simultaneously updating the brand identity and used this opportunity to create a UI pattern library ensuring the colours used in the brand identity update met WCAG acceibility standards. I created a pattern library taking an Atomic Design approach, built prototypes using the components and content, and then tested with users before iterating the designs before it was built and deployed.   

wfd_page_designs_2
wfd_mobile_menu
wfd_mockup_01
Image of website homepage on tablet and mobile

Some of the methods used in the Double Diamond framework included: 

 

DISCOVERY:

  • Agency kick-off meeting - roles and responsibilities, and roadmap

  • Stakeholder kick-off workshops

  • UX maturity assessment (UX largely unknown - understand conditions and leverage points)

  • Review Accessibility audit

  • Internal knowledge gathering

  • Heuristic evaluation
  • Prototype personas

  • GA analysis

  • Product/platform scoping

  • Comparative analysis (digital reports)

  • Content discovery and audit

  • Design trends and forecasting

DEFINE: 

  •  Content review
  • Content refine
  • Functional requirements
  • Sitemap IA approach
  • Success criteria

  • Personas defined (this helped introduce UCD language and approach at WFD)

DEVELOP:

  • IA site map

  • Wireframes

  • Content refinement

  • Atomic Design approach

  • Pattern library

  • UI design (influenced by brand development)

  • Molecules, Components

  • WCAG AA testing
  • User flows
  • Top-level page designs

  • HiFi prototype 
  • User testing 

  • BERT testing

  • Analysis

  • Opportunities

  • Design iteration

DELIVER: 

  • Collaboration with Developers

  • Add content

  • Testing

  • Iterations

  • QA

  • Launch website

Selected Works

Referrals Product DesignCitizens Advice

User Interface DesignSave the Children

Website RedesignChange Grow Live

Contacts Mobile AppChange Grow Live

Website Blog DesignSightsavers

Annual ReviewSightsavers

Brand DevelopmentSightsavers

Brand RefreshChange Grow Live

Want to know more?

Send me an email at: 
tom@tommortondesign.com

© Tom Morton 2025