Background:

JDRF is the leading global organization funding type 1 diabetes (T1D) research. Their vision is a world free from T1D. All the work they undertake helps those with T1D live healthier, safer, and easier lives.

As they have moved more of their initiatives online and wanted to expand their digital offerings and online communities, they needed to create a new website experience – the main point of entry to JDRF for those who are newly diagnosed with T1D. They wanted the website to act as the first part of a prospect funnel, guaranteeing the best user experience for our constituents, ensuring they are finding the information and resources they need, connecting with those who have a shared experience, capturing email addresses, and ultimately converting them to an active supporter of JDRF, whether as a donor or volunteer.

As part of the competitive health charitable sector, they wanted to ensure everyone who visits the website leaves with a favourable impression of JDRF as a trusted brand – having found what they were looking for and being more inclined to support the organization when asked.

 

The Problem:

JDRF’s current website is not easy to navigate, has content that is difficult to find, and needs more relevant content for the users. Complex and busy layout, lack of navigation aids, too much text, poor interface design are some other issues we found with the current site.

The primary business needs I defined were:

1. Improve people’s understanding and awareness about JDRF’s mission and vision
2. Convert visitors to donors and provide enough value for a user to ultimately convert them to becoming a JDRF donor or volunteer
3. Increase user acquisition and engagement through design, relevant content, and user experience
4. Design an interactive solution with an intuitive, easy-to-use interface that addresses the problem found in research
   

    

The Solution:

I re-designed the current JDRF website to provide individuals with more meaningful information about type 1 diabetes, JDRF’s mission and programs, and easy ways to get involved. This would help establish trust and confidence in JDRF Canada, increase awareness, and ultimately empower individuals to get involved and donate.

User Research:

To gain a better understanding of how I could more effectively address this problem, I read available information about T1D and conducted interviews with diabetics and caregivers. Each interview lasted between 45 minutes to an hour and was video recorded.

In the interviews with diabetics, I covered three main topics:

1. Their diagnosis experience
2. Their adjustment to their new lifestyle
3. How they currently manage their diabetes

I also asked a few questions on their decision-making process in relation to their diabetes.

In the interview with the caregivers, the topics I covered were:

1. How they learned how to take care of their diabetic
2. How their caregiving has changed over time
3. Their experience as a caregiver as a whole

 

Uncovering the barriers to involvement

After user interviews, I used affinity mapping to find common themes in the data I collected. As a result of this activity, I was able to discover several major trends that I need to address in the next phase of our design process.

Some of the major pain points I identified included:

• People felt they don’t have enough information, support, and educational resources to learn about T1D
• People wanted to be more involved in the community but were unsure where to start
• People felt like they need to stay on top of research, forums, trends, and contacts
• People wanted to validate that organizations were trustworthy and aligned with their values

 

 

Secondary Research:

To validate our findings, I conducted secondary research focused specifically on the diabetes online community, social support and community engagement, and why individuals don’t get involved in social issues and organizations. Reading about other studies already done in this subject will help me better understand what has already been looked at and what gaps there are in this context.

• The diabetes-related HCI research articles on recent HCI studies that have been conducted in the similar context of diabetes. The article Seeking Health Information in the Diabetes Online Community (DOC): The Role of Health Literacy, Social Support and Community Engagement on Treatment Adherence provided us the takeaway that the Online Diabetes Community offers unique information that helps inform decision making that type 1 diabetics can’t find anywhere else. The online community also provides type 1 diabetics social and emotional support from others who are going through a similar experience.
• The Stanford Center for Longevity discussed the three main reasons why people don’t volunteer. Lack of time, money and resources are the most common barriers to involvement, the article also revealed another important insight: most people don’t volunteer because they simply aren’t asked to.

 

 

Current Site Analysis:

I looked at the current JDRF website to determine their existing areas of focus and what could be improved to address both business and user needs. I found that the current website has a lot of information, but it’s difficult to navigate to find what you’re looking for. So, it’s not surprising that I identified several issues that might discourage an individual from getting involved including:

