Overview —
Meta's Human Rights website is a hub for understanding both Meta's interactions and interference with international human rights systems, globally.
The main goals for the site are to host their human rights policy, human rights annual report, and provide links to current sustainability and newsroom information relevant to human rights at Meta.
VIEW SITE
Role —
Team —
Tools —
THE CORE CHALLENGe
How can we create a hub for human rights policy docs that's both globally accessible and as unbiased as possible?
Freedom is never granted; it is won. Justice is never given; it is exacted.
-A. Philip Randolph
THE PROBLEM SPACE
Localization Challenge
This website was going to be launched globally, so designing animated text elements need to be both easily updated and translatable in many different languages.
My team came up with a moodboards for animation treatments built off of visual metaphors such as redacted text, and the blurring and ‘unblurring’ of words. This was an excellent talking point to get us on the same page as far as artistic direction. However, the more we dug into the execution of these ideas, the more we realized the complexities of coding these styles. (For example, in Arabic, text must animate from right to left. Also, in some cultures, there is a deep stigma in showing text on faces.)
Branding Challenge
One of my challenges was to create a design system that is distinctly different from their corporate branding, but still sits within the Meta ecosystem.
With the constraint of working with Meta's grids, sans serif, and blue and gray color scheme, we decided to focus on interactive elements. By animating CTA’s and hover states, we kept true to Meta's design style, while adding impact and interest via motion.
ANIMATION exploration
Motion as metaphor
Due to the restrictions of their design systems, one area where we could explore visual distinction was in the way we incorporate motion - which became a technical challenge for text translation.
Leveraging the metaphor of redacted text was a clever initial concept, but this particular execution wouldn't work due to cultural stigmas on obscuring faces.
Another early concept of a redacted text animation
Final animation
My team came up with a moodboards for animation treatments that build off of visual metaphors such as redacted text, and the blurring and ‘unblurring’ of words. This was an excellent talking point to get us on the same page as far as artistic direction. However, the more we dug into the execution of these ideas, the more we realized the complexities of coding these styles. (For example, in Arabic text must animate from right to left. Also, in some cultures, there is a deep stigma in showing text on faces.)
Narrowing in on a ‘blur on load’ image treatment, to carry out the metaphor of the site. This conveys a feeling of seeing through a lens or scope on the content.
Pushing the design of interaction on the CTA’s on the website. By using a gradient blur on the cursor, the user can further interact with clickable elements on the site. This way we can keep in line with Meta’s overall branding, yet give a distinct experience to this microsite.
refining content strategy
Offering layout options
Offering side-by-side layout options that display the content in different ways. This was an excellent way to segment out decisions, and which direction we might go with in order to push the reveal/conceal concept even further.
Flowing in content
The copywriting for the site was being written and finalized during the UX design process, so I experimented with text and image layout options as new content was shifting and being revised.
It was a balancing act of how 'loud' to make certain text callouts, without overwhelming the user with too much motion on the page.
Using a consistent type hierarchy improves harmony and continuity across the final page designs.
FInal deliverables
Weaving in flexibility and navigation
By iteratively improving prototypes as part of the design process, and considering the full interactive UI of the site, we were confident that the final mockups would come together seamlessly for file handoff.
Further, by specifically prioritizing the perfection of motion details up front, the developer was able to implement the build without wasting his time going back and forth with stakeholders and saving our team money and effort in the process.
Impact
Meta faces scrutiny for various policy changes, which has immeasurable negative global impact. Their core business model, which relies on surveillance advertising to drive engagement, has been accused of amplifying harmful content. For example, it's algorithmic amplification can encourage discrimination and hate speech, in the case of Myanmar where hate speech can spread and incite violence against the Rohingya.
By highlighting the ongoing controversies with bias, fact-checking, privacy, and data concerns, etc., we can reduce harm perpetuated by tech giants and build a more equitable digital and global world.