.svg)
end-to-end app design for disabled individuals to find community and opportunities near them with accessible design at the forefront
joinABLE accessible community app
June - July 2023
Product design
UX Research
Prototyping
Usability Testing
According to the CDC up to 1 in 4 or 27% of adults have some type of disability in the US. I myself have a disabled sibling and through my experience, I have seen the difficulties the community faces causing a desire to try and alleviate some of their pressing pain points, whether it be isolation, invisibility, or a lack of inclusive environments. This should say something about mint.
My goal was to create an end-to-end app where I could not only focus on accessible design elements, but make an entire app focused creating a more open and accessible world for a community that I respect and admire.
One of my observations is that the main difficulties the community faces is finding opportunities for inclusive activities and socialization. Between physical and mental barriers, a lack of public understanding, and a lack of inclusive resources, there can be limits to disabled individuals’ participation in activities. With programs and enriching activities geared towards the disabled and integrative communities creating purpose and fulfillment to all who participate, they are a valuable community resource that should be more accessible to all.
Human interaction, creativity, artistic exploration, and physical activity needs cannot fully be met exclusively within the home or even a classroom.
Special needs individuals are also often not included or have a hard time integrating in social events.
Inclusive and accessible programs are mainly found through word of mouth within the community. This is especially difficult when they age out of the public education system at the age of 22.
My proposed solution is to create a lifestyle application to allow disabled and special needs individuals and families to connect and create an inclusive community as well as a place for programs, businesses, and volunteers to communicate their offered opportunities to those in the community.
To start, I went with qualitative research in one-on-one user interviews in order to gain deeper understanding of the real experiences and challenges of users. Participants were recruited based on their involvement and roles in the special needs and disabled community.
First, user Interviews were conducted with 5 participants
of diverse backgrounds who are currently a part of or involved in the disabled and special needs community
were caretakers (including 1 disabled co-participant with some communication skills with their caretaker answering more complex questions) who had experience participating in a special needs and disabled focused program
had experience organizing and working with the special needs and disabled community
Following user interviews, I conducted competitive analysis in order to flesh out competition, which I hypothesized would be limited in nature due to the lack of resources, including digital resources for the disabled community. In reality, as hypothesized, there were very little social opportunities offered, but I was able to gain some valuable insight into the primary gaps in the competition.
The closest resource was a dating a social networking site and app, but this had more focus on one-on-one dating and socialization.
Through looking at competitor user statistics, the app will be geared to any gender or gender affiliation with a focus on users in their 20's and 30's.
Moving on to personas, with user interviews revealing a clear divide of two groups, personas were created accordingly:
A place for users to find opportunities and social circles and
A place where organizations and businesses can advertise their offered services and opportunities
A safe space for all involved in the community to be able to gather and support one another
Through competitive analysis I knew that since there were no equivalent experiences in related apps, so I wanted further insight and opportunities to empathize with the user before I proceeded to nail down a feature roadmap. I decided to utilize a User Journey Map in order to more accurately create a user-centric experience and understand the real-life opportunities that were available to determine the most relevant application features.
.svg)
The user journey process was eye-opening to the many thoughts, obstacles and needs of users in attempting to find programs and services. After examining the pain points and opportunities gleaned from this user journey, the key insights I gained are as below:
Based off of research, it was time to start tackling how to best meet the needs and address the pain points of the users in making focus points, starting off with POVs:
I’d like to explore ways to allow users in the special needs and disabled communities explore extracurricular, events, and social options because users have a hard time finding options near them.
I’d like to explore how to make programs, events, and gatherings as easily accessible to users as possible because users find information scattered across various resources and sites.
I’d like to explore how to allow organizations to provide information about their programs because organizations currently have to rely on members or smaller local sources to advertise their services.
I’d like to explore how to allow users to gather together in a safe and secure way because users want ways to connect and socialize, especially with a lack of accepting spaces but also want to feel safe and protected in doing so.
I’d like to explore ways to help users feel safe with information and organizations because special needs users and their families are sometimes in a more vulnerable position.
Point of View and How Might We Statements
With users in mind, I listed the key design ideas and opportunities discovered from all the research I conducted previously
I ended up focusing on these six opportunities not only because they were the most prominent pain points to users, and also because implementation was feasible based on feature prioritization.
Some additional ideas not to be implemented for the current MVP, but to consider for phase two are as follows:
User flows were created based off of key opportunities and chosen features with the following flows:
1. Onboarding
2. Browse local options
3. Check the calendar for events
4. Create a social group
5. Send a message
Flows focused on including important steps such as safety verification, personalization, and browsing options.
Task flows were made for the same flows as the user flows, with the exception of dividing personal onboarding and organization/business onboarding. Task flows were made with user ease and intuitive use in mind.
.jpg)
The sitemap for this application was fairly straightforward with the main navigation items being Home, Map, Calendar, Inbox, and Settings. Focusing on accessibility called for a simple and easily navigate-able design. Compatibility with external apps was also taken into consideration for navigation and calendar/reminder functions.
With these features in mind, I worked on some sketches to understand how to best incorporate features into the app. I chose keep the disabled and special needs user in mind leading to focusing on pre-existing design conventions to reduce any learning curves or burdens to users that may already feel overwhelm. The main considerations taken were how users can access the information they need, how they will join groups and events, and how to make each step as accessible as possible.
.png)
In addition to making an accessible color palette, the following additional steps were to ensure accessibility for all abilities:
My design primarily followed the European Web Content Accessibility Guidelines (WCAG) in order to ensure that accessibility was built into the app.
Accessibility settings were added both in the settings and the beginning of onboarding, including different color blindness options
For design conventions that were harder to change the color of (red alerts, review stars, verification icons etc.) text was added to clarify and ensure context would not be lost on any users
For icons and images, text was added wherever possible for clarification
For images, captions were added for the vision impaired
In situations that made sense, icons or emojis were added where possible in addition to text
For search or text input areas, microphone icons for speech to text capabilities were added
One big consideration taken when creating the color palette was accessibility, which is why you'll see accessibility ratios on each color. Another factor was presenting branding values which are: inviting, a safe space, inclusive, play and recreation, etc.
The logo design was focused on an inviting and inclusive safe space for all. I knew the logo needed to invoke feelings of safety and inclusivity as well as be welcoming enough to draw users in. I ended up going with logos with multiple shapes coming together to create a whole group or word to signify the coming together of people of different backgrounds, abilities, and strengths to create a group of warmth and acceptance.
.svg)
Text choices were a generally 2-4 pixels larger than I would normally choose for a mobile application in order to have accessibility truly built into the app design. Text was also thickened and capitalized where possible and sensible to increase legibility. This was especially the case for descriptive text for icons in order to best highlight functional and clickable items.
.svg)
My aim in designing icons was to stick to design conventions as much as possible to create familiar functionality for the user. Text was also paired with icons whenever possible in order to provide two forms of communicating function to the user.
Components were also created with accessibility in mind with simplicity, visibility, and clarity at the forefront
The map program details is where users can find detailed information and take action towards finding out information about and applying to opportunities. They can see images, read reviews, take action or find external links, message programs, and apply to programs.
The calendar is where users can access information about events near them. Users can access information through the calendar or pull-up menu.
The event details page is where users can find detailed information such as event photos, an event description, external links, message the event organizers, and sign up for an event.
Messages are where users can request information from programs or events as well as be a part of group chats to keep up to date on any program or event updates or information in a safe and secure way. Messages are made to be monitored by AI so all inappropriate content is flagged.
The onboarding experience was created with a few key considerations: to show users that accessibility is a priority, that the app is secure to use and a safe space for all, and welcoming to all users
With personal account onboarding, the focus was placed on making the user feel at ease through the following means:
1. Accessibility settings for disabilities not available through iOS settings
2. Having the security measure of confirming they are a real person by having them input their phone number and entering a security code - this is a design convention often used in dating apps to best ensure accounts are legitimate.
3. Include location services as well as applying applicable categories in order to allow users to efficiently find relevant programs
4. Allow users to skip through non-essential steps in order to decrease frustration for those that may not want a full set-up at the start
5. Communicating the reasons for each onboarding step in order to allow the user to understand the reasoning and applicability of each step
While many screens of this flow follow the same process as personal onboarding, the following designs were added with programs in mind:
1. Confirming legitimacy through business or non-profit licenses
2. Including business/program information for purposes of communicating relevant information to the user such as hours, contact information, websites, etc.
3. Images with captions to allow users to understand what the program may be like before attending
4. Adjusting categories to describe programs as well as their values to connect with users best suited for their offered opportunities
Map search was created to allow users to find relevant opportunities and all pages were made with accessible UI in mind, as well as focusing mainly on the key task of users which is to find a relevant opportunity within their geographical area.
Features for the map discovery were as follows:
1. Accessibility features such as combining text, emojis, and icons in various combinations to best communicate functionality with users, including speech to text options, larger text, refraining from using abbreviations, and category tags for searching and filtering relevancy
2. Including an interactive map, swipe up list view, and a search bar to both discover and target search programs
3. Displaying concise and relevant program information in the map page such as reviews, whether or not programs have been security verified, and categories
4. Providing detailed information in program pages including contact information, addresses, websites, images (with captions), program descriptions, reviews, and hours, etc.
Calendar search was created to allow users to find relevant events through multiple features: discovering in the calendar view, using the search icon, and looking through the list view. All pages were made with accessible UI in mind, as well as focusing mainly on the key task of users which is to find events within their customizable geographical area.
Features for the calendar are as follows:
1. Accessibility features such as refraining from using abbreviations, and larger text
2. Including a monthly calendar view, swipe up list view, and an adjustable mile radius for user convenience
3. Providing detailed information in event pages including contact information, security verification, event costs, dates and times, addresses, images (with captions), event descriptions, reviews, and compatibility with native calendar apps
Messages were created to allow users to gain needed information, something that came up during the User Journey process as a user barrier. Another main feature of messaging is to participate in group messages which allows users of all abilities to safely and securely message in a safe place to communicate any details related to the programs they participate in.
Features for messages are as follows:
1. Accessibility features such as voice to text, refraining from using abbreviations, and larger text
2. Including private messages for information or clarification as well as group messaging for users to stay in the loop and communicate with their current programs and groups
3. Ability to add emojis and images and react to messages
4. AI monitored for image uploads and messages to ensure safety guidelines are followed
Creating a group came from user interviews when participants voiced wanting a safe and accepting space to hang out and enjoy each others' company. And while this need can be met partially through programs and opportunities, an idea I had was to allow users to form informal groups such as for gatherings and social interactions like playdates or coffee meet-ups.
Features for creating a group closely follow the business/program onboarding screens, but features and differences are as follows:
1. Accessibility features such as combining text, emojis, and icons in various combinations to best communicate functions with users, refraining from using abbreviations, and larger text
2. Since social groups can be created by anyone, ID’s must be uploaded (in lieu of business/non profit IDs for programs) for safety
3. Including group information for purposes of communicating relevant information to the user such as hours, contact information, location, social media pages, etc.
Having accessibility settings beyond what iOS offers was an important part of making an app for all abilities. While accessibility settings are available as part of onboarding, users also needed to be able to access them at any time through the settings.
The features are as follows:
1. Accessibility features such as combining text, emojis, and icons in various combinations to best communicate functions with users, refraining from using abbreviations, and larger text
2. Extensive accessibility features not covered with iOS
Determine if users can complete core tasks with ease on the prototype and navigate through flows within the designated time frame with as little frustration and failure as possible. Find the gaps in clarity, convention, and design that cause faltering and fill those gaps with intuitive and concise design.
Most users attempted to click on the calendar as opposed to looking at the list view pull up menu. This behavior caused me to add pop-up events by date to the calendar in addition to the list view. Additionally, due to one participant's feedback, copy was changed to say “upcoming events” for the pull up list in order to make the page as intuitive as possible for first time users.
Some users voiced that during onboarding, not being able to see their profile photo after it was added was disorienting and felt as though it hadn’t uploaded. This was remedied by adding an extra screen where the profile photo is displayed after adding.
With the location services pop-up during onboarding, this made the text behind hard to read, which copy was essential in users understanding the importance of allowing location services due to the function of the app relying heavily on knowing the user location. Because of this, the pop-up was added after the CTA is clicked as opposed to the original delayed timing.
A user (who admitted to having their spouse usually input onboarding information due to lack of patience for technology) was confused of the placeholder X’s when inputing the phone-sent passcode which caused them to hesitate to press on the passcode boxes in order to input the code. This was remedied by having the numeric keyboard automatically pop up 400 milliseconds after the screen is entered.
For both organization and social group onboarding, users are
1. required to add a profile picture
2. given the option to upload additional pictures to help advertise their services to other users.
Since these two actions happen one after another, some users thought that they had to re-add their profile photos or that their profile addition didn’t work. Because of this, a new format in which the photos are added were changed to avoid confusion with the profile picture centering the photo in a circle and the program photos having a multiple-add function with AI generated auto captions added.
Working on an app for the different abled and disabled community provided the crucial insight that including making space for a marginalized group such as the different abled and disabled community allows for a more usable and inclusive digital space for everyone.
Key moments in this project for me were to have the opportunity to dive deeper into the extensive world of accessibility, create design to alleviate pain points that had a direct affect on users’ well-being based off of extensive research, and ideating and brainstorming creative solutions to best benefit the community.
Accessibility is much more than just choosing some colors, but an intensive process where one must exercise extensive empathy to understand what barriers users may face. Analyzing and dissecting systems and conventions that we take as “normal” and looking through the lens of cultural relativism required learning to adjust these “ableist norms” for the 27% of users with disabilities resulted in design that can benefit ALL users and was an irreplaceable experience.
Designing for minority and sometimes overlooked users is exactly how UX proves its value by focusing on the simple exercise of determining what aids users in reaching their goals and implementing a design that allows them to reach this goal.
With a socially-focused app, creating ways to connect users to communities and opportunities in a way that felt natural, relevant, and safe and secure required looking into major pain points and barriers that users faced in current systems
With a socially-focused app, creating ways to connect users to communities and opportunities in a way that felt natural, relevant, and safe and secure required looking into major pain points and barriers that users faced in current systems
Needless to say, this was a hugely educational experience and one that allowed me a glimpse into the mind of a valuable user perspective and gave me opportunities to empathize and exercise creativity in new ways.
.svg)
