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

iDonate

UX DESIGN UI DESIGN IN PROGRESS

A full UX redesign of the Croí website, involving conducting quantitative and qualitative reasearch, competitive benchmarking, metric analysis, usability testing, user journey mapping, user flow design, wireframing, prototyping and refining.

Croi UX UI Design

Background

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.

Process

Research

Croi User Demographics

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.

This data showed an overview of the user demographics, platform preference and information on user flow throughout the website.

Interviews with stakeholders were also conducted in order to gain a better insight into the goals of the Croí website, along with the perceived problems that the existing website was causing.

User Surveys

A series of surveys were conducted with sample users of the existing Croí website in order to get a better insight into the expectations, mental models and frustrations of current users.

I used the tool SurveyMonkey to conduct the surveys and gathered both structured and unstructured data from a selection of users. This data was compiled and analysed.

Croi 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

    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

    KEY FINDINGS:

    Users have difficulty finding the information they are looking for

    Pain Point:

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

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

    Pain Point:

    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.

    Users couldn’t find a list of all events

    Pain Point:

    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.

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

    Pain Point:

    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.

    Croi User Testing Analysis

    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 user journey maps were created for each, looking at users’ GoalsContextBehavioursPain Points and Mental Models.

    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

    Low-Fidelity Wireframes

    All iterations of the wireframes and prototype designs had to be presented and approved by the Communications team and the Managing Director. Low-fidelity wireframes were first created and approved before moving on to clickable prototypes that could be used for user validation testing purposes.

    Prototype

    Clickable Prototypes

    Clickable prototypes were created and user validation testing was conducted on the designs before moving on to high-fidelity wireframing.

    Validate

    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 highlighted some issues with labelling, especially on sign-up forms, like the newsletter signup.

    User Validation Testing

    User validation testing brought about some tweaking that was needed, particularly around accessibility, colour design, contrast, typography sizing and weight. These findings were brought back to the next iteration of the design stage.

    Design

    High-Fidelity Wireframes

    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.

    Croi Website Screen Design
    Your Health Page Design Croi

    Conclusion

    Thoughts & Learnings

    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.

    Services

    UX/UI Design

    Web Development

    Graphic Design

    Film & Animation

    Let's start working on your project!