Case Study: WIPE Diseases Foundation — Kilobyte Studios

Portfolio

Take a look at the results I've generated for clients in the past. Will you be next?

  Share the love?


If you enjoyed this article I bet your friends would, too.

If you’ve been browsing through my site, you’ve probably noticed a trend.

Most of my sites have a very similar experience to them.  Although that’s because I’m following best practices for web design, it can get a bit monotonous to be repackaging similar solutions over and over.

That’s why I was very happy when I was approached by the WIPE Diseases Foundation to build something incredibly-unique.

The Problem

The WIPE Diseases team was experiencing difficulty in getting site visitors to engage with their brand.

I know that’s kind of a buzzword: basically, they were having trouble getting people to signup for their online courses where they educate health professionals about various respiratory diseases.

The problem was a compound one though, because they were trying to manage 3 different customer segments:

  1. Healthcare Providers looking to learn and grow their specific domain knowledge.
  2. Healthcare Patients who were simply curious about the procedures which they were about to undergo.
  3. Philanthropists who would donate to the foundation in hopes that it would grow.

After quite a bit of back and forth, we settled on this problem statement:

We need a modern, compelling web presence that appeals to each of our customer segments, and makes it easy for them to either (1) learn more about our brand or (2) sign up for one of the various learning opportunities available on the site.

As always, I broke down the problem into subproblems so we could actually take steps to solve them:

  1. We need a modern, influential web presence.
  2. We need to make the distinctions between the sites (and their distinct entry-points) very clear.
    1. We need a site for healthcare providers; and
    2. We need a site for healthcare patients.

For reference, this was what their current site looked like:

…so much white!

The Solution

We settled on having 3 different sites:

  1. A primary foundation site to encompass everything and promote donations,
  2. Two child sites:
    1. One that would help educate providers; and
    2. One that would help educate patients.

This was the simplest solution to partition the experience in an intuitive way for the site visitors.

We started on the primary foundation site first.

Fortunately, the team opted to use a template-generation tool to get the job done, so I was able to crank out the first iteration of the experience rather quickly:

As you can see here, the site “feels” very professional and modern.  The wipe in the hero image was indicative of their brand name, there is clearly a significant influence on the people behind the organization, and the message is clear.

Though…something was missing.  The foundation was positioning themselves as a warm, caring place for healthcare professionals and patients alike to come together and learn.

Although this site hit on almost all the goals we set out from the beginning, there was a mismatch on the brand message.  It felt too “cold”.

Here’s how I fixed that:

  • Lots of pictures of people (ideally in the same demographic).
  • A greater emphasis on saturated colors.
  • More smooth animations.
  • A less corporate tone in the site copy.

After tweaking the site aesthetic, this is what I ended up producing:

Pardon the graphical glitches below the hero section.

Here’s some of the highlights of the design that I’ve hand-picked to show you how real business decisions make their way into a site aesthetic:

  • The text in the hero image at the very top is clear and explains exactly what they do.
    • This helps with donations simply because people need clarity on where their money is going.
  • The separate but distinct CTAs help site visitors to find their way within seconds.
  • The “% Donations Returned to the Business” widget helps to reassure potential donors that their generosity will not go to waste.
  • The color scheme and tone of the text are much more warm.
  • The note is a personal appeal, which helps potential donators to connect with the brand.
  • The donation counter helps to legitimize the company.
    • Also, the donation note section helps give a voice to their donors.
  • The customer testimonials help others relate to the brand.
  • The donate buttons throughout the site and on the navigation minimize friction for our primary CTA.

After we finished with the foundation site, we moved onto the provider education portal.  Here’s what it looked like before I got in there and sorted it out:

Look familiar?

For the provider site, we had a similar set of goals, with a few added restrictions:

  • The site needed to appeal to medical professionals who had little time to spend on the site.
  • The site needed to be clearly distinct from the parent foundation site.

Here’s how I made this a reality:

Ain’t she a beauty?

Some things you can’t see in the picture:

  • The “providers_” text actually types through various other medical roles to give an inclusive feel.
  • The header gradient animates from green to blue.

As you see here, the experience is very clearly distinct from the parent site, and once again, the primary CTA in the first section on the page makes it trivially-easy for site visitors to find what they’re (probably) looking for.

Now, there was one last piece to the puzzle!  Let’s revisit our goals from before:

  1. We need a modern, influential web presence. Done
  2. We need to make the distinctions between the sites (and their distinct entry-points) very clear. Done
    1. We need a site for healthcare providers Done
    2. We need a site for healthcare patients.

That’s right, we still needed a portal for healthcare patients!  We’ll be finishing up that part of the project in the next few months, and I’ll come back and update the site here when it’s ready.

Key Takeaways

I have learned so much working with the WIPE diseases team!  Here’s some key takeaways from the project:

  • Biggest Takeaway: On larger projects like these, it often makes more sense to pursue a much smaller project first to get the scope really ironed out.
  • You can actually do quite a bit of branding with little more than simple adjectives from clients.
  • It’s possible to do a split CTA, as long as they are separated in an intuitive way.

I'm currently available for work starting September 1st, 2016.

Let me blow your expectations out of the water.

  The Newsletter