Tiltify logo

The Business

Tiltify is a unique industry-leading fundraising platform, initially built for online streamers from Twitch, YouTube and Mixer. We build innovative tools to help fundraisers raise more money for their chosen charity, and help charities understand more about their fundraisers and donors.

My role

I joined Tiltify as their first hire in 2015, and have been with the company as they have transitioned from start-up to growth stage.

As UX/UI designer I work with the engineering and charity success teams on both the platform and directly with charities in building out their fundraising programs. With our streamlined campaign creation fundraisers can be set up quickly, and our donation flow has enabled over $100m in donations.

Working collaboratively with the engineering team we design and build iteratively based on own internal analytics and feedback from core users and charities. Working with the CEO and CFO I build analytics dashboards for charities and internal use to inform future decisions.

Three main users

Charities

I have the great fortune to work with some of the worlds largest charities to create informative, engaging and clear UI which has helped to drive donations and raise millions for them. They include United Nations, United Way, Make-a-Wish, American Heart Foundation, American Red Cross, St Jude Children’s Research Hospital and Humane Society.

Our cause dashboard is used by charities to manage their fundraising events and see how they’ve performed. We continue to learn from charities about their needs and expectations through direct dialogue and user surveys.

Management table UI

I collaborated with the CTO and our front-end engineers to build out the base IA and content needs. From this, I designed a templating system which meant that I only needed to design specific pages/sections, and didn’t need to wireframe every page. This sped up both design & engineering time and has the benefit of UI consistency which is good for new users, particularly those who are not as literate as others.

The following two base templates worked in 75-80% of cases:

Wireframe of multi-section
Wireframe of sub-sections

I then had to design a few bespoke pages where we had content outliers. These included the empty state of a new user to help them onboard, and a listing page.

Cause landing first entry
An event listing

The cause dashboard UI is designed with accessibility in mind. All color contrasts are minimum WCAG AA, and UI and form elements follow our design system in terms of build.

Whilst this was being built out, I asked a few of our larger charities to participate in both open and closed card-sorting exercises so that we could understand how they thought the content should be categorised and to learn more about the language of non-profits.

Fundraisers & Donors

We try to move users through sign-up and donation processes as quickly as possible. We regularly iterate on these flows as we learn more about users and functionality is added. I collaborate with our engineers in producing these new flows to ensure all our technical and legal requirements are met.

The usual work flow is as follows:

  • Build flows with CTO input
  • Content inventory – what’s needed at each stage and what’s optional
  • The code-base is big so I consult with engineers to make sure we’re aligned
  • Build wireframes if needed – check flow again with any new functionality
  • Build a prototype of any new functionality along with UI design

The built beta of the flow is then tested by our customer success team who are themselves users of the platform. Any issues are then resolved and the staging branch is pushed live.

tiltify donate flow
Tiltify donate flow start screen ui
Start flow

(New start flow UI will be added after it goes live.)

On the front-end, we have both light and dark modes for users to choose from; both use our design system. We have multiple layouts on the campaign page depending on user input. UI and typographical hierarchy is paramount on these pages.

Tiltify campaign page

User dashboards

There is a wide-range of ability that needs to be considered with the user dashboards. The navigation and layout has to be clear and intuitive, but we also have a range of features and constraints with the technologies we use. Finding a balance and iterating is key to improving the experience for our charities and users. These make use of both our design system and dark and light modes.

Tiltify user dashboards
Tiltify user-dashboard

Success

Through the teams continuous improvements and the hard work of our community managers and charity success team, we’ve seen donations increase across the platform 300% year on year since 2015.