Goodness me, I have worked on a good few projects over the past few years. Here's a selection of the most recent sites that I designed and built, and some UX work.
Goodness me, I have worked on a good few projects over the past few years. Here's a selection of the most recent sites that I designed and built, and some UX work.
There is a close relationship between UI and UX, and I have produced wireframes, user journeys and prototypes for some projects.
I created an interactive prototype in Adobe XD for our Sales team to use to demo the user journey of the fundraising landing page and event registration package. The idea was that the Sales team would be able to make simple branding-specific design customisations such as swapping put the logo image, relevant text and some colours. Buttons are clickable to show how users would navugate around the site, and it also includes screenshots of the two registration processes that Blackbaud and JustGiving offered functionally - the landing page is the same for both, and the registration flow changes depending on whether the implementation used JustGiving, or Blackbaud's everydayhero platform.
How to view the prototypes
Flair was a concept where a chef cooked for you in your own home - I did these logo options for the friend-or-a-friend, and they were noit used. Oh well, I had fun creating them!
The Hillview Group is an international investment company that needed a logo identity for their launch, and then a subsequent logo identity for the group of garden centres that they invest in and manage (swipe left to see those). They have since developed the brand further, and I am glad to see that my trees still feature!
Amazon AWS needed some simple banners to promote eBook reports that they had done for government and transport, as well a Forrester report. They needed a static and an animated version for each, with specified dimensions and the filesize needed to be no larger than 100k. For this reason, the animated ones are simple gifs.
Need some nostalgic holiday banners for sunny Spain, circa 2005? You're in the right place.
I like to draw, and it's come in useful with creating assets for projects. Here are some things I have created, which have been used in projects.
Having worked with a CMS that allows clients to send emails, I have designed, built and tested emails. I am familiar with email design and build best practice, and my templates were built so that the clients could edit them to add in content themselves, event with little HTML knowledge. Sometimes I got to design the emails (so I would make sure that they were designed with email limitations in mind) and mostly I got the designs from the clients so I would build the HTML to be compatible with both the Blackbaud NetCommunity platform, and email clients.
The screenshots below are long scrolling images, so click to see the whole image.
Being a digital designer, print is not something that comes my way very often - it was part of my Graphic Design course and I have worked on enough print to be dangerous....
The BX Conference was held by The Behavioural Insights Group in September 2019. As part of a freelance role, I helped to product print items for the BX Conference - the main design look-and-feel, illustrations and documents had already been finalised so I was working with existing material to create new pieces, while making changes to existing documents and sticking to the printer's guidelines and deadlines.
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.
I can see the end product looking brilliant! we’re really liking how it’s coming along. Great – very happy with that!Dan, Battersea
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. The sites are no longer live, so please have a look at the screenshots below.
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.
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!Geoff, BBC Children in Need
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... This site is no longer live, so please have a look at the screenshots below.
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.Lucy, Crisis
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 fabEllie, The Big Issue Foundation
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.
This looks great Olivia, GSK
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. This site is currently not available so please have a look at the screenshots below.
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.
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!Claire, The ARCHIE Foundation
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.
They look fantastic so far.Regan, Hogan Lovells
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.
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.
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.Andrew, Imperial College London
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 Holly, Cystic Fibrosis Trust
The client asked for a basic user journey demonstrating how the different pages that we were designing and building fitted into a start-to-finish registration journey. These wireframes were requested after the project had been sold and started, which is why they are simply hand-drawn, and then laid out in the correct order and saved out as a PDF.
Walk the Walk is a breast cancer charity, known for their midnight walks where fundraisers are invited to walk in bras. Every year, there is a different theme for the walk, and an opportunity for walkers to customise their bra accordingly. I was asked by the Account Manager to suggest some ideas of the next theme (Wild West) could be reflected on the Walk's digital presence, so I created the wireframes and concept sketches below. The ideas were not used, but the customer was very impressed with my ideas and visualisations.
This was a concept intended to help charities raise money around New Year and promote a sense of well-being after the festive overindulgence - fundraisers exercise to raise money for the charity, and it is gameified so that fundraisers 'burn off' festive food treats by covering a distance or raising a certain amount of money. The pages include motivation to get out and about, and a sense of community by including the images and progress of all participants.
This concept was bought by a charity, and they changed it quite considerably from the sketches below. It was ultimately produced by another designer on the team.
We focused on seasonal ideas to help charities to spread their activity out over the year - this is a fundraising campaign that can promote love and togetherness with food among friends, family... anyone, really. It could work with hunger-related charities, and Muslim charities over Ramadan, with the idea being that a registered group can 'buy' a place at a dinner party, and encourage others to donate to the charity. The group's page shows their team's participants, what they're eating, who their donors are and photos from their event via a social feed. This concept has not been used.