COntactAboutCareerWOrksIntro
Website

Voluntary Organization - Website

CFI is a voluntary organization that focuses to improve the treatment and facilities for people with Cystic Fibrosis in Ireland. The goal of CFI was to increase fundraising and voluntary contributions. They wanted to achieve this goal by increasing firstly the conversion for its donation process through the website form and online store, and secondly, by improving the overall website experience across all devices.
Client:
Cystic Fibrosis Ireland
Release Date:
August 2019
See Live Project

What I did

‍

Project Kick-off Meeting

The purpose of this first meeting was to firstly introduce the team, secondly to understand the project background, what success looks like and understand what needed to be done, and lastly, to agree on how to work together effectively. To get the project up and running, the team outlined what was needed from the client to complete the next steps in the UX phase.

‍

Basecamp project management tool

‍

UX Research Phase Requirements

Analysis of the current website performance.

‍

‍

Initial UX Research

  • Creation of the UX report, showcasing UX findings from HotJar and analytics.
  • Presentation of the UX report to the client.
  • Implementation of findings directly into the design phase for the other templates, using gained data.
    ‍
UX Review Report

‍

User questionnaire

Google Forums - User Questionnaire
  • A user questionnaire was created to ensure the collection of all data, which helped to collect valuable insights and to apply them directly to the design or follow up on.
  • The questions focused on frustrations, pain points and suggested improvements. The questionnaire was reviewed by the client and after implementing their feedback, the questionnaire was shared via email to selected users.
  • Results were formatted in a google spreadsheet. This allowed easy access to the results to both the client and the Kooba team.

‍

Sitemap

Creation of the sitemap, which outlines the site structure and the template applied to each wireframe. This was used to define the taxonomy through grouping of related content. This ensured content is in places users would expect to find it.

  • T01 - Homepage
  • T02 - Donate
  • T03 - Standard Listing
  • T04 - Standard Content
    ‍
Website Sitemap - Slickplan Tool

Homepage Wireframe

‍

  • Review of sitemap and wireframe from the client.
  • Implementation of client’s feedback.
  • Conclusion and sign-off of the UX phase.
Wireframe Homepage

UI Homepage

We have improved the overall visual aspect of the website by giving it a friendly and approachable look and feel with intimate positive yet informative imagery. The new website sets the overall message of the Cystic Fibrosis Ireland brand as being an approachable voluntary organisation supported by fundraising and voluntary contributions, providing a wealth of information in relation to Cystic Fibrosis.

Homepage UI Desktop Version 01

As the website provides a wealth of information in relation to Cystic Fibrosis, we wanted to make sure the users were able to find all of the various information that the website has to offer. As a consequence, we designed a simple drop-down menu navigation system.

The aim of the menu was to provide a simple and clear menu system that the user could use to easily navigate to the desired information. We have also added featured content within the dropdown menu to push seasonal content, such as upcoming events and important informative articles to further educate the user.

Homepage UI Mobile Version 01

UI Feedback

Through InvsionApp the client collaborated on design prototypes by adding comments and feedback directly to the design screens, followed by feedback implementation.

InVision Feedback

UI changes

  • Creation of multiple variations of the ‘Donate’ CTA button.
  • Creation of different versions of the ‘Services and Support’ section cards.
  • Improved explanation of the UI homepage design to the client by sending links showcasing the hover state interactions separately within the design.
  • Conclusion and sign-off of the UI homepage design.
UI Changes

UI Templates

  • Development of the remaining desktop and mobile UI templates.
  • Review of the UI templates by the client.
UI Templates
  • Troubleshooting issues with the client. The fact that the templates visually communicate all instances and not a real content-based example, was not clear to the client.
  • Resolution of the issues raised by designing mock-ups to better communicate how the templates would be displayed. This extended the feedback process with the client, therefore resulting in altering project timelines.
  • Conclusion and sign-off of the UI templates design.

Donation Form

CFI’s online donation page is an important part of a holistic fundraising strategy. We have made a compelling case for users to head to the donation page through clear calls to action throughout the website. The design and feedback process went through a number of different iterations, and was extended in making sure that the client’s requests were met. Once the client was satisfied with the amendments, the user interface design was signed off.

Donation form iterations

Online Store

An online Shopify store was needed for the new website. This was selected and populated to follow the look and feel of the newly created website design. The creation of the Shopify store required collaborative work with the client to populate content throughout the new Shopify store.

Online Store

Handover Process

Handover Process

File Handover

Design file organised into a Desktop, Tablet, Mobile, and asset views. Assets including Colour pallets, text styles, and Illustrations

File assets

Test Site Review

Feedback provided to front-end regarding bugs and other issues, followed by amendment. This was achieved through screenshots and logging of issues on Basecamp through a “To-do” list, followed by assigning the issues to the allocated F.E team member.

Design review for Front-end

Website Launch

Post Launch Report

Overall the project was a success. The success was measured in the post-launch report, which showcases the comparison of the old and new website design. Here, it’s visible how the new website displayed great improvements overall.

Post launch report

Feedback & Learnings

  • The project was not in line with the original timeline but was launched successfully without any issues.
  • The team was happy with the success of the project but slightly frustrated that the design process had a lengthy reviewing process.
  • The client was very satisfied with the final result.
  • The main lesson that can be learned from this project is that we need to improve the communication process that describes what the client will be receiving throughout the agreed duration of the project.
  • Additionally, user testing plays an important role in the success of the project. However, due to the nature of the design agency and the limited timeline provided to complete the project, user testing could not be undertaken. In future projects of a similar nature, it would be an utterly important matter to consider.
Portfolio

More Case Studies

View Case Study
Inbound Marketing - Website
Website
View Case Study
Design System
Product
View Case Study
Finance - Website
Website
About Me

I'm a designer based in Ireland. I’m a passionate, user focused digital designer who enjoys turning complex problems into simple intuitive designs!

Navigations
IntroWorkCareerAboutContact
Contacts
I’m based in Ireland
cormacreidy1993@gmail.com
Send Message
Follow
Powered by Webflow