In depth

The thoughts behind In My World

Witness Change and photographer Robin Hammond use visual-based storytelling to amplify the survivors of oppression and to humanize the abuse they endure.

For the website ‘In My World’ it was important that we use different visual treatments that could immerse the user in the experience and emphasize the seriousness of the cause. The aim was to highlight the stunning photography so it would resonate and connect with audiences.

Concept

The concept for the entire website was named 'A New Perspective'. The main idea behind the concept was to bring the content so close to the user that it felt like looking through a set of eyes.

One of our main treatments to achieve this was to have the content in focus. The approach was the use of blur effects to not only create perspective and depth in the design but also make what's in front of you sharp and focused.

Below are a few early prototypes created to mimic the direction we wanted to take the project.

Sketch of using blur to add perspective and focus on front facing elements.

Tryout of a gallery mode using perspective and blur.

Eye treatments

Furthermore, we wanted to tie all the pages together with the main concept by creating a transition between chapters and images that felt and looked like blinking with one's eyes. Once again, the treatments we used were blur and scale but also an oval shape overlay transforming in height to mimic closure.

Below are a few tryouts on nailing this effect.

Exploration on eye blink effect between images.

Exploration on viewport shaped as an eye following the cursors movement.

Text animation

We created a short message to communicate the serious nature of the project and reason for the sites existence. We chose to highlight this important information by using a custom line reveal effect that we felt was consistent with the look and feel of the blur effect. Every time a paragraph is shown it will always reveal in a new way.

Below are a few examples of how the paragraph is revealed each time the user refreshes the page.

Line animating in the order from top: Left, Right, Right, Center, Center.

Line animating in the order from top: Right, Right, Center, Right, Left.

Line animating in the order from top: Left, Left, Left, Left, Center.

Line animating in the order from top: Left, Center, Right, Center, Right.

Line animating in the order from top: Left, Left, Center, Center, Left.

Launch project

Type:

Experiences

Client:

Witness Change

Deliverables:

Development, UI, UX, Concept

Witness Change - Raising awareness about mental health

Witness Change is on a mission to end human rights violations against marginalized communities through visual storytelling. Their latest campaign, In My World, seeks to give a voice to some of the world’s most vulnerable people.

In 2018, Witness Change founder and acclaimed photographer, Robin Hammond, traveled to Lebanon, South Sudan, Togo and Madagascar to document the stories of people living in environments that compromise their mental health, from prisons and refugee camps to impoverished and war-torn communities.

We worked with their team to curate a digital experience that showcases these poignant and often heartbreaking stories. Users are encouraged to share their own personal experiences related to mental health or to make a donation to the organization. The goal is to increase awareness, decrease stigma and encourage conversation around this issue.

In depth

Concept

Eye treatments

Text animation

Concept

The concept for the site was looking at the problem through a set of eyes. We mimicked this by using focus points and a "blink" transition between pages.