Work :: Nicole Lenferna de la Motte - Senior Digital Designer

X

Battersea Dogs' and Cats' Home

Doggy Paddle Challenge virtual event

The project

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.

The site is no longer live so please have a look at the screenshots below.

What we did

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.

My role

I 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 the site 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.

They said

I can see the end product looking brilliant! we’re really liking how it’s coming along. Great – very happy with that!Dan, Battersea

Landing page

FAQ page

Post-donation thank you page

Landing page - mobile

FAQ page - mobile

Post-donation thank you page - mobile

X

BBC Children in Need

The One Show Rickshaw Challenge and Countryfile Ramble

The project

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.

What we did

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.

My role

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.
I adapted last year's HTML and CSS files to update them to suit the new design.
I had some very specific deadlines that I needed to work to, to tie in with announcements being broadcast at certain times and dates so meeting deadlines was an important part of this project. 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.
I worked directly with the client at BBC Children in Need the whole way through the two projects.

They said

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

Rickshaw Challenge landing page

The One Show page

Own challenge page

Ramble landing page

Organise your own ramble page

FAQ page

Rickshaw landing page - mobile

The One Show page - mobile

Own challenge page - mobile

Ramble landing page - mobile

Organise your own ramble page - mobile

FAQ - mobile

X

Crisis

50/50 Challenge

The project

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.

What we did

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

My role

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 also built the registration form, and the everydayhero campaign which collects donations and fundraiser data.
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 constant 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.

They said

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

Landing page

About page

FAQ page

Landing page - mobile

About page - mobile

FAQ page - mobile

X

The Big Issue Foundation

The Big Step Challenge

The project

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.

The site is no longer live so please have a look at the screenshots below.

What we did

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.

My role

The Big Issue Foundation provided me with some fantastic imagery of their Big Issue sellers and also some other ones of feet that they took themselves. I did the final site design in Photoshop, used a slideshow to change the header image, and 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.

They said

These look great! Generally, they’re looking really good! We really like it and we think it looks fabEllie, The Big Issue Foundation

Landing page

About page

FAQ page

Landing page - mobile

About page - mobile

FAQ page - mobile

X

GlaxoSmithKline

Trek for Kids

The project

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.

Please note that the design of the live site has changed since I worked on this project.

What we did

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.

My role

GSK already had a website for the previous year's event and they were happy with that design so I used the existing design as a base for the new site design, which I created in Photoshop for approval.
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.
I built the site in our custom CMS, with Javascript widgets, and tested it in various browsers and devices.
After the site's launch, I was available to make content changes as news and progress updates needed to be included in the site.

They said

This looks great Olivia, GSK

Landing page

About page

Partnership page

Landing page - mobile

About page - mobile

Partnership page - mobile

X

The ARCHIE Foundation

ARCHIE's Virtual Challenge - Great Walk of China

The project

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 so please have a look at the screenshots below.

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

My role

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!Claire, The ARCHIE Foundation

Landing page

About page

Stats page

Landing page - mobile

About page - mobile

Stats page - mobile

X

Hogan Lovells

CSR fundraising site

The project

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.

The site is no longer live, so please have a look at the screenshots below.

What we did

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.

My role

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.
I built the sitewith 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.
I was available to make subsequent content changes to the site at the client's request.

They said

They look fantastic so far.Regan, Hogan Lovells

Landing page

About page

Region page

Landing page - mobile

About page - mobile

Region page - mobile

X

ABF The Soldiers' Charity

The Virtual Frontline Walk

The project

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.

Please note that the live site design has changed a little since I worked on this project, so please have a look at the screenshots below.

What we did

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.

My role

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 design 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 which I did in Photoshop (they were a very detail-orientated group)
I built the pages as custom HTML and CSS from scratch, with a Bootstrap base.
I also built 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 ABF 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.

Landing page

About page

Stats page

Landing page - mobile

About page - mobile

Stats page - mobile

X

Parkinsons UK

Time to Tour

The project

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.

The site is no longer live so please have a look at the screenshots below.

What we did

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.

My role

I led a design 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 reated 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 functional and responsive 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

About page

FAQ page

Landing page - mobile

About page - mobile

FAQ page - mobile

X

Imperial College London

Giving Day

The project

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 site is no longer live so please have a look at the screenshots below.

What we did

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.

My role

I received the branding guidelines and some excellent assets from the University, and I used them to design 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.
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.

They said

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

Landing page

Landing page - mobile

X

Cystic Fibrosis Trust

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

The project

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.

What we did

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.

My role

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 me leading a design workshop meeting with the CFT team, where we discussed the event, ideas, deliverables and what the pages needed to achieve for the charity.
I produced 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 tested the pages for functionality and mobile responsiveness.
I was available to the CFT team throughout the testing and go-live phase, answering questions, and helping with changes.

