Out Athlete Fund
Out Athlete Fund is an organization that works to help fundraise and sponsor up-and-coming athletes to professional levels within the LGBTQ+ community and build a stronger pressence of out LGBTQ+ athletes.
Website Redesign
UX Research | Information architecture | UX Design | UI Design
Project Overview
We, as a team of 5, were asked to partner with a nonprofit organization and work with them to analyze their website, determine usability issues, propose solutions, and partner with a primary stakeholder of the chosen organization to develop a new website that addresses issues found during research and analysis.
Our Mission
How might we redesign the Out Athlete Fund website to more clearly communicate its mission and potential impact, so that donors can connect personally to the cause and are inspired to get involved, donate, and support the mission of increasing LGBTQ+ representation in sports?
Problem
The current Out Athlete Fund website does not effectively communicate its core mission or initiatives in a human-centered way that inspires donor involvement.
My Contributions
Research
I focused on the research plan and research methods throughout the early stages of the design process. I designed and iterated on our research plan, interview plans, questionnaires, testing plans, and synthesizing the insights from our work. To ensure we had a solid foundation, I wanted to make sure all our early research was going to signal meaningful, insightful, and data driven results for our client.
Style Guide
The style for this project was a bit of a journey, and something I really wanted to run with. Despite designing our news page for the client, it was something they were debating to sunset and not focus on for the foreseeable future. With that in mind, I took on the endeavor of the style guide for our redesign and worked with our client on multiple iterations and styles that met both the design needs and the clients asks as well.
About the Client
Out Athlete Fund is a non-profit organization that works to help fundraise and sponsor up-and-coming athletes to professional and olympian levels within the LGBTQ+ community and build a stronger presence of out LGBTQ+ athletes. They have struggled to get their footing back after having to pivot during 2020, and are taking a new approach to their fundraising and were in search of ways to bring in new donors and attract corporate sponsors.
Original Out Athlete Fund Website
Design Process
I started off the design process by working to understand the different personas OutAthlete Fund was targeting for donors and work to understand their goals and needs.
To gather insights, we interviewed 3 different personas to inform our research, and created 3 separate sets of questionnaires based upon some of the research goals below. We interviewed the Stakeholders of OutAthlete fund to ensure we were accurately representing their mission, goals, and needs; The Athletes to make sure we were authentically depicting their experiences and stories; Finally, the donors were interviewed to ensure the new website met their needs as well. We interviewed 6 people, and compiled our notes into an affinity diagram for analysis.
OutAF Stakeholders
-
What are their goals for the website?
-
What do they feel is missing from the website currently?
-
What do they like about the current website?
-
What do they dislike about the current website?
-
What does OutAF mean to them?
-
What insights can they give about their current and target donors?
Potential Donors
-
Why do they donate?
-
What do they look for in an organization when donating?
-
What's most important to them when donating?
-
What do they look for on an organization's website before donating?
LGBTQ+ Athletes
-
What is their story?
-
What does a mission like this mean to them?
-
What are their past experiences with support like this?
-
What do they want to see in a sponsor?
-
What are the LGTBQ+ experiences in professional athletics?
Donor Interview Insights
-
They give to causes they personally care about
-
Donors want to know their support will make an impact
-
Need to have trust in the organization
-
Want to know how the money is being used
-
Want easy ways to either donate money or time
-
Want to see pictures and stories of the people, communities, or causes the organization is supporting
-
Want to see proof the organization is making a difference
Testing 1.0
We conducted 5 different user tests on the existing Out Athlete Fund Website and interviewed them to understand their own donor habits and pull insights from them.
Test Results
-
100% Of Users found the mission to be unclear
-
100% of Users said the “How” in their mission is unclear
-
75% of users found images to be a hinderance to text
-
100% Of Users found donating to be easy and simple
-
Users found issues with the user interface, typography, Imagery, and Layout
Key Interview Results
100%
Of Interviewees found donating to be important to them
50%
of Interviewees decide to donate to an organization based on word of mouth from peers, friends, or family
75%
Of Interviewees either don’t have the time or ability to donate regularly
100%
Of Donors are driven by their emotional attachment to the mission of an organization
Wireframes
We designed paper wireframes and transferred them to low-fidelity wireframes. From there, guerrilla tests were conducted to gain feedback and insights on our initial wireframes. Ultimately the changes made were based upon both stakeholder and user feedback. Shown below are the initial paper wireframes, mid-fi wireframes, and the iterations made to the mid-fi wireframes based on user feedback from our guerrilla tests.
Style Guide
Our Stakeholder communicated that he wanted to maintain the rainbow color scheme as that was incredibly important to him and the organization. I wanted to bring a refreshing take on the rainbow color scheme to the website redesign that would present a retro feeling and have more intention with color choices. The reason we decided to go with a retro feel to our design was to pay tribute to the trailblazers of LGBTQ+ rights in the 70's. Below is the logo redesign and color palette sample I design based upon the graphic patters and image samples we used for the direction of our style guide. I wanted to convey with the redesign feelings that embody a sense of Athleticism, Dynamism, Camaraderie, and Strength ,
The Redesign
Shown Below are the final redesign desktop pages
Takeaways
Overall this was an extremely rewarding opportunity to partner with Out Athlete Fund. The original website left us as a team confused on what their mission, goals, and work were which allowed for us to do even deeper research to ensure that our design was benefiting all end users as well as Out Athlete Fund. I loved the opportunity to dive into a new challenge like this one that was near to me personally and grow as a designer.
My Learnings
-
Balancing user needs/wants with Stakeholder needs/wants and making decisions accordingly with those needs in mind.
-
How to design site architecture and information while prioritizing scalability and future need
-
Synthesizing insights to get stakeholder support and buy in
-
Balancing Mobile and Desktop design
-
Overwhelmingly positive feedback from our stakeholder
-
Wants to work with a team to code our designs and make it live for their website
-
Research Feedback
-
Saw testing insights that contradicted his beliefs/wants and shifted his perspective
-
Stakeholder Feedback
