Client

Fund it

My Role
  • Front-end Development
  • UI Design
Summary

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

Project Goals
  1. Improve visibility of key user actions such as starting, guiding and funding projects
  2. Redesign the home page, browse and search functionality
  3. New branding implementation, font choice and accessibility re-design
  4. Responsive design for varied devices
  5. Improve user profile dashboard and notifications feedback
  6. Redesign the project creation and funding forms
Research Methods

It was determined from the start of the project that there would be no budget for a UX strategy overhaul – we had no direct line to the user. Therefore, we did the next best thing. We collated feedback from four different sources – the client, Google Analytics, social media and an internal review within Fusio.

Basecamp & emails

Google Analytics

Social Media

Internal Review

From the client we collated data from Basecamp – our Project Management software for clients – and asked them to assemble a document with common issues that users emailed them about through their various contact email addresses.

We examined and extracted useful data from several years of Google Analytics metrics.

We went through Fund it’s Twitter and Facebook accounts and gathered critical feedback.

We did an internal review with our staff members with a mix of people familiar and unfamiliar with the website.

Core User Needs

We were able to extract a number of core user needs from the minimal data we had access to.

  • Users wanted a clear pathway on where to go to start, fund and browse projects and login to their account dashboard.
  • They wanted assistance in setting up their projects, especially if they were first time users.
  • Users wanted a better project start signup form – there were frustrations that the form was very long and there was no save function.
  • They wanted a sense of reassurance that their project would be successful and that the time they spent setting up and maintaining their project was worth their time.
Designing Fund it's Hero Section

Fund it’s users reported a common problem where they were having issues with a) where to go on the site to start a fundraising project and b) being somewhat lost putting together all of the information that was required to start the project. Therefore, a fundamental part of the re-design was steering users in the right direction.

With this user feedback in mind, I set about creating a wireframe of what the user would see when they landed on the homepage. I worked through a few variations until both us and the client were happy.

The final design guides the user so when they land on the homepage they focus their attention on the following core elements:

  1. logging in
  2. registering
  3. viewing project start tools
  4. social media links
  5. starting a project
  6. searching the site
  7. browsing projects;
  8. and Fund it’s sponsors.
Designing the Project Component

The project component appears multiple times on the home page and on the various project categories. It is adaptable to whatever category it’s placed in, meaning that each category has its own colour that’s reflected in the component.

With this in mind, Sketch proved to a great design tool as it let me quickly adapt each component to its relevant colour and was an efficient method to quickly create visual mockups for the client.

I worked through several iterations of the layout in wireframe form and of the visual design in high fidelity mockups.

The final project component design serves the user multiple bits of information without overwhelming them while being aesthetically engaging. It displays the following elements:

  1. project category
  2. location of the user/ company setting the project up
  3. project title
  4. project owner
  5. blurb
  6. amount raised thus far
  7. amount raised as a percentage of the target amount
  8. days remaining on the project
  9. a read more about the project button;
  10. and a direct shortcut button to fund the project.
Designing the Project Start Form

Users frequently reported having trouble with the project start forms. There were two key frustration points.

  1. There were no save points in the form. Users had to fill in six separate sections of the form. Some dedicated users reported copying and pasting their information from their PC’s notepad as backup and
  2. Each section of the form was in a tabular format – this proved to be a terrible user experience for users on mobile. By 2016/2017, 58% of people were coming to the website on mobile versus 42% of desktop users. However, Analytic showed that desktop users were completing tasks such as registering and starting projects at a much higher percentage.

To improve the user experience we designed it with mobile users in mind. It includes the following upgrades:

  1. We added a save button so users can save their form at intervals of their own choice and go back to them in their own time
  2. We removed the tabular format of the form submission in favour of Steps and made it long form. This allowed it to breathe more on mobile.
  3. Due to a technical, legacy issue with the code we had to keep the form on one page rather than split it into 6/7 pages. As a workaround, we added “+” and “-” symbols that can open and close the sections of the project submission form.
  4. This shows the mobile section in its collapsed state. If the user is finished filling in the details of that section they can close it to shorten the length of the form.
Success Stories Section

This was an idea I conceptualised for the project, considering the need to re-enforce the idea in peoples’ minds that putting their project on Fund it can result in success.

The user might be sitting on the fence on whether to take the time and effort in constructing their project page – this section is intended to be a positive psychological push.

Learnings

Improvisation

Without a UX budget and being able to directly contact users for feedback, we had to collate several bits of information together from various sources. This taught me I could source valuable bits of user feedback and behaviour even if I diverged from common research methods.

Component Design

This was the first project where I really got to grips with Sketch and its use of symbols. It meant I could design the project component, for example, and rapidly mockup a page with 8-12 projects for the client.