Case Study / Website
Hope Academy
Project Type: Website Re-design
Website Link: hopeconcord.org
Duration: 8 Weeks
Role: UX UI Designer, Art Director
Introduction
Hope Academy is dedicated to fostering confident, compassionate, and critical thinkers by offering a multi-sensory learning approach for students with language-based learning differences, such as dyslexia. Serving grades three through eight, the academy utilizes research-based practices to customize educational programs in language arts, math, history, drama, science, and enrichment classes.
To further its mission, Hope Academy has redesigned its website with a strong emphasis on dyslexia-safe design principles. This case study explores how the website’s design incorporates research, including eye-tracking studies, to enhance accessibility and usability for individuals with dyslexia.
Design Objectives
-
Accessibility and Readability: The primary goal was to create a website that minimizes visual stress and maximizes readability for users with dyslexia.
-
User Experience: Ensure the site is easy to navigate, with intuitive interfaces and a logical flow of information.
-
Inclusivity: Design elements were chosen to support a diverse range of learning preferences and abilities.
Design Features
1. Typography and Font Choice
-
Font Selection: Dyslexia-friendly fonts, such as OpenDyslexic, are used to reduce letter confusion and improve readability. These fonts feature distinctive letter shapes that help users differentiate between similar characters.
-
Text Size and Spacing: Larger text sizes and ample line spacing are employed to minimize visual crowding and enhance readability.
2. Color and Contrast
-
High Contrast: The color scheme incorporates high-contrast text and background combinations to ensure clarity and ease of reading for users with visual processing differences.
-
Background and Text Colors: Soft background colors are used to reduce glare, while maintaining sufficient contrast with text to facilitate easier reading
3. Layout and Design
-
Clear Navigation: The website features a straightforward navigation structure with clearly labeled sections. Consistent placement of menu items aids users in locating information efficiently.
-
Visual Hierarchy: Important information is highlighted using bold headings and visual cues, assisting users in scanning content and identifying key details.
4. Icons
-
Simple and Clear Icons: Icons are designed with simplicity and clarity in mind. Each icon is straightforward, using minimalistic shapes and high-contrast colors to ensure easy recognition and comprehension.
-
Consistent Use: Icons are used consistently throughout the site to represent common actions and information categories, helping users quickly understand and navigate different sections.
-
Descriptive Labels: Each icon is accompanied by descriptive labels to provide additional context, aiding users who may have difficulty interpreting visual symbols alone.
DRAMA
SCIENCE
ENRICHMENT
5. Multisensory Elements
-
Audio Support: Text-to-speech functionality is available to support auditory learning preferences, allowing users to listen to content if reading is challenging.
-
Interactive Features: Interactive elements such as buttons and icons are designed with clear, simple graphics to facilitate user engagement and understanding.
6. Research-Based Enhancements
-
Eye-Tracking Studies: The design process incorporated findings from eye-tracking research to understand how individuals with dyslexia visually process information. This research guided decisions about text placement, spacing, icon design, and navigation to align with natural reading patterns.
-
User Testing: Usability testing with individuals who have dyslexia was conducted to refine the design and address specific needs and preferences, ensuring a more user-friendly experience.
Interface Design:
Design Features
-
Improved Readability:
The use of dyslexia-friendly fonts, high-contrast colors, and clear text layout has enhanced the readability and accessibility of the website for users with dyslexia.
-
Enhanced Navigation:
The intuitive design, including simple and clear icons, and logical information flow has facilitated easier navigation and a more seamless user experience.
-
Increased Engagement:
By incorporating multisensory features and research-based design principles, the website better engages users and supports their learning preferences.
1
65%
78%
2
45%
68%
3
92%
70%
[ ! ] Scenarios:
1- Improved Readability
2- Enhanced Navigation
3- Increased Engagement
Conclusion
The redesigned Hope Academy website stands as a model for how dyslexia-safe design principles can create an inclusive and supportive online environment. The thoughtful application of readability, accessibility, and user experience considerations, including the use of clear icons and multisensory features, aligns with Hope Academy’s mission to empower students with language-based learning differences. The integration of research findings and user feedback has resulted in a valuable resource that enhances the educational experience for all users.
