Lupus Foundation of America

Know Lupus

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.

  • 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.

How we did it.

  • Strategy and Marketing

    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.

  • Creative/Visual Design

    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.

  • Front-End Development

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

  • 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.

    bculbreth
    Illustrating for Online: Know Lupus
    Blair Culbreth, Senior Designer
  • 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.

    davery
    Deep Dive: Building Know Lupus with React.js
    Doug Avery, Front-End Development Director
  • 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.

    jkorr
    Accessibility's costs are lower than you think
    Josh Korr, Senior Project Manager