Overview
Research & Planning
Initial Testing Methods:
• Survey of ~12 newsletter subscribers (ages 18–75)
• 6 in-depth interviews across different age groups
• Accessibility audit using WCAG and manual testing (keyboard-only, screen reader)
Both want:
• Up-to-date Information
• Details on the organization’s mission, impact, and schedule.
• Transparency on the organization’s utilization of donations.
Who Are Our Users?
Based on our user research we created personas for our main types of users. We then used these personas to go through a user flow they would take and listed perceived pain points from their perspective.
Design & Prototyping
🧠 Brain storming:
Before we started on wireframes, we ran a crazy 8s exercise and, as a team, explained the value of our design ideas. We only allowed ourselves to voice thoughts that were rooted in research or design practices, thus leading to engaging discussions.
👩💻 Design system
• Readable Typography: We used large, high-contrast sans-serif fonts with generous line spacing to reduce visual strain.
• Color Contrast: All text met or exceeded WCAG AA contrast standards to support users with low vision.
• Familiar Components: Buttons, links, and icons followed standard web patterns—ensuring they felt intuitive for users unfamiliar with digital interfaces.
• Focus States & Keyboard Navigation: Every interactive element was optimized for keyboard use and screen readers.
• Touch-Friendly Elements: We increased tap targets and spacing between items for users on mobile devices or with limited dexterity.
🌟 Final designs
We prioritized accessibility in every detail of the final design to ensure a seamless experience for all users, especially those with visual or cognitive impairments.
• Clear, Concise Content: Text was simplified for clarity and readability, reducing cognitive load across all age groups.
• Responsive Typography: Font sizes scale smoothly in dynamic displays, maintaining layout integrity and readability without breaking the page.
• Screen Reader Optimization: All headings, links, and interactive elements were properly labeled and structured to work effectively with assistive technologies.
These updates made the website more inclusive, intuitive, and usable—regardless of age or ability.
Results
View Next
Case Study
