Day: January 21, 2020

SOS Violence Conjugale is an organization that helps victims of violence with the goal of improving their safety. Their objective with It’s not violent was to implement an awareness campaign educating the target audience on the signs of violence through text messaging, a medium where this subject can be addressed a bit more subtly. Our proposal was therefore to provide an interactive conversation experience in which the user would be placed in a victim’s situation and would have to reply to text messages by choosing from the suggested responses. The aim is to denounce the various facets of violence through direct experience.

Concept

Domestic violence being a difficult topic, we decided to use a lighter approach. Firstly, to bring the user to participate in a playful manner, but also to make the message even more striking.

The illustrative universe echoes that of Emojis, with magnified emotions and expressions, which fits well with the theme of text message conversations. A somewhat candy-colour palette was used, in contrast with the dark backgrounds used to emphasize the gravity of the subject.

Typographical choices were also made to amplify this contrast: a bold and more “in your face” font, and one that is a little more playful and naive. Editorial effort was put into the navigation by the use of “stickers”, creating intrigue through the titles without revealing the main subject of the conversation.

Creating the stickers

Design

Personifying the objects on the stickers was deliberately done in such a way as to render the illustrations genderless and representative for the widest possible audience. The stickers’ animation gives a playful aspect and adds a narrative side, in addition to encouraging participation. The stickers were created in Illustrator and were then animated with After Effects. Lottie’s Body Movin plugin was used for rendering the web animations.

Implementation

We used the Lottie library, which allowed us to take animations made with After Effects and use them on the site. On the home page, the stickers are in “pause” mode by default, and when we hover on one of them that sticker goes into “play” mode.

 To make the hover state more visible, the title appears in the background in large type in a scrolling strip, while on a conversation page the stickers are in a constant loop.

Initiation of Lottie’s instance:

this.animation = lottie.loadAnimation({
    container: this.el,
    animType: ‘svg’,
    loop: true,
    autoplay: false,
    animationData: data
})

Condition if not in autoplay mode like the home page:

if (!this.autoplay) {
    this.mouseenterBind = this.enter.bind(this)
    this.el.addEventListener('mouseenter', this.mouseenterBind)

    this.mouseleaveBind = this.leave.bind(this)
    this.el.addEventListener('mouseleave', this.mouseleaveBind)
}

On “mouseenter” and on “mouseleave”, we are returning a different function:

enter() {
    this.animation.play()
}

leave() {
    this.animation.pause()
}

Creating the conversations

Design

On desktop, we chose to place the conversation in the context of a mobile phone. Across a few exchanges a choice of three replies is always offered to the user.  The response from “the abuser” varies according to the user’s chosen reply. The choice of using a very large cursor also emphasizes that the user must choose from the suggested answers.

When a conversation is finished, an information page is displayed on the theme of violence exploited through that conversation. Finally, we find the list of conversations, presented as stickers, as an invitation to continue the experience.

Implementation

We used Vue.js to manage dialogues because it was easier to handle the components since the content changes and it has to be responsive to the user’s choices.

All the storylines are included in a JSON file which includes the victim’s reply choices (a short version of which appears in the choices and a detailed version which appears in the conversation), and depending on the reply selected, we return the abuser’s answer associated with it.

Example of JSON structure for a conversation:

"dialogues": [
{
    "choices": [
    {
        "author": "victim",
        "short": "It's not lame...",
        "content": "It's not lame, it's important to me..."
    },
    {
        "author": "victim",
        "short": "You're not OK with it?",
        "content": "You're not OK with it?"
    },
    {
        "author": "victim",
        "short": "I don't understand your reaction.",
        "content": "Um, I don't understand why you're reacting like this..."
    }],
    "replies": [
    {
        "author": "aggressor",
        "content": "Naturally, you're the important one!"
    },
    {
        "author": "aggressor",
        "content": "Wow! So perceptive!! ?"
    },
    {
        "author": "aggressor",
        "content": "And that's the problem!"
    }],
    "outro": [
    {
        "author": "aggressor",
        "content": "No biggie, I'll just come with you."
    }]
}]

When the conversation is finished an overlay is launched with a question for the user, and then it displays the results and some statistics on the subject. A fun, animated GIF transition is then launched depending on the chosen answer.

Challenges

Giving a realistic feel to the dialogues was one of the main challenges. We had to do several tests to give the impression of a real SMS conversation. We decided to display the messages with a delay, as if the abuser was writing. The longer the message, the longer it takes to receive it. We had to set a time limit, however, so that the user experience was not excessively long.

Message delays:

/**
 * Set the duration according to the number of parameters. Longer message will take more time to be send
 *
 * @param {string}
 * @return {int} | duration in ms
 */
messageDuration(message) {
    if (message.length < 100)
        return (message.length * 20)
    else
        return 1600
}

Tech Stack

In order to fully support the accompanying media campaign, we decided to keep the back-end as simple as possible, just like we decided to use flat JSON files for the dialogue instead of storing it in a database, for example. In fact, we ended up rendering static HTML from our PHP templates to ensure there is absolutely no back-end processing necessary.

Although we usually use our Charcoal Content Management System, which is equipped with an aggressive caching system for those kinds of websites, you just can’t beat static files With the help of CloudFlare acting as a CDN, we handled 100,000 visits in the first 2 weeks without a hiccup.

Front-end frameworks

• Locomotive Boilerplate
• Locomotive-scroll
• Sass (CSS preprocessor)
• Babel (JS ES6 compiler)
• Npm (module manager)
• Gulp (task runner)
• Vue.js (dialogue)

Conclusion

Itsnotviolent.com was the kind of project where every star aligned for us. A great cause, a wonderful client and a showcase of creativity through a clever experience. The will and courage to take a lighter, more playful and interactive route to discuss the theme of violence has been so far rewarded with the high popularity of the campaign. It has been embraced by organizations in Canada and is attracting more interest outside the country.

Case Study: itsnotviolent.com was written by Marie-Christine Dion and published on Codrops.