Voluntary Organization - Website

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.

‍

‍

UX Research Phase Requirements

‍

‍

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

‍

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
  ‍

Homepage Wireframe

‍

• Review of sitemap and wireframe from the client.

• Implementation of client’s feedback.

• Conclusion and sign-off of the UX phase.

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.

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.

UI Feedback

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

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 Templates

• Development of the remaining desktop and mobile UI templates.

• Review of the UI templates by the client.

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

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.

Handover Process

File Handover

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

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.

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.

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.