Battersea wanted to hold a virtual swimming event as part of their fundraising plan for 2019. They asked supporters to swim a distance of 1, 5, 9 or 13 miles in their own time, at a pool convenient to them, during the month of April 2019.
We designed and built a landing page, FAQ page, thank you page which would be seen by those who had made a donation, a registration form, and the everydayhero platform functionality which would allow for donations, track participation, and create a page for each swimmer to use to gather donations, update their supporters on their progress and track their miles. The microsite pages were built using Blackbaud's custom web CMS, which uses everydayhero APIs.
We started the project with an on-site design workshop with the Battersea marketing and fundraising teams. We discussed the event itself, what they are hoping to achieve with it, ideas that they have had around visuals, what our deliverables are and what the pages will contain. We also had a detailed conversation with the Branding team about Battersea's branding and its usage. I then created a design mock-up in Photoshop of the pages that we'd be delivering to make sure that they are happy with the visual appearance of the content, and so that they could also understand what they will receive in the build and how the pages will work together. After some rounds of design feedback and changes, they were satisfied with the design and I built it in the custom CMS that we'd be using for this project. Post-build, I worked with the team at Battersea to make sure that they were happy with how the site worked, the user journey, and that the form functionality was working as expected.
I can see the end product looking brilliant! we’re really liking how it’s coming along. Great – very happy with that!
The One Show Rickshaw Challenge and Countryfile Ramble
This project consists of two parts - the microsite and registration for The One Show's Rickshaw Challenge, and for Countryfile's Ramble. Both microsites facilitate members of the public being able to join in with their own rambles and cycle rides, while raising money for BBC Children in Need.
We built the landing pages with custom widgets to show progress and leaderboards, internal content pages with custom Flexbox HTML, and React registration forms which feed into the everydayhero platform. This project continued over two consecutive years - the main build was done in Year 1, and Year 2's work consisted mainly of updates to the content, and to the design of the main content areas of the pages.
I can't take any credit for the design! They were provided to us by BBC Children in Need's design team, so I was responsible for translating a flat design in a PDF to a webpage - in some cases, I need to speak to the team about small changes that would need to be made to the designs to make sure that they rendered sensibly on mobile devices. We had some very specific deadlines that we needed to work to, to tie in with announcements being broadcast at certain times and dates. BBC Children in Need is a large organisation so I also worked with various stakeholders giving their feedback at different stages of the projects. Most of my time was spent keeping on top of the small changes and fixes that came in after the main builds had been done.
It’s been great working with you. Thank you for all your help over the past 4 months! You’ve all been superstars and the sites have performed brilliantly! thank you very much for this, it looks great!
Crisis the homeless charity wanted to hold a virtual fundraising event where fundraisers were asked to cover 50 miles in 50 days, and raise £100. They could do this any way they wanted: walking the dog, running, cycling, walking, bouncing on a space hopper...
We designed a microsite based on the new, not-yet-live redesign of the main Crisis site. We built the microsite with custom HTML, the registration form, a custom thank you page, and the ability for each supporter to get their own page to collect donations and post updates. We implemented some custom widgets in the page such as totalisers, leaderboards and a supporter wall, which shows a random selection of the fundraisers (their photos, name and a button linking to their supporter page).
I love it! This is great. We liked the clear and simple layout and design.
The Big Issue Foundation wanted to have a walking event that anyone could take part in, in their own time. The challenge is to walk 10,000 steps in a specified week, and raise £100.
We had an initial chat with the team at The Big Issue Foundation to talk about what they want for the microsite and what they'd like to achieve with this fundraising event. From there, we provided a design, and once it was approved we did the site build. There are some API-driven widgets on the landing page to pull in progress, totals and fundraisers.
These look great! Generally, they’re looking really good! We really like it and we think it looks fab.
Every year, about 40 GSK employees do a fundraising challenge to raise funds for charity. In 2019, it was climbing the Simien Mountains in Ethiopia for Save the Children.
GSK needed a microsite which would give information about the event, the people taking part, and also provide a way for their supporters to make donations to them on their JustGiving pages. We designed the pages, collected assets and content, and built the pages using our internal API-optimised CMS.They specifically asked for certain features, such as a countdown to the climb date, a mountain-themed totaliser showing the fundraising progress, and a carousel on the landing page showing photos of the 40 participants. The participants were an internal group so there was no need for registration facilities.
They already had a website for the previous year's event and they were happy with that design so we used it as a base for the new site design. GSK also has fantastic imagery and very comprehensive brand guidelines so I have plenty to work with. I worked with GSK and their agency to finalise the design, the site build and its content. After the site's launch, I was available to make content changes as news and progress updates needed to be included in the site.
Kiltwalk organises walks in Scotland where fundraisers can walk and raise funds for a variety of charities. They wanted to involve schools with the idea of having a walk in schools just before holiday time (when the kids need an activity), to raise funds for NSPCC Scotland. Every school and class would have its own page to log progress and fundraising.
We created a landing page explaining the event and allowing schools to register, and which also showed progress in miles and fundraising. Because the event and therefore the microsite was aimed at children, we had a bit more freedom to play around with ideas and do something a little more creative! Kiltwalk was very open to our ideas and we had a couple of small ideas chats, where we discussed things like the downloadable features. The class page is a custom page that we developed which shows specific information pertaining to the class and it's progress - it shows practice miles walked, funds raised, donors and a kilt totaliser which fills with colour as funds are raised (we also tried out the idea of a lunchbox filling with snacks as money was raised).
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 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've 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.
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!). My aim was for the design to not look cheesy, so I used patterns and colours. I built the pages with custom HTML and CSS based in Bootstrap, 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. 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.
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!
Hogan Lovells is an international law firm that wanted a site to encourage its employees to fundraise for a charity called Barefoot College, as part of their CSR initiative.
We worked with Hogan Lovells to design and create a landing page, a page per international office, and some extra general information pages such as FAQ. They have very strong branding and we needed to stick with that, with the design needing the approval of their internal design team before we could start the build. The microsite is built in Blackbaud's custom CMS, with some custom coded widgets that we have embedded with iframes - we have a world map showing regions and the Hogan Lovell regions on hover, and overall totals. When a region is hovered over, it shows that region's raised amounts with a link to the region's own page. The region pages show how much has been raised, how many participants there are, a fundraiser search, and a supporter wall with a tile for each fundraiser, which links to their specific JustGiving page.
I used the branding to create a design consistent to the Hogan Lovells site, while making sure that the necessary page features sat nicely within the style. I worked very closely with our customer at Hogan Lovells all through the process - design, build and post build support. The main pages and widgets are built with the Blackbaud CMS and I built the custom pieces with HTML and CSS outside of the CMS, with the developer helping out with making sure that correct API calls were being made so that the correct information was pulling into the page.
ABF The Soldiers' Charity wanted to fundraise with a virtual event to commemorate the centenary of the First World War. A group of people were going to actually walk the Western Front so this was the opportunity for anyone wanting to fundraise to walk 100km in 42 days, with the event ending on 11 November. They also wanted to encourage participants to research their own military family history.
Our microsite consisted of a landing page with some other content pages which explain the event and provide some more information about the charity. The landing page contains a lots of custom widgets: a section which cycled through some actual WW1 soldiers, and placing them next to a randomly displayed fundraiser, totals showing amounts raised, collective distance walked and total registered participants, a countdown until the event ends, leaderboard and supporter wall (pulling in a random selection of participants). Each fundraiser had their own page with which they could collect donations and update their supporters with their progress, as well as a statistics page which gave a much more custom designed and built display of their progress - this included their photo, photo, military rank given based on their raised amount (like a badge), uploaded photos from their supporter page, and a list of their donors.
Parkinson's UK wanted to have a cycling virtual event based on the Tour de France. Fundraisers could choose a distance that suited them, based on sections of the TdF route and cycle that distance in a specified month. 'Jersey' badges were awarded for reaching distance goals.
We created a landing page with other informational subpages, and the registration functionality. Parkinson's Uk has great branding and imagery so we used it as a base for the design and also included a strong cycling theme. As this was a competitive event to appeal to competitive people, we introduced the idea of earning your jersey by hitting the distance goals, leaderboards per distance and prominent totalisers. We also build a tracker map so that cyclists could see how they compare to other cyclists along the virtual route, and a section showing most recent donations. The landing page shows a condensed version of the leaderboards, with the full board of all participants on its own page.
Please note that the site has been updated, and the Tour de France theme has been removed from the live site.
We had a workshop at the beginning of the project with the Parkinson's UK team to learn about the event, their needs and some ideas that we can try out. I mocked up a design based on the assets, branding and our conversations, then worked with the team to finalise the visual design. Once the design had been approved, I built the pages with custom HTML and CSS based on Bootstrap, and produced as much of the API-driven features as I could on my own, before passing on the more specific coding work to the developer. After testing, I worked with the Parkinson's UK team to bug-fix and hone the content. I also built the registration form and the everydayhero campaign, which collects fundraiser and donation data for the APIs.
Imperial College London wanted to try out the idea of a Giving Day - a one day event at the university where students are encouraged to donate.
The project is a one-pager to basically act as a progress indicator of how well the fundraising is going, with some information about where the money will go. We build some totalisers to show some different pieces of information - not just how much has been raised, but a breakdown of who made the donations.
I received the branding guidelines and some excellent assets from the University, and I used them to create a page that fits the university's identity but also shows information in a more interesting way. The challenge was showing statistics in a more interesting way. I experimented with the idea of bar graphs which grow on load, and also colour-coding the different groups of people to make the graphs easier to digest. The overall totaliser is the university's landmark tower, which fills with colour as money is raised. I worked very closely with the customer throughout the design and build parts of the project, and helping out with questions and small changes where necessary.
Firstly just to say thank you for a great first draft, even after having passed it around a few key stakeholders, the response has been very positive with only a couple of suggestions from each person. Thanks so much Nicole, very chuffed with it.
Cystic Fibrosis Trust have a super-supporter in the form of Stephen Taylor, whose grandson has cystic fibrosis. Stephen planned to walk from Land's End to John O'Groats to raise funds for Cystic Fibrosis Trust. The Great Strides site allows anyone to 'join' Stephen on his walk from 1 July to 30 September, walk the same distance on their own and raise £150 for CFT.
We built a landing page to talk about the event, and Stephen's involvement, and we also have extra subpages with some more information about the event. We added some fun stuff to the landing page to help make it feel more like the fundraisers are on a journey with Stephen - a video from Stephen about why he is doing the walk, his progress and updates from him. To encourage fundraisers to feel part of a community doing this together, we have leaderboards, totalisers of overall achievements and a wall of randomly selected users. This site also has a custom statistics page for each fundraiser - it includes their photo, call to action to donate to them, which virtual landmark along the route that they have reached, based on the distance that they have covered. Each landmark has its own fun fact and the fundraiser achieves a badge as a reward for their progress, and they have their own totaliser for finds raised. We can also see each participant's list of donors.
Wow! Firstly – we are all absolutely amazed at this. Really happy with how it’s come out