The Autism Gym

Inspiring Movement
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.

A successful redesign will increase awareness about the organization as well as make the website more user-friendly, responsive and accessible.
Original Design
view Mockup
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.

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.
new design
User Research
view survey
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?
Key Findings
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.
These included:
• usability problems relating page and site design
• unintuitive information architecture
• unclear or missing information
of users have
donated to a
non profit
of users don't trust non profits to spend their money well
of users want to know how the non profit uses donations
Competitive Analysis
view Results
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.
User Persona
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.
User Flows
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.
Lo-Fi Wireframes
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.
Hi-Fi Wireframes
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.
Logo Concept
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.
Primary Logo
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.
Visual Identity
view brand guidelines
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.
Preference Testing
view results
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.
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.
Final Mockups
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.
Testing iteratively to create the best possible version of my idea.
Accepting that “I am not my user” allowed me to focus on creating a product that addressed users’ primary goals.
If I had to do anything different, I would spend more time on creating content - a critical part of building awareness and garnering support.
The most valuable lesson learned is don’t be afraid to fail in the pursuit of the best possible solution for your users.
What I Learned