The Autism Gym provides recreational services for kids with autism.

The Autism Gym

View Prototypeautism gym image

Problem

Duration

The Autism Gym’s website has fallen behind the times. The nonprofit needed messaging and a brand that communicates its market positioning, and a scalable site that inspires people to join the movement.

UX/UI Design | UX Research | Branding | Content Creation

9 weeks

Role

Design process

Target Users

To understand who my target users were I asked myself the following questions:What types of people would visit this website? What do they care about? I was able to identify our primary target users as donors, parents, & volunteers.

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. My main recruiting criteria for the user survey was to find people who had donated to charities in the past. I asked participants what information they want to see on a non-profit website when deciding whether to donate.

User Research

How does your organization use its donations & contributions?

target user diagram

Their answers fell into 2 broad categories:
* The organization’s mission, goals, and objectives
* How it uses donations and contributions

of users want to know how the non profit uses donations

of users don't trust non profits to spend their money well

38%

84%

of users have donated to a non profit

50%

Key Findings

Competitive Analysis

View Results

During the competitive analysis we discovered three major competitors of the Autism Gym - Quest Camp Thunderbird, OCA and Dreamplex. 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.

Gym Brand Matrix

The data collected about potential users of the website provided the foundation for my personas.The personas established strong preferences for wanting to serve an organization whose mission they believed in while the frustrations include being concerned with how donations are used and an inability to easily support the organization online.

User Persona

donor personavolunteer persona

After analyzing data from my user survey I was able to prioritize a list of the essential tasks that users would want to accomplish on the website.

User Stories

view results

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.

user flows image

User Flows

Before diving into the design of the website, I drew up a sitemap to solidify the navigation structure and content hierarchy.

Sitemap

Sitemap

Using my sitemap and user stories 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, donation forms

lofi wireframes

Lo-Fi
Wireframes

I took my wireframes into Figma adding some of the written content so I could begin user testing. I wanted to make sure there was enough information on the landing page and  on the donation & volunteer forms

Autism Gym Hifi wireframes

Hi-Fi
Wireframes

branding

Logo Concept

I took my wireframes into Figma adding some of the written content so I could begin user testing. I wanted to make sure there was enough information on the landing page and  on the donation & volunteer forms

Autism Gym Primary logo

The new logo is clean and easy to read and gives a nod to the general nature and mission of the Autism Gym - a friendly, inclusive and welcoming space.

Color Palette

The Autism Gym uses a color palette of bright, friendly colors. Yellow  is used sparingly to emphasize calls-to-action and website buttons.  Dark Blue is used primarily for body copy.

primary colors

secondary colors

secondary color palette

Fonts

The typefaces Proxima Nova & Proxima Soft are a visual representation of the Autism Gym’s voice and tone. These are both  friendly, casual, and straightforward typefaces that complement the designs.

Headings

Proxima Nova

Body and Inline Text

Proxima Soft

Imagery

Great photos are the foundation of the Autism Gym brand. Variety and inclusiveness are important .  We want everyone to be equally represented through our imagery. We favor photos 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.

The following mockups showing 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.

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.

final mockups

Final Mockups

View prototype

what i learned

Accepting that “I am not my user” allowed me to focus on creating a product that addressed users’ primary goals.

1

2

Testing iteratively to create the best possible version of my idea.

3

If I had to do anything different, I would spend more time on creating content - a critical part of building awareness and garnering support.

4

The most valuable lesson learned is don’t be afraid to fail in the pursuit of the best possible solution for your users.