Project Background

What is Dive Around the Clock (DATC)?

Dive Around the Clock (DATC) is a Non-Profit community of scuba divers and volunteers from the Seattle-area that come together once a year for a 24-hour underwater Dive-a-Thon relay to raise funds for cancer research at Seattle Children's Hospital.

Why a website re-design?

While DATC started as a small event, it has grown significantly over the past ten years. Their online presence and branding, however, has not. After a recent leadership change, the new management felt they needed "a better website" to achieve their goals of:

(1) recruiting divers and volunteers
(2) raising money through individual donations and corporate sponsorships.

Tools

Sketch, InVision, Adobe Illustrator, Pen & Paper, Squarespace

Deliverables

Project Plan, Site Map, Wireframes, Brand Identity/Style Guide, Logo, New Site (built in Squarespace)

The Old Website

(The "Before")


After I completed an initial heuristic analysis of DATC's existing site, it was clear that there were many areas of improvement.


The many logos of DATC:

A google search for Dive Around the Clock turned up several different logos, revealing a lack of cohesive brand identity or consistent visual style.

Research

To learn more about users and gain a better understanding of the scope of the issues with the current site, I put together an online screener survey and developed test plans/scripts in preparation for usability testing. I also recruited and interviewed 10 scuba divers who had no previous knowledge of/familiarity with DATC.

After the interviews, I conducted usability testing of the current site with those divers and supervised the organization of that information into a spreadsheet I created. Lastly, I completed a comparative analysis of other non-profits who have a similar structure to DATC and put on annual fundraising events.



Surveys and Interviews

I took the lead in creating 2 screener surveys to recruit research participants. Participants included both current DATC members and new potential divers and donors. The member survey focused on identifying:

-how members got involved in DATC
-why they like diving in general and DATC
-feedback about how they use the current site

Usability Testing

We completed usability tests with 12 users to identify pain points and navigational issues. Users were asked to complete 4 tasks:

1. Identify what DATC is based on the home page (0% completion rate)

2. Sign-up to be a diver at the event (75% completion rate)

3. Sign-up to volunteer for the event (100% completion rate)

4. Donate money to DATC (100% completion rate)

Comparative Analysis

I sought out similar websites and organizations to DATC, which fell into two main categories:

-other diving related charities
-non-profits that put on similar annual fundraising events

I also did literature review to find research and best practices for non-profit and charity event website design.

Analysis

From our research, I identified pain points with the current site and led our team in affinity mapping to idenitfy divers' and volunteers' needs and motivations. This also helped me to develop personas to keep our team focused on the research when designing.


View Larger
View Larger
View Larger
View Larger

User Pain Points

Most users were able to complete the "donate", "dive", and "volunteer" tasks. However, not a single user could identify what the organization, event, or cause was from the home screen. This was a huge deterent, as users didn't trust the organization or feel motivated to complete any tasks if they didn't know what was.

Other pain points included:
-Confusion about the organization
-Difficult to navigate
-Poor description of event logistics
-Lack of relevant imagery
-Too text heavy

Why Dive?

In the interviews, I asked users about why they dive and what motivates them to dive. After analyzing this data, we identified core themes to help guide us in the style, tone, and design of the website. Our goal was to incorporate these themes so that users would be motivated to dive with DATC because their values align with the goals of DATC.

Primary Persona


Design

Referencing our personas and research themes, we used the design studio process and tons of sketching to create our initial designs. I advocated that we incorporate user feedback early and often, using methods including card sorts and paper-prototyping. This led our team to refine our ideas and create wireframes, then a clickable prototype using InVision.


View Larger
View Larger
View Larger
View Larger

Wireframes


Branding

I compiled themes and important feedback from user interviews to help our visual designer create a branding system that better communicated DATC's message. It was important to DATC that the branding reflect the unique environment and experience of diving in the Pacific Northwest (rather than a more tropical area), so I created a mood board to help evoke that feeling.

After our visual designer created his initial ideas, I tested the new logo and color schemes with users to help perfect it. With a new branding system in place, I re-wrote the copy on the website to align with the new branding system.

The Solution

I made sure to keep the research in mind and included users throughout the design process to make design decisions based on actual user information and behavior.


View DATC Website

Home Page

Pain Point: During our usability testing, none of the users could identify what DATC was.

Solution: In our newly designed homepage, we created the tagline "Suit Up, Dive In, Fight Cancer" and made basic information about DATC available above the fold and without having to scroll or click around.

In our last round of usability testing, 100% of users were able to identify what DATC was accurately based on the home page.

BEFORE: 0% completion rate
AFTER: 100% completion rate

Infographic

Pain Point: Users were hesitant to get involved because there wasn't information about what specifically happens at the event.

Solution: Many expressed that they'd need to know that information before they'd agree to sign-up. We created a graphic on the homepage to give users a general overview of what to expect at DATC's dive-a-thon.

View DATC Website

See more of my work: