A Heavy Hitting App with Heart šŸ„Š šŸ’™

Andrew Millar
5 min readMay 27, 2019

--

PaperKite was honoured to be name sponsors of IT Heavy Hitters in 2019 ā€“ a charity boxing event raising money for The Key to Life Charitable Trust. It was our first year ever being involved with the event as a sponsor ā€“ in fact the first time weā€™ve ever sponsored anything of this size, scale and significance so supporting this cause was really a no-brainer for us.

The Key to Lifeā€™s mission is to affect positive social change surrounding suicide prevention, suicide awareness and mental health in New Zealand.

We at PaperKite are incredibly supportive of mental health and wellbeing ā€“ especially in the tech industry.

IT Heavy Hitters has been training IT professionals with no boxing experience to step into the ring since 2014. But this was the first year they had a digital presence at both the Auckland and Wellington fight nights. The official 2019 IT Heavy Hitters app allowed users to learn important stats about each contender, vote for their favourite fighter in each lineup, and donate to the amazing work The Key To Life Charity does.

Weā€™re super proud that we could support such an important cause with the digital solution we created. And we thought weā€™d show off some of the specific areas that gave us the most satisfaction:

Animations, Animations, Animations

We love bringing our products to life with animation. They can be big and bold, or small and subtle. It can be easy to get carried away with designing awesome animations only to realise they are near-impossible to implement for our developers. But thatā€™s where Lottie steps in! Weā€™ve confessed our feelings for Lottie many times over the years, but the power it gives us is incredible. Itā€™s as easy as creating an animation in After Effects (an Adobe production tool), exporting it into a JSON file (a lightweight coding format), and our developers import it to their Android / iOS development tools. Itā€™s easy and we love it.

Users can vote for who they were supporting for each fight, and see the results.
We took the time to make swiping between each fighter feel smooth and rewarding.

Skeleton Screens

You may not have heard the term before, but if youā€™ve used Facebook, Youtube, or LinkedIn recently then you will have definitely experienced skeleton screens (whether you realised or not). Essentially a ā€˜half-loadedā€™ version of the screen; skeletons indicate the type of content that is about to be loaded. Itā€™s proven that users perceive the loading time of a view with a skeleton screen to be faster than both a spinning loader animation or a blank screen. Weā€™d never implemented these before so we took these as a win!

Applying skeleton screens can make your UI feel faster.

ā€œDigital Billboardsā€

While building the app was one thing, we knew we could build a better digital experience on fight night if we had a presence beyond the device in peopleā€™s pockets. How could we drive engagement during the events to encourage more people to vote and donate in the app?
With 65 inch TV screens, thatā€™s how!

Set up around the bar at both events, these screens displayed fight results, upcoming fights, and the latest donation numbers for the evening. Internally we nicknamed these our ā€˜Digital Billboardsā€™. The name helped us focus on the type of experience we were building: traditional billboards are easy to understand and digest from any distance. This meant keeping the amount of information being displayed down to a minimum. In early versions we had the content cycling through every four seconds which felt like plenty of time at first, but once we tested it with an audience we quickly doubled that time. We wanted to create something that was engaging, but not distracting.

Easter Eggs šŸ°šŸ„š

An easter egg is when developers hide a small feature or message into their software (not the foil covered chocolates you can buy in April). We donā€™t always build these into our products, but we made sure to do so for IT Heavy Hitters ā€” especially with two members of the PaperKite team fighting for Wellingtonā€™s Blue team! Tapping Dylan or Ryanā€™s photo in the app several times revealed an alternate costume with accompanying sound effect as well.

Dylan & Ryan in their ā€˜easter egg costumeā€™: wearing the traditional #RUPK hat.

Reflecting on an awesome event

The energy on fight night was incredible. The PaperKite team were there cheering our boys in the blue corner creating an emotional and rowdy atmosphere. And with the dust now settled we can look back with pride at what weā€™ve achieved.

Based on insights from the night we can see that over 75% of the total crowd attendance downloaded the app ā€” thatā€™s far higher than weā€™d have anticipated. We also had over 7,000 votes placed for fighters across the two fight nights.

But best of all, we helped to raise $122,398.30 for the Key to Life Charity. An incredible outcome and weā€™re extremely proud to have played our own little part in helping with the event and raising awareness for such an important cause. We loved being part of it all and canā€™t wait to see how 2020 can be even bigger!

At PaperKite, weā€™re all about better digital experiences. Weā€™re best known for crafting mobile-centred solutions for todayā€™s digital-world consumers. Find our more at paperkite.co.nz

--

--

Andrew Millar

Designer, Illustrator, Football Geek. Experience Director at @PaperKiteltd