Team Eagle NYC
This website is being relaunched to support a non-profit team recruiting members and raising funds for Cycle for the Cause.
2-week project - Start to launch
Lead Designer
Team: 1 content creator, 4 stakeholders
Collaboration:
Timeline:
Involvement:
Information Architecture
Branding
Prototyping
Implementation
TL;DR
Because this is a website relaunch, the focus was to engage new members. Research was very limited, due to time constraints, and focused on market research. The team is a niche demographic so many assumptions were made.
Understanding Research
Since the project is very straightforward, the focus became branding, engagement, information architecture, and implementation of an MVP that could be updated to drive member signup. Designs are at the end of the case study.
Uncovering Opportunities
Since the project is very straightforward, the focus became branding, engagement, information architecture, and implementation of an MVP that could be updated to drive member signup. Designs are at the end of the case study.
See the Results
BACKGROUND
What’s spinning around in in my head?
Team Eagle is the NYC Leather Community’s team for the Northeast AIDS Ride, Cycle for the Cause. The team captains have been working to relaunch the website for some time and, knowing how I had restructured and rebranded the triathlon team with FRNY, they approached me about taking on the challenge.
The site is very out of date.
The goals of the site are very mixed, due to many differing focuses.
The information architecture and team organization are not clear.
My hypothesis: The challenge with getting members to sign up is based on fear of the fundraising commitment and training for the ride itself.
How might we clearly engage the prospective members?
A few statistics
The team had the highest participation in 2019. Since the COVID Epidemic began, it has been challenging for the team to recruit members and raise funds.
In 2019, the team raised over $200,000. In 2020-22 combined, they raised $220,000. The goal is to make that much this year.
In 2019 there were close to 50 members, last year there were 15. The goal is to beat 50 this year.
At the end of February, there were 12 members with $1000 raised.
What are we working with?
The outdated site, last updated in 2016.
From our stakeholders:
One of the Captains had started to create a site concept and shared this with me so I could see some ideations that had been created. To make the site easier for all stakeholders to update, it was decided to utilize the Squarespace platform.
RESEARCH/DEFINE
Exploration:
Since I am a participant in Cycelfor the Cause, my first step was to go back to my first time registering.
What was I feeling?
Why did I finally make the commitment?
What were my fears?
What was specific to me vs. other people who might sign up?
There are two big hesitations to registering, the Miles and the Money, so overcoming them will be the main focus. But how can we do that on a website?
Miles - 275 miles is 275 miles, or is it?
Showcase fun!
Focus on the team environment.
Highlight training events.
Remind the team WHY we ride.
Money - $2750 is a lot of cash!
Reduce focus on the money.
Show successful fundraising tools.
Show events to ensure the team fundraises together.
Show other tools and resources members can use for fundraising.
Remind the team WHY we ride.
Problem Statement:
A user feels uncertain about registering to participate in Cycle for the Cause, which results in fewer participants and less funds raised.
Who’s this for:
Time is ticking so creating detailed personas from research was not a possibility. Instead, I took inspiration from other team members that have participated in the past to create a focus of who I am designing for.
Demographics:
Age - 30-60
Occupation - everything from corporate to service industry
Gender - all
Ethnicity - all
Unifying traits - Leather community, NYC-based or connected
Technology Level - Mid to low, Slack was attempted in the past and was not embraced, WhatsApp was effective for the ride itself
Project Goals:
For the User:
Create a site focused on the joy of the ride and the impact this fundraising makes.
Allow for support with fundraising.
Create a support system for training.
Show current team members to build comradery.
Showcase upcoming events for fundraising and training.
From the stakeholders:
Create a site that engages users to encourage participation with the team.
Allow users to donate to the team.
Engage current team members.
Create a history and archives section to store past photos and such.
Ensure the sponsors are celebrated.
Make space to sell shirts in the future.
IDEATE
BEFORE, Site Map:
I started by creating an existing site map. It was very clear that a lot could be reduced and adjusted.
AFTER, A Fresh Take on the Information Architecture:
Taking the stakeholders’ suggestions and assessing the current site map, I created a more streamlined site map that would allow all information to be grouped and organized to support all aspects.
PROTOTYPE
High-Fidelity Mock Ups/Clickable Prototype:
I used the colors of the Leather Pride Flag along with the existing Team Logo to create a color theme that felt confident for the team and welcoming for new participants. I developed a brand style and created mockups in Figma. It was discovered that the Logo did NOT exist, other than jpeg images, so I also recreated the logo and updated the verbiage to be up to date, ask me about it. The prototype was sent to stakeholders with 5 days to comment and share any concerns prior to the build on Squarespace.
Inspiration
Leather Pride flag inspiration
Cycle for the Cause logo
Existing team logo
Full Page Mockups
ITERATION AND IMPLEMENTATION
Feedback from stakeholders:
There were few notes to update the design prior to implementation on the Squarespace platform.
Add more photos of people riding in the group shots.
Add a Captains Bio section to the Team Support Page, the captains are here to help.
The new logo makes sense.
Fallen Angels can be removed.
All of these notes are easily impacted prior to building the site, so I did.
This is the original logo. The phrase “Cycling Against HIV & AIDS” feels like a never-ending battle. The End is in sight, and we want to focus on that!
The updated logo was created with vectors and is being used in all products going forward.
Since the logo has type that is challenging to read when reduced, I created an Icon for the team as well.
A lot of content is still being sorted and created, so there needs to be placeholders on the pages to allow users to see what is to come. Each History and Archives page leads to a “Sorry” page so people know the site is under construction. There are also inactive buttons on events and resources that are not fully available yet. The contact information throughout the site allows users to email and request these elements or share more content if they would like.
Challenges:
With my experience in Squarespace, most challenges were easy to overcome with some CSS. I was able to add dimension and make the site a bit livelier than I had even designed. There was one big challenge though, Squarespace does not allow images on top of a carousel. Never one to shy away from a challenge, I searched to find the code to allow me to embed the image over the scrolling carousel and ensure the Hero section stayed intact.
EXP. OUTCOME
What are we hoping for?
Past stats:
50 members
$200,000
2019
20 members
$88,056
2020&21
15 members
$131,808
2022
How are we doing?
As of April, 2 months in, the site has received over 190 views. The team now has 26 members, a 117% increase in membership, and close to $10,000 in donations, a 10X increase, all since the refresh.
NEXT STEPS
What needs to be added?
Store:
One of the goals was to create a store to sell the previous years cycling Jerseys as T-Shirts to raise funds. This needs to be updated and implemented into the H&A section, with a link to the store in the navigation.
History and Archives:
Content needs to be created, sorted, and uploaded
Resources:
Content needs to be completed for the links to go active.
Training Rides and upcoming events need to be uploaded