Angioma Alliance Canada ©

A UX CASE STUDY

OVERVIEW

Angioma Alliance Canada  ©

Angioma Alliance Canada, founded in 2011, is an organization for those affected by cavernous malformations, their loved ones, health professionals, and researchers. Angioma Alliance has sister organizations located around the world that provide support and information to thousands of individuals around the world.

The PROBLEM

Individuals with angiomas seek out online information about their condition. Family members and the newly diagnosed search for virtual support systems. Although there is a Canadian Angioma Alliance organization, they did not have an online presence.

“Coming Together for Support,
Acting Together for a Cure”

– www.angioma.org

OBJECTIVE

I was tasked to design and develop the Angioma Alliance Canada website, which is an affiliate to it’s American organization, angioma.org. 

Under the direction of both the President of the US Angioma Alliance Organization and the President of the AAC, my goal was to design a new website for the Canadian affiliate, Angioma Alliance of Canada. The design of the required features and layout/structure were crucial in planning and organizing as the client wanted to present the vast amount of content (provided by the US website) in a clear and legible way, given the nature of the organization.

ROLE

Research, prototyping, UX/UI design, development.

TOOLS

InVision, Sketch App, Illustrator, Photoshop, Miro

CHALLENGE

By designing a new organizational website, I had to ensure that content was organized in a comprehensive structure. This forced me to understand from the user’s perspective what material they would need to access first as there was so much information to present.

The PROCESS

UX-process

RESEARCH

I ran an online survey to gain insights into what users needed and how they could benefit from the website. They survey validated some of my assumptions and provided me with clues on how to improve the user’s experience.

I wrote a short 12 question survey and posted it on various Facebook groups that matched the targeted user. These are samples of the (26) results:

 

USER QUESTIONNAIRE RESULTS

AA_graph_3

RESEARCH INSIGHTS

98% knew someone with a cavernous angioma (may have included themselves).

28% participants did not have a cavernous angioma, suggesting family/loved ones.

25% of participants were recently diagnosed which emphasizes the need for a separate section for the newly diagnosed.

57% feel that it is very important to find online information about cavernous malformations. This is not as high as I expected however, some patients may prefer information provided by their physicians.

Not surprising that few individuals have heard of Angioma Alliance Canada organization as a website was not yet available.

72% viewed finding a community support system for cavernous malformations extremely important.

Given that 90% of people surveyed would like to learn about clinical research on cavernous malformations, I will ensure that this feature has focus in the design.

 

The research also revealed that information and accessing support systems are extremely important to those affected by this condition. This opens up a variety of options that will ultimately be streamlined to fit within the scope of the project.

Providing users with information about current clinical research must be incorporated into the design since users are hoping for a cure. They also want to be informed about genetic testing as this condition can present as familial or sporadic.

PLANNING

EMPATHIZING & UNDERSTANDING

Based upon the insights gained from the research, I decided to create three personas. The users for which I am designing for are individuals can range across all ages, gender, demographics; thus representing the nature of the disease. The users include caregivers who are usually family members in need of support. A recently diagnosed who’s main goal is to seek information and finally a user who’s primary goal is to learn about current research.

I refer to the personas throughout the entire project.

USER PERSONAS

persona

Three user personas with different needs.

User Scenario

To gain a clearer understanding into how people will use the site, I created a storyboard based on the persona ‘Jon’ depicting his user scenario. This process helps me empathize more with the user’s need and recognize that individuals may not be getting enough information from their doctors about their condition. 

From this I understand the importance of presenting as much information on the website as possible that will help people understand as much as possible about CA’s. This will help them cope emotionally with the things that they are facing regarding their health.

AA storyboard

User scenario of a newly diagnosed user.

Sorting User Goals

With the needs of all three users to consider, I sorted their goals into categories to help me determine the main features/menus of the website. This strategy was essential for combining the data into categories to prepare me for the ideation process. 

sortBoard

Sorting the user’s goals to develop the main website structure.

HWM Statements