1. A lack of information about JDRF’s vision/mission and their value proposition on the homepage
2. A lack of positive and strong first impression with visual design
3. An inefficient donation process
4. A lack of user-friendly navigation framework and clean layout
5. Not clear about how to help/ways to give
6. A lack of evidence showing the impact that JDRF has made and the impact you can have as an individual
7. A lack of content strategy

 

 

 

 

JDRF Around the World:

What’s done well on other international affiliates website:

• JDRF branding, imagery, elements, & icons
• Better navigation and clean layout
• JDRF’s mission is clear
• Showcases their impact, the latest research, and news
• Subscribe section to stay up-to-date on the latest in T1D
• Sticky navbar

 

 

 

 

Competitor Analysis:

To gain inspiration and identify best practices for my website redesign, I conducted a competitor analysis. I began by looking at the websites of several other non-profit organizations including Diabetes Canada, Sickkids Foundation, and International Rescue Committee, and many more.

Organization Mission: One common design pattern I observed was that each non-profit prominently displayed their mission statement at the beginning of their homepage. This was an important method to effectively communicate each nonprofit’s mission to the user and help them better understand what each organization does.

Donate Button: Another common feature I identified across these websites was the placement of the donate button in order to emphasize it as the main call to action. This was an important design pattern to consider in order to make it easier and more efficient for users to get involved and donate.

Donate Page: On the donate page, I noticed that many non-profits had pre-determined donation amounts in order to make the donation process easier and more efficient for users.

 

 

 

Donate Button Placement Examples

 

 

What’s done well on other nonprofit donate pages:

• The page includes a thank you message. Whether the visitor has already decided to make a gift or is just considering it, it’s imperative to let them know that their support is needed and deeply appreciated by the organization.
• The donation form should include any suggested donation amounts.
• The organization’s mission is clearly stated. This strengthens the visitor’s connection to the organization and validates their decision to donate, which helps create a meaningful and engaged relationship between the organization and the donor.
• The bottom of the donation page has a place for all contact information and social media links that a visitor may need.
• A nice addition to the nonprofit’s donation page would be a section where donors can indicate where they heard about the organization, what prompted them to donate, or simply leave a message to the nonprofit.
• One element that would make the donation form on the page even better is an option to give anonymously. It’s important to cater to the various needs of donors and respect the wishes of people who don’t want to be recognized for their support in a public way.
• At the end of the form, there’s a banner that prompts donors to check if their employer will match their donation.
• This donation form has a dedicated section where donors can answer questions about why they’re making a gift. One of the best things a non-profit can do for their donors is to get to know them — this ensures that the communications they send are relevant and resonate with their audience.
• The most striking feature of one of the donation page was the photo of a little girl at the top of the page. This photo tells a story all on its own; it ties the need for donations to an individual and showcases their impact on someone’s life. This approach makes giving very personal for donors and moves them in a way that surpasses anything words alone can achieve.
• At the very bottom of the donation page, you’ll find a small pie chart outlining how the organization’s revenue is spent. This is a great idea, especially for larger non-profits who work with high fundraising targets. Being transparent about how the money is spent makes the organization accountable and trustworthy in the eyes of donors and leaves no room for guesswork about how their support is used.

 

 

 

Heatmap Analysis:

 

 

 

 

User Personas:

These personas are based largely on my research participants and the themes and findings I developed from my discovery research phase. It’s a representation of the real target audience.

• The first two, Hannah and Mara, are our primary personas because they are a newly-diagnosed with type 1 diabetes and caregiver, which are the main users I am focusing on for this project. Per the brief, the website is the main point of entry to JDRF for those who are newly diagnosed.

• Nick is our secondary persona who is more of an expert in managing his diabetes, but I still want to try to address some of his needs and pain points as well.

 

 

 

 

 

User Journey Mapping:

 

 

 

IA Development:

For having a clear and better user experience navigation, I implemented a mega menu for the main navigation of the website.

• Mega menus will improve the navigability of the JDRF site, by helping users find more, meet other business goals, or find helpful information that they were not looking for.
• Everything is visible at once – no scrolling.
• I want to make the mega menu as small as possible and grouping them into smaller groups.
• The sub-items will be a horizontal form when activated from the top navigation bar.

 

 

 

 

Wireframe & UI:

Component Library