On January 28th Mozilla will be celebrating Data Privacy Day. This is an
international effort centered on
"Respecting Privacy, Safeguarding Data
and Enabling Trust."
There
will be content on
Mozilla,
Webmaker and
Mozilla Advocacy. The
Webmaker team had previously developed privacy content with the
Private Eye activity (featuring the Lightbeam add-on), so the primary challenge
here was how to promote that content via the Webmaker splash page. This
is actually a two - fold design opportunity:
1.
micro: how might we promote the
unique Privacy Day content on the splash page for the 28th?
2
. macro: how might we
incorporate promotional interest-based content into the real estate on the Webmaker splash page on an ongoing basis?
Constraints: needs to be conceived, designed and implemented within 2 weeks.
Start from the beginning
I
took a look at the current splash page. The content that we are
promoting is directly connected to the Mozilla mission, so I identified a
sliver of space directly above the section where we state the project's
values. My thinking here is that we are creating a three tier hierarchy
of values on the page: 1) we are webmaker - we are all about making -
and this is what you can do right this second to get started, 2) we are
deeply concerned about [privacy] - and this what you can do right now to
dive into that topic and 3)we are more than just making + [privacy] -
here are all the things that we value.
I SEE what you did there
That sliver was great, but it was below
the non-existent but deeply considered fold of the page. If this was a
painting I would create a
repoussoir element to bring the users
attention to the core content by framing the edge. In the painting
below you can see that tree branch that directs your attention directly
into the heart of the composition.
Building off of my thinking from designing the Mozilla snippet and the onboarding ux, I wanted to make this repoussoir element
something that a user might find quirky, whimsical or relateable. All
of the other elements on the page were expected and kind of standard
elements for a webpage. I needed to create something that would be
subtle yet attention grabbing. Looking at subject of privacy, I
immediately had associations with corporations and individuals big- brothering
me as I visited web pages. I realized that the activity we were
directing users to was called private eye - and this led me to create a
small asset that features an eyeball that follows your cursor around as
you explore the splash page. On hover it will flip and direct you to the
activity.This worked for desktop, but for mobile we would have to simulate the action by having a simple CSS eyeball animation center aligned on the sliver. Major props here go out to Aki who had to invoke the pythagorean theorem to get the eye to follow the cursor without leaving the sclera.
I
did a study of eyeballs on redpen and immediately got a ton of
community and staff feedback - which told me two things: 1. it was a
conversation topic and 2. people liked the very first eyeball that I
drew.
Let me give you a walk through
From Mozilla's perspective, we are testing:
- whimsy vs. traditional promotional placement
- how many people are we getting to engage with Webmaker and sign up for new accounts
What's Next Up:
- This will be deployed on staging on Monday and then our goal is to go live on January 28th, which is Privacy Day!
- Now
that we have a promotional framework, figuring out how to incorporate a
richer learning experience around mission - based content.
- Users can opt into enrolling in a sustained challenge - based Webmaker activity. Almost as if it's a virtual Webmaker club.
Shout outs to the team that made this possible: Aki, Andrew, Erika, Paul, Dave