They said

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

Landing page

About page

Stats page

Landing page - mobile

About page - mobile

Stats page - mobile

X

The Harrington Collection

Luxury serviced apartments in Kensington

The project

The Harrington Collection is a group of restored buildings in Kensington, London, which have been converted into luxury serviced apartments. It is Fin-Ex's main company, and it was my first project when I started as their designer. It was a large ongoing project where we redesigned the site and added new membership functionality.

What we did

When I started at Fin-Ex, the developers had already started building the site with a combination of Bootstrap and Wordpress - they had put in the basic content and page structure, and it was my job to skin the pages with a new design. My aim was to keep the structure of the design as similar as possible to the existing build, to avoid the developers having to rebuild any content or functionality while applying my design to their pages.

My role

Since the site was mostly already built, I took what had been done and overlaid a clean, sophisticated design over it. I mocked up each of the pages in Adobe XD for the CEO's approval, then we moved on to applying the designs to the pages.
I worked on the HTML and CSS of some of the pages, to help the developers out while they focused on the functionality.
I supported the developers with whatever images they needed, email designs, styling information, and functionality structure mock-ups.
I helped with testing - proof reading, responsive testing and provided feedback on issues that needed addressing.
For any content changes, I did them myself in the pages that were accessible in Wordpress.

Landing page with my design

Landing page before my design

The previous site's landing page

Apartment selection page with my design

Apartment selection page before my design

The previous site's apartment selection page

Apartment page with my design

Apartment page before my design

The previous site's apartment page

Membership page with my design

Membership page before my design

X

Continuum Economics

Political and financial research in global markets

My role

Continuum Economics is part of the Fin-Ex group, and I was responsible for creating images for each new article uploaded to the site each week. These images appeared with the article itself on the Continuum Economics site, as well as the Facebook and Twitter pages:

On Facebook

On Twitter

X

Nutripharm Direct

Nutritional supplements, information and personalised advice online

The project

Nutripharm rebranded to Nutripharm Direct, with a website redesign. As it is one of Fin-Ex's companies, I was asked to help out with brand design work that needed to be done. They had no specific brand, so I came up with some logos with a nutritional theme and we chose one that we felt summed up Nutripharm Direct and its ethos. A developer was responsible for the design and build of the Shopify site.

My role

There was no previous brand, so I developed a new logo.
I was asked to help with the design and preparation of print files for the packaging of the home blood test kits. This included a box sleeve, lab form, and instruction leaflet.
I supported the developer with whatever images he needed, as well as mock-ups for certain areas of the forms that needed a designer's eye.
I proofread the site and documented changes that needed to be made.

Logo

Box and contents

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 find out more information about this project here.

Landing page

Donation page

Event registration page

Group page

Supporter page

Thank you 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 my ideas and visualisations.

Landing page

Supporter's page, with gamefied badges and totalisers

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

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

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

Supporter's page, with gamefied badges and totalisers

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

Supporter's page, with gamefied badges and totalisers

X

Queens University Belfast - eGraduate newsletter

X

Queens University Belfast - eGraduate newsletter

X

University of Reading - Alumni newsletter

X

The Salvation Army - newsletter

X

Quick!

What would you like to see?

Work

User Experience

Interactive wireframe protoypes

Everydayhero and JustGiving

User journeys, wireframes and concepts

Social

Continuum Economics

Branding

Nutripharm Direct

Flair

The Hillview Group

Banners

Amazon AWS

Illustration

Emails

Print

Nutripharm Direct home blood test kit

BX Conference collateral

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

Battersea Dogs' and Cats' Home

Doggy Paddle Challenge virtual event

The project

What we did

My role

They said

Landing page

FAQ page

Post-donation thank you page

Landing page - mobile

FAQ page - mobile

Post-donation thank you page - mobile

BBC Children in Need

The One Show Rickshaw Challenge and Countryfile Ramble

The project

What we did

My role

They said

Rickshaw Challenge landing page

The One Show page

Own challenge page

Ramble landing page

Organise your own ramble page

FAQ page

Rickshaw landing page - mobile

The One Show page - mobile

Own challenge page - mobile

Ramble landing page - mobile

Organise your own ramble page - mobile

FAQ - mobile

Crisis

50/50 Challenge

The project

What we did

My role

They said

Landing page

About page

FAQ page

Landing page - mobile

About page - mobile

FAQ page - mobile

The Big Issue Foundation

The Big Step Challenge

The project

What we did

My role

They said

Landing page

About page

FAQ page

Landing page - mobile

About page - mobile

FAQ page - mobile

GlaxoSmithKline

Trek for Kids

The project

What we did

My role