How we made a crowdsourced fundraising race app in 2 days

How we made a crowdsourced fundraising race app in 2 days

techdept ramble race

So BBC Children in Need is one of our clients, and we’re proud to have been working with them on their fundraising web site since 2014. We’re big fans, so wanted to make a splash with our fundraising activity this year.

The theme of the 2015 BBC Children in Need was “rambling” and so we instinctively knew we wanted to do a tech-skewed walk of some sort, maybe using a fitness app like Strava or Runkeeper. As often happens when it’s an activity for yourself, the fundraising day was edging nearer and nearer but our fundraising idea wasn’t getting any clearer…

Various concepts were kicking around the office, but they all felt a bit flat. Wrestling with this problem during a Tuesday afternoon we mooted the idea of pooling our efforts, in order to walk somewhere of note. How about a ‘walk to the moon’ (too far) or to Lands End (too near). Then someone had the idea of ‘walking on water’ – how about across the Atlantic to New York! The distance seemed challenging, but doable. We could even ‘race a boat’…

So we jumped on the internet and soon found that The Queen Mary 2 was leaving Southampton to New York…..that very Thursday! The only problem was we only had two days to get a web site up and running :-0

BUT we thought it was a great idea, so why not give it a go?!

The fitness app

First thing we did was decide which fitness app to sync up with. We needed one with an API that would be ‘on’ at all times – as opposed to being turned on or off between journeys. After some initial research we chose the Moves app, which some of the team already used.

moves app

We then actioned an extremely lean web site design and build – we wanted it to look good but we didn’t want to spend a lot of time. We thought bold, simple and – with the immovable deadline – easy to achieve.

The logo

Our graphic identity was made within a stonking FIVE minutes by grabbing two icons and combining them to produce something that…sort of worked! Although someone said it looked like a toilet sign. Little big detail: our rambler is walking “up” the wave…

ramble race logo
Icons made by Freepik

The design

We thought the epic nature of our adventure, the “derring-do”, warranted a design which was simple but echoed epic nautical themes. For some reason the logo for the Tintin movie came to mind…

tintin

Our moodboard was limited as we took a quick look around behance and dribbble for nautical/game style inspiration, found a couple of designs which gave us some quick direction. The idea of art deco / 1920s design was strong in our thinking too.

boat

The idea for a moving water video background was a quick and easy way to create dynamic looking content (with no effort). And it cost £28 to license from Shutterstock.

The leaderboard wanted to be simple and easy to read & scroll. We wanted anyone that signed up to be able to see how they were getting on, but with the added incentive of the chance of winning a medal for the top 3 (which was reflected in the design)

LEADERBOARD

Liberally scattered around icons from “the sea” may have been a bit obvious but did the job nicely!

page icons

The build

This was actioned quite quickly by myself and our CTO Rick, working collaboratively to 1) build a backend to pull through the ramblers and update steps and 2) Build the frontend, explaining how to get involved and allowing our ramblers the ability to check their steps and how they fare on our leaderboard.

Frontend

We built the site using HTML and SASS using livereload, to test across multiple screen sizes on each save without the need to refresh the page (this was key to keeping it lean).  We used code and lessons learned from previous projects to improve speed of turnaround, namely SASS mixins and some JavaScript snippets.

Our major demographic would be mobile users and we needed to that they had a fast, painless experience when viewing the site and signing up. Due to this we decided to only utilize the HTML5 video on desktop devices. Using Modernizr we detected if the users device was touch capable and then supplied with them a static image instead.

We wanted to show all of our Ramblers on the site but remain wary of screen estate. We decided to show the top 5 by default and allow users to simply scroll through the rest.

Backend

In order to create the system in just 2 days, we used existing APIs (Application Programming Interfaces) which are public internet based services which some companies publish to allow other software to integrate with their own. In this case we used the Moves API which is associated with the Moves app for Android and Apple devices (a walking and running tracker). By linking our application to the Moves API we could ask users to download the app and authorize access to the number of steps they took each day. This authorization by the user gave us what is called an access token. Each time we needed to ask the API for the user’s step data we had to pass this token to authorize. If the user decided to revoke access at any time this token becomes invalid.

Next we built a step accumulator to run on cloud servers which would ask the Moves API for every registered users new steps every hour and add these to their profile which then added to the overall total. All this data was stored securely in the cloud using on demand database storage.

By leveraging the cloud’s on demand nature we did not need to create machines or configure servers, instead rapidly deploying a complex site backend including webserver, database and background processing services in a matter of minutes.

Of course all this needed an administration interface too so we used generation scripts called scaffolds to create a series of pages for managing the data. Next we linked the authorization for admin access directly to our Office 365 directory (using a technology called oAuth), removing the need for a user admin and password storage.

The launch

Dan our CEO quickly wrote some copy and we got the site live about an hour before The Queen Mary 2 left port! Now all we needed was some ramblers…We sent out an email, developed some social media graphics and coerced our team, friends and family to get involved.

We spammed the Queen Mary 2 Twitter feed, and they graciously retweeted us!

The boat arrived into New York at 7am on Monday 16th November, a week after we launched the site….but we didn’t beat it!

It actually took us 21 days of cumulative walking to reach the Big Apple, but we made it! It was a lot of fun, and a good few of us walked a lot further than we normally would do – so was good for our health too.

To say this project was lean is an understatement, we’d certainly give those on The Apprentice a run for their money! And it’s for a great cause, we’ve raised £1030 so far for BBC Children in Need as a result. You can visit our donation page and help us raise more.

The only question that remains is…what shall we do for next year?!

 

Find this interesting?