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