Select Page
iDonate

Optimising site architecture with a redesigned user flow and creating a new visual design with a particular focus on accessibility.

UX / UI WEB DESIGN

Croi UX UI Design

Project Overview

Croí is an Irish charity dedicated to the fight against heart disease and stroke. Since 1985 Croí has provided cardiac care in prevention, treatment and rehabilitation. They support families affected by heart disease and stroke and support heart health with healthy lifestyle programmes. They also deliver training to the general public and healthcare professionals, along with raising awareness and facilitating and collaborating in vital research.

I was approached to redesign the Croí website and to provide a better user experience. The website needed a visual redesign and the establishing of a defined visual hierarchy. Accessibility was going to be a key factor in the visual design also. There was a vast amount of content that was becoming lost and finding information was quite difficult. An overhaul and reorganisation of the site architecture would be central to an improved user experience.

I worked on the project as the sole designer on all aspects from research, testing, conception to visual design. The project involved user testing, specialised accessibility testing and working closely with the development team.

Jump to Section

Quantitative Research

Metric Analysis

Data from integrated site analytics were studied and analysed to gain an understanding of the user demographics, behaviours and flows through the existing website.

Surveys were taken of sample users to help to identify potential pain points and user frustration.

This data showed an overview of the user demographics, platform preference and information on user flow throughout the website. It also highligted current users’ expectations and desires around their motives, while using the Croí website.

Croi User Demographics

Croí User Demographics

Croi User Surveys

User Surveys

Competitive Benchmarking

A full competitive benchmarking exercise was undertaken to gather a better understanding of the industry standard, potential user pain points, defined user mental models and opportunities to create a better user experience and use design as a competitive advantage over other cardiac charity organisations in operation in Ireland.

I looked at the overall user experience in detail for each competitor, but focused extensively on the positives, neutrals and pain points involved in:

  • $Homepage Layout and Content
  • $Navigation and Information Architecture
  • $Donation Process
  • $Organisation and Promotion of Events

Qualitative Research:

Usability Testing Sessions & Depth Interviews

A series of usability tests were conducted on sample users with the goals of:

  • $Determining the main source of user pain points
  • $Identifying the causes behind user confusion in site navigation
  • $Highlighting issues around event onboarding
  • $Establishing the source of user frustration in finding programmes suitable for particular conditions
  • $Understanding the user's emotional response to the visual identity of the website

Based on these goals, I developed a series of tasks for the users to complete, including finding information about particular conditions (e.g. “Cholesterol”), finding information about how to reduce the effects of this condition, find a relevant programme organised by Croí that will help in reducing the effects of this condition, signing up for an event, finding news linked to a specific condition and setting up a recurring monthly donation.

The users were carefully chosen to give a range of computer literacy, age and device-preference. The testing sessions themselves were a mixture of in-person sessions and remote sessions. All sessions involved a depth interview afterwards to probe further into the pain points and mental models of the users.

Analysis

User Pain Points & Opportunities

Croi User Testing Analysis

Pain Point:

Users have difficulty finding the information that they are looking for

During usability testing sessions, a pattern emerged of users having great difficulty in finding information about a particular condition. The jargon used in site navigation was causing confusion and users were expecting a landing page “Your Health”, where they could find more information and became frustrated when they could not find one.

Opportunity:

Conversational Landing Page with Search Bars

Create a landing page for “Your Health” that directs the user to find the information they are seeking easily. Using more “conversational” language and integrating search bars on the page, and again on each of the condition information pages will help direct the user where they want to go without getting “lost”. 

Pain Point:

Finding a programme to reduce the effects of a condition is difficult

All users found it difficult and frustrating when trying to find a Croí programme that would help them reduce the effects of their condition (e.g. lower their cholesterol). Users spent a huge amount of time searching through individual pages without finding a programme that they believed would be helpful for their condition.

Opportunity:

Link the “Your Health” section to the “Programmes” section

A sample user flow through the site would be a user suffering a conditon such as high cholesterol, looking for information on what it is, how to live with it, lifestyle options, before moving on to look for a programme (dietary or fitness) that would help to lower their cholesterol. By adding a “How can I prevent…” section to the information page and using this section to link to relevant programmes that might help this condition, the user can easily follow this flow.

