Lupus Foundation of America

Know Lupus

  • Challenge

    Win the battle against lupus by creating an interactive game that challenges users to defeat the ultimate enemy: a lack of understanding.

  • Solution

    Motivate the public to decode this mysterious disease through a positive learning experience that encourages social sharing and triggers donations from a partner upon completion.

  • Results

    A casino-inspired card game that comes to life through custom illustration and animation. Players can share facts, as well as their final score, which prompts their followers to join in on the fun. The game had 100,000 plays in its very first month.

KNOW LUPUS to create a future with NO LUPUS. It’s estimated that nearly two-thirds of the public knows little or nothing about this cruel and mysterious disease. Education is one of our most effective weapons, because early diagnosis can help fend off life-threatening complications. Raising awareness is also critical to raising funds for research that can lead to better treatments. With a series of nationally televised public service announcements set to air, the Lupus Foundation of America (LFA) wanted to double down their efforts to educate the general population about this disease.

View the Site
  • StrategyA Game with a Goal

    We wanted to create a game that could educate people about lupus while keeping them entertained and engaged. We developed a card game that tests what you know, and educates you on what you don’t.

  • Visual DesignCreating a Distinctive Style

    Highly interactive, illustrated cards for each lupus fact make the game enjoyable and memorable to play — and are designed to be shared, so users can spread awareness about lupus to family and friends.

    Blair Culbreth Illustrating for Online: Know Lupus
  • Front-End DevelopmentSoftware for Speedy Interaction

    The game was built using React, a Javascript library for creating user interfaces, and Webpack, a tool that can do advanced optimizations and update code on the fly.

    Doug Avery
    Deep Dive: Building Know Lupus with React.js
  • Content DevelopmentSetting the Right Tone

    The 27 custom illustrations presented a set of unique challenges for the team. The tone of the game is meant to be fun and enjoyable, but the cards illustrate serious facts — some that are very technical. Our design team succeeding in keeping the quality up, the style consistent, and the delivery on time.

  • User ExperienceThe Sounds of Success

    The gratifying swish as a new card is dealt; the addictive ding with each correct response. We created a sound component that monitors a game event — like completing a question correctly or when a user finishes a level — and plays the sound each time that event fires. While subtle, these sound effects contribute to the game’s overall enjoyment and interactivity.

  • AccessibilityCreating Workarounds for JavaScript

    Screenreader and keyboard users have little trouble with websites that reload the page on each action, but JavaScript apps can undermine them by rewriting entire pages without any warning. With a little extra care, we were able to restore accessibility to our JS app by making sure keyboard focus goes where we want it to go.

  • 100,000

    People played Know Lupus in its first month after launch

Summary

Our Know Lupus game aims to entertain, educate, and motivate users to support the cause of the Lupus Foundation of America. With a variety of interactive elements, lots of personality, and highly shareable content, we succeeded in informing over 100,000 users in its first month about this mysterious disease while keeping the experience enjoyable and accessible.

How do you say
Viget, anyway?
  • Work
  • Lupus Foundation of America - Know Lupus