SUPERabled is a web-based app designed for tablets and iPads that creates personalized stories for its users. It aims to empower differently-abled children by offering stories that enhance reading comprehension and build self-worth, empathy, and a sense of belonging. The app specifically supports children with mobility challenges, limited or no vision, and those requiring visual aids due to limited expressive language.
To align our design approach with the client's vision, we engaged deeply with them to understand their goals. Accessibility was a central focus, with a strong emphasis on fostering inclusivity and empathy for all students, regardless of their differences or abilities. A key element was incorporating AI to generate personalized stories that help each user see themselves represented in literature, promoting a love for reading and bibliotherapy. Additionally, the app needed to track reading comprehension and student progress to qualify for grant funding. With these insights, our goal was to develop an app that is accessible to users with mobility challenges, speech impairments, and visual impairments.
At the start of our SUPERabled project, we tackled key questions to shape our design.
AI Integration: We needed to clarify how AI would interact with users, generate stories, and determine the length and inclusion of images. This clarity was essential for our design templates, which relied on AI-generated content.
Accessibility: We focused on incorporating essential accessibility features while ensuring the app felt natural and inclusive, avoiding a sense of separation or “othering.” This required balancing functional accessibility with a user-friendly and engaging design.
Student Interface: We aimed to create an inclusive onboarding process adaptable to various tablet interfaces, accommodating different student needs and abilities.
These questions initially posed a significant challenge. Conversations with the client revealed a complex yet beautiful vision that needed careful organization and translation into a practical, usable design.
As a team, we began by drafting a simple sitemap to organize our design structure. We divided the sitemap into two main sections: the student portal and the teacher portal. Given that this is an educational app aimed at fostering representation and a love for literature, our initial focus was on the student experience.
We outlined the anticipated flow for the student portal: starting with onboarding, then moving to AI prompt input, generating the story, prompting student reflection, and culminating in a reward system. This flow was designed to create a seamless and engaging experience for the students.
VIEW SITEMAPWhile awaiting further technological clarity from the developers, we conducted a competitive analysis to inform our design approach and ensure our solution was both innovative and practical. Our competitive analysis provided valuable insights into existing apps and their approaches.
Epic and Reading Eggs demonstrated various features in educational and reading apps, showcasing different methods to engage users in learning.
Choiceworks and TD Snap highlighted key elements of accessibility and inclusivity, focusing on how to make apps usable for a diverse range of needs.
By tracking and evaluating these different features, we aimed to combine the strengths of each approach. Our goal was to design an app that not only offers educational value but is also visually appealing and user-friendly. This strategy helped us create a product that effectively addresses the needs of differently-abled children while fostering an engaging and inclusive experience.
We selected five expert participants to guide us in designing a user-friendly app. Our group consisted of a special needs aide, a certified behavioral analyst, two parents of children with autism, and a teacher specializing in neurodivergent children.
Our research aimed to clarify the design for three distinct interfaces: one for users with mobility issues, one for users with visual impairments, and one for users with speech impairments. We sought to understand how to tailor reading levels to individual needs, identify the appropriate accessibility features for each user type, and discover effective teaching methods that enhance reading skills, build confidence, and track progress.
Customize Reading Levels: Understand how to tailor reading materials to meet the needs of each user based on their reading level and cognitive abilities.
Identify Accessibility Features: Determine specific features required to accommodate users with mobility issues, visual impairments, and speech impediments in a reading app.
Enhance Teaching Methods: Explore effective teaching methods that build confidence, improve reading comprehension, and maintain student engagement.
KEY INSIGHTS:
Short Chapters: Break reading materials into shorter chapters to help children feel accomplished and motivated to continue.
Gamification: Engage children by incorporating game-like elements and rewards into reading assignments to maintain interest.
Tailored Content: Assess each child’s reading level and cognitive abilities to customize materials and app interfaces to their specific needs.
Verbal Praise: Use verbal praise to build confidence and encourage continued effort in reading tasks.
After talking with the client, and given the 3-week timeline and the complexity of designing for diverse accessibility needs, we decided to concentrate on a single, unified interface tailored specifically for mobility challenges. This focus allows us to deliver a well-crafted, accessible solution that meets our persona's needs efficiently, while also ensuring we can address the intricacies of accessibility within our timeframe.
Jamie is an 11-year-old with mobility challenges who is learning to read and enjoys it when he finds engaging stories. He struggles with accessing books that are easy to manage and feature characters he can relate to. Jamie needs an app that supports his reading comprehension, helps him participate fully in classroom activities, and accommodates his mobility needs. He benefits from tools that enhance accessibility and provide a sense of accomplishment through short, game-like assignments and rewards.
With Jamie's needs in mind, we revisited the AI component of the app. The goal was to ensure that AI could generate appropriate and engaging stories tailored to Jamie’s preferences and needs.
We met with the developers to discuss the AI integration. They expressed a key constraint: the need to filter out inappropriate language while being confident in their ability to implement our design requirements.
Initially, we considered allowing open-ended student responses to the AI prompts.
But we shifted to a multiple-choice approach. This change was driven by the client's preference for a controlled input method and our goal to ensure a variety of story content.
By using multiple-choice options, we also addressed the language filtering concern and improved accessibility for students using speech-to-text technology. Students could simply select an option by saying a letter, streamlining the input process and making it easier for those with mobility or communication challenges.
With our goals clarified, we focused on designing the app's navigation and information architecture.
We opted for a straightforward bottom navigation bar with four main sections: Home, Rewards, Activities, and Mailbox. This design was based on our research and interviews, which highlighted these as essential features for the users.
The Home page was divided into two rows: one for user-generated stories and the other for Superabled stories. This setup allowed us to assess reading comprehension effectively, addressing a need that user-generated stories alone could not meet. By including both types of stories, we ensured that the app could track comprehension while also providing representation through literature.
To enhance engagement, we incorporated gamification elements. Users earn reward points for completing tasks and chapters, which they can use to customize their avatars. This approach was inspired by research showing that gamification boosts motivation and makes the experience more interactive and enjoyable.
The Activities page is where reading comprehension is tested. For Superabled series books, users complete multiple-choice questions to assess their understanding. For AI-generated stories, the app prompts users with reflection journals, encouraging self-empowerment and confidence.
For accessibility, we designed a customizable menu where users can adjust volume, brightness, text size, text position, and navigation preferences. We chose legible, large fonts that are easy to read, avoiding overly decorative styles to accommodate children with dyslexia or visual impairments.
Our onboarding process was crafted to be inclusive and engaging, using language that aligns with the Superabled concept of super tools and superpowers. This shared experience fosters a sense of belonging and inclusivity.
The app features a top navigation bar with customizable commands to support various user needs. We included speech-to-text and adjustable keyboard features to assist users with mobility challenges. Additionally, an adaptive keyboard with large keys and letter favorites reduces typing effort and improves navigation.
For the UI design, we chose a pastel color palette inspired by the client's existing logo. We adjusted the colors to be softer and more pastel to evoke a sense of joy and focus. Yellow was selected for its ability to enhance focus, while orange and pink provided a grounding effect. Blues and purples were used to create a soothing atmosphere.
The redesigned logo successfully captured the essence of the client’s vision, creating a modern, accessible, and engaging visual identity that resonated with the target audience and supported the app’s goals.
For the typography, we chose The Fruit Star for its bubbly and playful look, perfectly aligning with the app's fun and engaging tone. We paired it with Pemanka, a font known for its easy readability, ensuring that the content remains accessible and comfortable to read for all users. This combination creates a balance between visual appeal and functionality, supporting both the app's design aesthetics and its commitment to inclusivity.
Our goal was to ensure that the app's color scheme and typography contributed to a playful and engaging experience. The combination of colors was designed to create a visually appealing environment that promotes ease of use and supports the app’s gamification elements.
As we move forward, several key areas will require attention and refinement:
Integration and Clarity: Initially, our designs for onboarding, AI story generation, and reflection pages felt disconnected. Our goal is to unify these elements more seamlessly.
Refinement: We will continue to adjust the AI features based on feedback, ensuring they are user-friendly and effectively integrated into the overall design.
Teacher Portal: Building the landing page for the teacher portal is crucial, as it supports the educational aspect of the app.
Journaling Prompts: We need to explore different interfaces for journaling prompts and refine the questions to better support self-reflection and confidence building.
Usability Testing: Conducting usability testing with children who have mobility issues will help validate the app's effectiveness and identify areas for improvement.
Content Consolidation: Streamlining the AI prompts to reduce the number of pages will help maintain user engagement and focus.
Accessibility Enhancements: Implementing features such as word highlighting, adjustable fonts, and consulting with accessibility experts will ensure the app meets all user needs.
Image Cohesion: Hiring an illustrator to create consistent and high-quality images will improve the visual coherence of the app.
UX Content Collaboration: Working with the UX content team to ensure the app’s language is developmentally appropriate and tailored to each child's cognitive needs is essential for creating an effective educational tool.
After presenting the final design, we received positive feedback from the client. They appreciated the focus on accessibility and the thoughtful integration of AI for generating personalized stories. The client was particularly pleased with how the design addressed mobility challenges while maintaining a playful and engaging user experience.
Overall, the client felt that the design successfully brought their vision to life, creating an inclusive and supportive environment for differently-abled children to enhance their reading skills and build confidence. The focus on a unified interface for mobility challenges was also well-received, given the time constraints and complexity of accessibility requirements.
This project with SUPERabled was transformative for both our team and the client. We started by understanding their vision for an accessible app that empowers differently-abled children. Through competitive analysis, interviews, and iterative design, we developed a solution to enhance reading comprehension and build self-worth through personalized stories.
Working with SUPERabled brought unique challenges, including AI integration, balancing accessibility with design, and adapting based on feedback. Our decision to focus on a unified interface for mobility challenges, given the three-week timeline, reflected our commitment to creating a meaningful user experience. This collaboration emphasized the importance of aligning design with core values and being flexible in refining our approach.
