• Nicole
    Lenferna de la Motte
  • Web design and build

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.

BBC Children in Need
Rickshaw and Ramble
Battersea Dogs' and Cats' Home
Doggy Paddle Challenge
Crisis
5050 Challenge
Big Issue Foundation
The Big Step Challenge
Hogan Lovells
Global CSR fundraising
The ARCHIE Foundation
Great Walk of China
Cystic Fibrosis Trust
Great Strides
ABF The Soldier's Charity
Virtual Frontline Walk
Kiltwalk
Kiltwalk Jr.
GlaxosmithKline
Trek for Kids
Parkinson's UK
Time to Tour
Imperial College London
Giving Day

UX

There is a close relationship between UI and UX, and I have produced wireframes, user journeys and prototypes for some projects.

Interactive protoype

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

  • Click a button below to go the interactive prototype, and use the password of WebFlow321! for both.
  • Click the top menu links, teal page content buttons, and form buttons to move between pages.
  • Once you are in the registration screenshot flow, use the LOGO area in the banner to go back to the main landing page.

User journeys and wireframes

ABF The Soldier's Charity
User journey
Walk the Walk
Wireframe sketches and concept ideas
Sales package concept - Running off Christmas
Wireframe sketches
Sales package concept - My anti-Valentine
Wireframe sketches

I can draw you a picture

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:

When the person who designed the site builds it too, the end result works more coherently and is more consistent with the approved design.

X

Battersea Dogs' and Cats' Home

Doggy Paddle Challenge virtual event

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!

Landing page

Landing page

FAQ page

FAQ page

Post-donation thank you page

Thank you page

Landing page - mobile

Landing page on mobile

FAQ page - mobile

FAQ page on mobile

Post-donation thank you page - mobile

Thank you page on mobile

X

BBC Children in Need

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!

Rickshaw Challenge landing page

Landing page

The One Show page

The One Show page

Own challenge page

Own challenge page

Ramble landing page

Landing page

Organise your own ramble page

Organise page

FAQ page

FAQ page

Rickshaw landing page - mobile

Landing page on mobile

The One Show page - mobile

The One Show page on mobile

Own challenge page - mobile

Own challenge page on mobile

Ramble landing page - mobile

Landing page on mobile

Organise your own ramble page - mobile

Ramble page on mobile

FAQ - mobile

Own challenge page on mobile

X

Crisis

50/50 Challenge

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 worked with the Design team at Crisis on the visual design, making sure that it was consistent with the new design (which i had received in the form of screenshots, which I had to keep secret!). They wanted a design that was clear and simple, using their colour palette and icons. They also had a photo shoot so I had some great imagery to work with, as well as a video that I used in the banner area of the landing page. Once we had an approved design, I built the HTML and CSS from scratch using Bootstrap, implemented the custom widgets' Javascript and passed on the more complex JS work to the developer. I worked with the Crisis team to make sure that they were happy with the built pages, how they display on mobiles, the user journey, form and back-end functionality. I also helped out with text changes and small issue after the pages had gone live and were being used by the supporters. I was in contact with the team at Crisis for the duration of the project, collecting assets, answering questions, having weekly update calls, and making changes to the design and build based on their internal feedback. This event has run for two years in a row, so in year two I made some content updates.

I love it! This is great. We liked the clear and simple layout and design.

Landing page

Landing page

About page

page

FAQ page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

FAQ page - mobile

page on mobile

X

The Big Issue Foundation

The Big Step Challenge

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.

They provided me with some fantastic imagery of their Big Issue sellers and also some other ones of feet that they took themselves. I used a slideshow to change the header image, used their brand guidelines for guidance with the rest of the design. I built the site in Bootstrap with custom HTML and CSS, implemented the custom widgets' Javascript and passed on the more complex JS work to the developer. I also built the registration form, and the everydayhero campaign which collects donations and fundraiser data. Throughout the project, I was in constant contact with the team at Big Issue Foundation, collecting assets, answering questions, and making changes to the design and build based on their internal feedback. This event has run for two years in a row so in year two, I made content updates with no visual design changes.

These look great! Generally, they’re looking really good! We really like it and we think it looks fab.

Landing page

Landing page

About page

page

FAQ page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

FAQ page - mobile

page on mobile

X

GlaxoSmithKline

Trek for Kids

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.

This looks great!

Landing page

Landing page

About page

page

Partnership page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

Partnership page - mobile

page on mobile

X

Kiltwalk

Kitwalk Jr.

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).

