Non-Profit Website
Responsive Website
Research & UX & UI Strategy

The Challenge

Haymakers for Hope is a non-profit organization that raises money for cancer research through charity boxing events. For the first version I worked on, one of the main challenges was restructuring the site so that people could more easily give info about the organization and lead people to donate. For the second version that is still in development, the challenge became simplifying fundraising and creating a community platform for the fighters to interact with their supporters.

Version 1.0: Shaping the Digital Brand

The Solution

In the first major redesign of the project Find & Form created hierarchies and classifications by dividing their pages into the Who, the Why, and the How. After laying this groundwork, we gave Haymakers for Hope an easy way to update information through Wordpress. We used our Discovery process to define the scope of our second major iteration of the site in creating a more holistic, engaging experience for fighters and donors by making the site responsive and bringing the donation process in-house

Version 1.0 & Version 2.0 Iterations of Version 1.xx

Final Designs of Redesign v2.0

Almost two years later, I helped redefined the process to better communicate internally and with the client. At this point, we used IAs and wireframes to allow clients to focus more deeply on certain areas of the site. Internally, we used UI guidelines and user flow annotations to better communicate with our developers.

Through the Discovery process, Stephen interviewed current fighters about how to make the community stronger. I created an IA that helped defined the new scope illustrating the what we’re keeping on the current site as well as the difference between Fighter-centric flows and Donor-centric flows.

Interviews with Past Fighters (Led by Stephen Roger) Information Architecture to Differentiate Features

I created the wireframes and user flows notes so the Find & Form developers can start laying out the foundation for the design sprint.

Wireframes & Annotations

The donation flow would be a good opportunity to do an A/B test to see what type of element would raise more money.

Donation Element Test

One of the strategies to add some friendly competition between the fighters was creating a ranking page that shows how well each fighter is doing in terms of fundraising.

Other Notes

It’s been a great experience to have helped the awesome team of Haymakers of Hope. When I first started working on the project Haymakers for Hope had raised $995,685 total. Currently they have raised over $3.5 million. I hope the new site allows them to create more engagement and keep fighting the good fight.

Role 1.0

Product Designer

A Collaboration Between

Development & QA
Project Management

Design Deliverables 1.0


Tools 1.0

Photoshop & InDesign & Preview

Role 2.0

Senior Product Designer

A Collaboration Between

Development & QA
Project Management

Design Deliverables 2.0

IA & User Flows
Wireframes & Designs
Annotated Flows

Tools 2.0

InDesign & InVision



© ∞ Yifan Frances