Using the HMW (How Might We) helped me to further understand the user’s needs and create solutions that can be directly converted into features:

  • HMW consider the needs of someone who was recently diagnosed.
  • HMW provide an online community for support.
  • HMW help users stay up to date with current research.
  • HMW present essential information to caregivers and loved ones.
  • HMW provide ways to raise money and fundraise.

PROBLEM STATEMENT

Thousands of Canadians are living with CA’s and feel overwhelmed by their condition. Currently there is no Canadian website for caregivers, newly diagnosed and others living with CA’s to visit. A community support system is needed along with resources that can inform individuals of CA’s. 

IDEATE

Due to the range of user goals, I prioritized them according to necessity based upon the personas.  Many client discussions help determine the ‘must have’ features which were drawn from the needs and goals. The client also had permission from its American affiliate to base the main features/pages off their website. 

By whatever name you know it – cavernous angioma, cavernoma, cerebral cavernous malformation – find information, opportunities, and hope here.

– Angioma Alliance of Canada 

This gave me a better sense of how to organize the main features which would translate to the menu items and their corresponding pages.  The ‘nice to have’ will be included if possible. The ‘save for later’ do not fit within the scope of the current project. These are organized below:

SORTING FEATURES

Features List

INFORMATION ARCHITECTURE

Creating an information architecture diagram was essential in visually organizing the structure of the prototype. The main menu items are directly based upon the user’s needs taken from all three personas.

The goal here was to make the structure as simple and comprehensive for users

Information architecture

Information Architecture for the Angioma Alliance Canada – version 1.0

DESIGN

Designing the Prototype 

At the end of this phase, a clickable prototype outlines the basic structure of the home page. This was the final version that was used as a starting point as new features were realized, modified and added. The prototype included the main features that were most important to the stakeholders, while maintaining a comprehensive layout.

Lo-Fidelity Prototype

lo fidelity

Lo-Fidelity Prototype Sample Home Page

The wireframes helped me visualize the structure of the website and placement of the content. I realized that the hierarchy of information one the homepage had to consider that users would not be necessarily scrolling through the entire the page at first visit. That is, some may people might immediately use the top navigation instead of searching through the content. So placing the most relevant information at the top was essential and at this phase, taking precedence over visual media such as hero images. This is not to say that these details would not be revised in some way in the future.

UI DESIGN

Now that the wireframes are completed, and I have a clear understanding of the main structure of the website, it was time to move on to the visual aspects of the interface.

The client stipulated that the colours should be consistent with the affiliate website which made things easy to work with. The primary colour choice helped furnish the designs with a clean monochromic colour scheme.

Colour Scheme:

#981b1e

rgb (152 27 30)

 

#333333

rgb (51 51 51)

 

#75757a

rgb (117 117 122)

 

Typography

I kept in mind that individuals using this website may have suffered neurological deficits. Vision and cognitive impairments require certain typographic considerations be made during web design and development that affect design choices. So I chose PT Sans sans serif for it’s versatile and simplistic presentation that makes it useful for web design

{  H1  } PT Sans –  Bold
{  H2  }  PT Sans –  Semi-bold
{  H3  }  PT Sans –  Regular 

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

abcdefghijklmnopqrstuvwxyz

Logo

The logo icon was a pick up that was to be used in the website and not altered. It demonstrates the nature of the condition clear and simple. The integrated colours maintain consistency within the website elements.

angioma Alliance Logo

The logo layout was purposely constructed to fit within the available space within the header, so a long-landscape orientation was the focus of the designs.

Final Designs

AA page 2
AA home
AA page 3

THE TAKE AWAYS

…and final thoughts

  • When designing a platform that revolves around a disease such as cavernous angiomas, developing user empathy is extremely important in meeting the user’s needs and goals.
  • If your design involves multiple users with different goals and motivations, create user personas for each of them. This will help generate and drive the ideation process.
  • When handling a design with vasts amount of information, make sure you get your layout secured and finalized as soon as possible..
  • Communicate with stakeholders earlier and regularly.

Ready to Start a Project?

I'm Available for Hire or Freelance
Get in Touch