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 the product designer I work with the engineering and charity success teams on both the product and directly with charities in building out their fundraising programs.

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

On the front-end, we’ve built a robust design system which means we’re able to design and build quickly and consistently for users.

Skills / Software

  • Data informed design + user research
  • Iterative design process
  • A/B testing
  • User flows
  • Card sorting
  • Engineering collaboration
  • Design system
  • UI design
  • Prototyping
  • HTML/CSS/JS
  • Sketch & Figma
Management table UI

Decision making

Our product has 3 main user-types – charities, fundraisers and donors. I use a combination of qualitative and quantitative methods to make design decisions depending on the user-type.

With charities it’s very much a collaborative and iterative process with direct dialogue, user surveys, card-sorting etc. For fundraisers it’s a mixture of data and user-feedback, and for donors we tend towards data to drive decisions. KPI’s we try to improve include time to complete the donate flow and campaign creation flows.

Design Process

My visual design process starts with accessibility and making the entire product usable to all – whether that’s through color, written copy or labeling – and ends with prototyping either in Sketch/Figma or HTML/CSS/JS.

Tiltify home page design for desktop and mobile

You can see the full design over at tiltify.com

Interactions are coded by me locally or in a code-sharing app to demonstrate to engineers how these work. It’s then up to them how it’s implemented in the codebase. This work-flow has been effective in communicating complex animations.

See the Pen
Card animation
by Andy (@andychip)
on CodePen.

Example process
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

Charities

I have the fortune of working 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.

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, benefiting users.

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

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.

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.

We’ve also seen drop-offs decrease significantly in both donation and sign-up flows over multiple iterations.