The Autism Gym is a small nonprofit that provides free recreational activities for individuals with autism and related disabilities. Their mission is to provide a welcoming space that transforms the lives of individuals with disabilities.
Role: UX/UI Design | UX Research | Branding | Icons & Illustration
Duration: 12 weeks
The Autism Gym’s website has fallen behind the times. The nonprofit needs messaging and a brand that communicates its market positioning, and a scalable site that inspires people to join the movement. Original Design
A successful redesign will increase awareness about the organization as well as make the website more user-friendly, responsive and accessible.
I redesigned the site with a focus on clarity, simplicity, and ease-of-use, balanced with compelling storytelling around the Autism Gym’s mission and the importance of recreation for kids with autism. new design
My goals were to improve the user experience by creating a more user-friendly website that will inform, engage and drive visitors to act—ultimately increasing support for the organization.
Understanding the motivating factors behind why and how people donate was imperative in creating a website that provides users with a pleasant experience but also inspires them to become supporters.
To understand who my target users were I asked myself the following questions:
1. What types of people would visit this website?
2. What do they care about?
Their answers fell into 2 broad categories:
1. The organization’s mission, goals, objectives and work.
2. How it uses donations and contributions
In addition to observing what attracted user contributions, I also analyzed turn-off factors that caused charities to lose out even after people viewed their website.
• usability problems relating page and site design
• unintuitive information architecture
• unclear or missing information
of users have
donated to a
of users don't trust non profits to spend their money well
of users want to know how the non profit uses donations
During the competitive analyses we discovered three major competitors of the Autism Gym. Each of these organizations gives individuals with autism and related disabilities access to a variety of recreational programs.
The Autism Gym, however, is the only organization that provides free recreational services to all age groups with availability all year long.
The data collected about potential users of the website provided the foundation for the personas.
The personas established strong preferences for wanting to serve an organization whose mission they believed in. Some of the frustrations include being concerned with how donations are used and an inability to easily support the organization online.
I converted the users’ stories into user flows to visualize how users would accomplish high priority tasks.
I mapped out the smoothest path for donating, signing up to volunteer, viewing the mission statement, and contacting the organization.
With my user stories and user flows as reference points, I created wireframes for the landing page .
I wanted a clean layout with clear call to action buttons. I created a few versions that included placement for logo and donation forms.
I took my wireframes into Figma adding some of the written content so I could begin user testing. I wanted to ensure there was enough information on the landing page, donation & volunteer forms.
I started the logo exploration pulling inspiration from the puzzle piece which is traditionally used in autism branding. After sketching a few stick figures I came up with an idea to create a human figure using simple shapes. These shapes would fit together similar to a puzzle piece but placed in a way that would mimic movement and action.
The new logo is clean and concise and easy to read and gives a nod to the general nature and mission of the Autism Gym - a friendly, inclusive and welcoming space.
The visual identity is a set of guidelines that outline the do’s and dont's of using the Autism Gym’s brand assets. We want everyone to be equally represented through our imagery and variety and inclusiveness are important. We favor images and iconography with bright colors, bright light, contrast, depth, and dynamic composition.
With my visual identity in place, I was able to create hi-fi mockups.
I created a few different iterations of the landing page and implemented user preference tests asking users their preference on things like layout, image style & placement.
I also made improvement to the donation process by:
• Limiting the number of fields donors have to complete.
• Including pre-set donations amounts in the forms.
• Creating a more accessible, user-friendly donation form.
As part of the redesign of the Autism Gym’s website, I wanted to make the donation experience more visible and usable.
A few of the things I considered as I designed the donation form:
1. Make it easy to find
2. Keep it simple
3. Make it one page
4. Suggest donation amounts
5. Offer recurring donation options
6. Avoid placeholder text
7. Show impact
8. Say thank you
You can read more about designing the donation form
I used the final mockups to create prototypes where I conducted both in-person and remote usability tests using a specific set of tasks for the user to attempt.