This project felt a bit more like my baby than usual because I got to name the event! We had a name suggestion vote with Kiltwalk and my suggestion - Kiltwalk Jr. - was the winner. I also did the illustration for the design - Kiltwalk's branding tartan is great and we wanted this to be distinctly child-focused so I did two sets of drawings - my first set was deemed a little too 'young' so i did a second set which was a bit more developed. I advised Kiltwalk along the way about content and their downloadable resources section, as well as providing drawings for their own material related to the event. I suggested that we provide downloadable kilts on the site, and I created the files - my kilt drawing was blown up to A3 or A4 size so that teachers can print and hand out, the kids can colour them in and wear them over their uniforms during the walk. I built the pages with a combination of Blackbaud's internal web CMS, and custom Bootstrap-based HTML for the class page, implemented the API-based Javascript widgets and then passed the class page on to the developer to work on the more intricate coding. I also built the registration form.

Landing page

Landing page

About page

page

Class page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

Class page - mobile

page on mobile

X

The ARCHIE Foundation

ARCHIE's Virtual Challenge - Great Walk of China

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!

Landing page

Landing page

About page

page

Stats page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

Stats page - mobile

page on mobile

X

Hogan Lovells

CSR fundraising site

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.

They look fantastic so far.

Landing page

Landing page

About page

page

Region page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

Region page - mobile

page on mobile

X

ABF The Soldiers' Charity

The Virtual Frontline Walk

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.

It was quite refreshing to work with a design style quite different from the usual. ABF The Soldiers' Charity were able to supply me with some great assets and guidelines and open to ideas. We had a workshop at the beginning of the project to look at their requirements, discuss the event and what they want to achieve with it. We worked together to finalise the design (they were a very detail-orientated group) and then I built the pages as custom HTML and CSS from scratch, with a Bootstrap base. I also build the registration form and everydayhero campaign which would drive the donation and fundraiser information, which formed an important piece of the API-driven information displayed in the site. I built and coded as much of the Javascript driven widgets as I could, and passed the more advanced coding to the developer. After the site was handed over, I worked with them to iron out build and functionality snags, and then continued to answer questions and make small changes such as text updates during this stage and after the site went live.

I also did a basic user journey at the client's request, which you can view as a PDF here.

Landing page

Landing page

About page

page

Stats page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

Stats page - mobile

page on mobile

X

Parkinsons UK

Time to Tour

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.

Landing page

Landing page

About page

page

FAQ page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

FAQ page - mobile

page on mobile

X

Imperial College London

Giving Day

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.

Landing page

Landing page

Landing page - mobile

page on mobile

X

Cystic Fibrosis Trust

Great Strides - Land's End to John O'Groats

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.

Having worked with CFT before, i was familiar with their branding and design elements - blocks of yellow, blue and white. I thought that they worked really well for a bento box of a page so it was easy to incorporate the different sections. Their branding includes hand-drawn doodles, so I created my own of Stephen! The project started with a workshop meeting with the CFT team, where we discussed the event, ideas, deliverables and what the pages needed to achieve for the charity. We worked together on the design, then I built the pages as custom HTML and CSS. I implemented as much of the widget Javascript as I could, then I handed the code over to the developer to make sure that API data was pulling through correctly. I was available to the team throughout the testing and go-live phase, answering questions, and helping with changes.

Wow! Firstly – we are all absolutely amazed at this. Really happy with how it’s come out

Landing page

Landing page

About page

page

Stats page

page

Landing page - mobile

page on mobile

About page - mobile

page on mobile

Stats page - mobile

page on mobile

X

ABF The Soldier's Charity

Virtual Frontline Walk user journey

The journey

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.

You can see the final design and live site here, and more information about this project here.

Landing page

Landing page

Donation page

page

Event registration page

page

Group page

page

Supporter page

page

Thank you page

page

X

Walk the Walk

Wild West Midnight Walk wireframe sketches and concept ideas


The concept

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 our ideas and visualisations.

Landing page

Landing page

Supporter's page, with gamefied badges and totalisers

page

Treasure map, where the group's progress is shown by how close they are getting to the Pink palace (finish line)

page

A 'decorate your own bra' drag-and-drop site widget, with the final result shareable as an image on social media

page

X

Sales package concept

Running off Christmas


The concept

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.

Landing page

Landing page

Supporter's page, with gamefied badges and totalisers

page

X

Sales package concept

My anti-Valentine


The concept

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.

Landing page

Landing page

Supporter's page, with gamefied badges and totalisers

page