Great Walk of China virtual challenge
The ARCHIE Foundation
What
The ARCHIE Foundation is a children's hospital charity, and every year they do a virtual event with a different theme. 2017's theme was the Great Wall of China, where fundraisers would walk a 175 mile 'portion of the Great Wall', locally and in their own time during the month of September.
The charity was offering prizes as fundraisers hit certain fundraising goals, which is unusual and a great perk for a charity fundraising event.
The site is no longer live.
What we did
The microsite consists of a landing page which outlines what the event is, what is being asked of the fundraiser and they also (rightfully so) wanted to highlight the prizes. Further down the page is fundraiser-driven content such as leaderboards and a social feed. Other pages feature information about the charity, the event, FAQs, and how to find a friend to donate to them.
This site also includes a custom fundraiser statistics page - a custom designed and built page which is specific to the user. It shows their photo, name, progress bar of raised/still to go, and when they started the challenge.
We're especially proud of the postcards - the virtual route is based on an actual 175 mile section of the Wall, with landmarks along the way. We wrote come nifty code that works out where the fundraiser would be along the way based on their walked distance, and then show a postcard on their page which has a photo of the area of the Wall, a map showing where they are on the Wall and a description of the area. The postcard shows as a photo, and flips over on hover to reveal the location message.
How
- I named the event 'Great Walk of China' - see what I did there? I have worked with this customer on many projects so I know the branding and what she likes
- For this site, I was told to design something with a Chinese theme and she said that she's not going to give any more guidance than that because she wanted to see what I'd come up with (every designer's dream!). The ARCHIE Foundation have fun with their branding - the bear logo was updated for this event to wear boots and a hat, and carry a flag, so I was able to have a bit more fun than usual with this design. My aim was for the design to not look cheesy, so I used patterns and colours - I created the finished designs in Photoshop
- I built the pages with custom HTML and CSS based in Bootstrap and tested them on various devices
- I built the registration form, and the everydayhero campaign which is used to gather fundraiser and donation data
- I worked closely with the customer throughout the process, finalising the design, then the build, and making small changes and answering questions along the way
They said:
"We all love it. Totally on the right track. Loving everything so far and don't think there will need to be too many changes!"
Design
Landing page
About page
Fundraiser stats page
