Top of a website of the Knowbility Giving pages, showing a photo with several characters in costume at an accessibility event.

Knowbility Giving Website Design

Designing an Inclusive Giving Website for Knowbility

I recently had the pleasure of working on the design for the Knowbility Giving website, a project that underscores the importance of accessibility and inclusivity in digital spaces. The design process was both collaborative and fulfilling, involving close cooperation with the Knowbility team and leveraging the powerful design capabilities of Figma.

Knowbility Giving website design in Figma

Focus on Accessibility

From the outset, accessibility was a primary focus. Every aspect of the design, from wireframes to final touches, was crafted with inclusivity in mind. Key accessibility features included:

  • Tab and Reading Order: We meticulously organized the tab and reading order within the wireframes to ensure a seamless experience for users navigating the site via keyboard or screen readers.
  • Custom Icons: To visually represent diversity and inclusivity, we designed custom icons featuring guide dogs, individuals in wheelchairs, and the Knowbility Giving Tree.
  • Skin Tone Diversity: We included icons with different skin tone options to reflect a broad spectrum of human diversity. The skin tone labels used were: Light, Fair, Medium, Olive, Dark, and Deep, ensuring respectful and inclusive representation​.

Image shows the website footer with the tab order overlay

Image shows several custom designed icons showing guide dogs and people in wheelchairs and the Knowbility giving tree from the Knowbility logo

Custom icons with different skin tone options for diversity in iconography

Collaborative Design in Figma

The entire design process was executed in Figma, a tool that facilitated real-time collaboration with the Knowbility team. This collaborative approach ensured that every stakeholder’s feedback was incorporated, resulting in a well-rounded and user-centered design.

Figma’s features allowed us to:

  • Collaborate in Real-Time: Team members could make suggestions, leave comments, and see updates instantly, which streamlined our workflow and enhanced the design’s effectiveness.
  • Maintain Consistency: We used Figma’s design systems to keep the visual elements consistent and aligned with Knowbility’s brand identity.
Image shows a callout comment in Figma with the words: Thea Eaton: I used a dark grey that has been determined to be accessible for users with Irlen Syndrome. Source link at medium.com. Article by Tamer Okall, designers should avoid pure black topography. Response by Sharron Rush: Great thanks

Image shows a Figma collaborative comment

Final Thoughts

Designing the Knowbility Giving website was a rewarding experience that highlighted the importance of accessible design practices. By focusing on accessibility and inclusivity, we created a digital space that welcomes and supports all users. The collaborative nature of the project, combined with the capabilities of Figma, allowed us to produce a design that truly reflects Knowbility’s mission to promote digital inclusivity.

Visit the Knowbility Giving website to see the design in action and learn more about their incredible work in advancing digital accessibility. (New design still under construction)

References

  1. Pantone SkinTone Guide
  2. Interaction Design Foundation on UI Forms
  3. Livingetc on Color Trends