Inversely, each programme should have a “This programme can help with…” section to inform the user of the condition it may help with. We would also create a filter/search function within the Programmes section to show only programmes that would be suitable for that condition.

Pain Point:

Users couldn’t find a list of all events

Many users didn’t notice the list of events on the homepage. Most looked for a menu item in the navigation bar, but became confused when they didn’t find one. The users who did find the events list on the homepage were frustrated when they could not filter events by location to display only events nearby them.

Opportunity:

Create an Events Calendar

By presenting the events in a calendar format, on it’s own established page directly accessible form the main site navigation bar, users will be able to find a list of all upcoming events. Creating filters on this events calendar will allow users to display only events near their location or within a certain date range. Defaulting the location field to the user’s location will create ease-of-use, but also allow the option to search for another location in the case that the user is browsing from another location or for a friend in a different location.

Pain Point:

Users could not find news related to a specific subject/condition

Some users wanted to find news items about their own condition (e.g. “Stroke”). They became frustrated when they could not find all news items about Stroke and had to resort to scrolling through all news items.

Opportunity:

Filters and Integrations in “My Health” section

Adding simple filters to the News section will allow users to display only news items for particular conditions and/or subjects. Adding an ajax search bar will help in facilitating other less common subjects and conditions. Adding “Related News” sections to each condition information page, showing the three most recent news item on the condition/subject will help the user stay up-to-date on all information around their condition easily.

Accessibility

As Croí’s website caters for patients who have suffered from Stroke, accessibilty was very important during the design process.

During the test phase, users were show different versions of visual design prototypes and asked to rate the readability of different designs, utilising different weights of typography, and differing contrasts in colour design.

Also, some testing was undergone by some visually-impaired users, who tested the accessibility of the existing website with a screen reader. This highlightd some issues with labelling, especially on sign-up forms, like the newsletter signup. 

Personnas and User Flow Maps

Five distinct user personnas were created:

  • A new user who wants to find information about a condition and sign up to a programme.
  • A user who wants to make a donation.
  • An existing user who wants information on class/programme schedules.
  • A medical professional looking for Croí news and updates.
  • A volunteer who wants to fundraise for Croí.

From these personnas, different scopes and scenarios were mapped out and detailed user flow maps were created for each.

Visual Design:

Colour Template

The existing website was very templated and, as a result, the existing colour template was quite harsh (bright red and black) and created a negative emotional response.

I researched the psychology of different colours, their associations and using established mental models that I discovered through the competitive benchmarking exercise, I decided on a new colour template for the website.

The colour Red has immediate associations with the heart. By using a more softened version of the colour as the primary colour, it can also convey calmness, warmth and happiness.

Bringing in a muted Blue colour as a secondary colour would compliment the red. Blue also has associations with the health profession.

Croi Colour Template

Animation

Adding some motion and animation to the “Donate” button brings the user’s attention to the button and encourages interaction. The button was designed to emulate a heartbeat on hover on desktop devices.

Tools used: Pure CSS

Croi Donate Button Animation

Wireframes & Prototypes

All iterations of wireframes and prototype designs had to be presented and approved by the Communications team and the Managing Director.

High-fidelity, fully annotated wireframes for each page were designed using Figma. We were working remotely with a development team based in the UK, so all designs were delivered as interactive annotated wireframes with downloadable assets and style guides and for each flow I also delivered an instructional video demonstrating and showcasing each element on each page. I find that the video demos can help greatly in communicating a design to a remote teams of developers and can help to reduce confusion or misinterpretations of design elements.

Your Health Page Design Croi
Croi Website Screen Design

Conclusion

As of yet, the project has not been fully implemented, as resources within the organisation were needed more urgently for other projects that fell under the ownership of the Croí organisation.

The colour template, typography and some of the visual elements have been implemented on the site and there are plans to revisit and complete the redesign in mid 2021.

This project highlighted the problems and pain points that can occur with a website that contains a huge quanitity of information. The key learning was the importance of a well-structured site navigation and user flow based on proper research.