Fund it

My Role
  • Front-end Development
  • UI Design

I led the design refresh on Ireland's leading project funding website

Launch Date

12th October 2017

Problem Statement

Fund it had new branding commissioned and wanted to integrate it into their website, while separately they wanted to make key changes elsewhere on the site.

I was tasked with refreshing the user interface with the emphasis on delivering a responsive design, improving the homepage design, project and blog layouts, and improving the search, browse and category functionality.

Designing Fund it's Hero Section

A screenshot from the live site's hero section

Fund it wanted the user to see quite a lot of information when they landed on the homepage. Users had to have quick access to:

  • logging in
  • registering
  • viewing project start tools
  • starting a project
  • social media links
  • searching the site;
  • and browsing projects.

Analytics from their previous site showed that users needed help most with starting a new project and advice on how to set it up. Therefore, a fundamental part of the re-design was steering users in this direction.

Out of Fund it’s branding guidelines I chose the colour purple as my primary call to action colour as it worked best for accessibility – white text on purple colour background – and it popped on the majority of images I placed it on. The secondary button is an inverse of the first. I gave the buttons equal weight and prominence as both served dual purpose and importance to the user.

The client also wanted to show their sponsors. I designed this section – header, hero-image and sponsorship – to fit within a 768px height on desktop – above the fold on the majority of desktop screens.

Designing the Project Component

The project component was arguably the most important design aspect to consider for the new website – this component has to serve the user multiple bits of information without overwhelming them but also be aesthetically pleasing. It displays the following:

  • project category
  • the location of the user/ company setting the project up,
  • the project title
  • the project owner
  • the blurb
  • the amount raised thus far
  • the project target amount
  • days remaining on the project
  • a read more about the project button;
  • and a direct shortcut button to fund the project.

A project post from the previous Fund it site

It went through a few design iterations. Fund it needed a way of displaying not just the active projects but finished ones too – rather than un-publishing them altogether from the site, they wanted users to be able to go back through the archives for reference and inspiration. I decided that the top half of the project component would be the static content, the bottom half would be dynamic content.

In that way, the top half shows the project feature image, the categories the project sits in, the top colour bar reflected the primary category choice etc.; the bottom half displays dynamic changes like an increase in funding, the amount of time remaining, and the background colour could change depending on what stage of the project it was in. I used the Fund it brand green to signify project completion and (hopefully) success.

Fund it was first launched in the early 2010s and many of their legacy images were uploaded in square format. Therefore, I originally went with a square design to align with this. My personal preference was to have them in a rectangle 16:9 / 16:10 format so designed that option as well.

Together with the developer we figured out we could run a script that would convert all of the old images into rectangular ones. For me, the second solution is better because it takes up less of the screen’s real estate and conveys the same amount of information.

At the last minute, I also chose an opaque overlay where the category and Location flags sit so even though there was less of the image to view the user could see a little more of the image.

The Browse by Categories section

I suggested the idea of a highlighted Browse by Category section on the homepage to the client. The client wanted the categories to be more discernible but they were originally meant to be inside the navigation menu only. Due to the time and thought put in to the new colour range I thought it would look great being highlighted on the homepage where the website users could easily access the categories in a more engaging way. Originally, I designed these to be square but I needed to do something different design wise to all the squares and rectangles elsewhere on the site so went with circles instead.

Success Stories Section

An export from the Sketch design file of the Success Story section

This was an idea I conceptualised for the project, it being neither in the re-design brief or the previous website. I felt the homepage needed something more than just a list of projects and the section also acts to re-enforce the idea in peoples’ minds that putting their project on Fund it can result in success.

If a user is sitting on the fence on whether to take the time out to go to all the effort in constructing their project page, this section is intended to be a positive psychological push.

Other Project Images

The hero section of an individual project funding page

Screenshot from an individual project page with a detailed project background and funding options

Users' view of the various categories when viewing on desktop. Projects can be categorised by their media type and their occasion type e.g. ending soon or live.

The landing page on mobile

An individual project page on mobile

The browse projects overlay on mobile