Loading ...

Responses by [isdgroup].

Background: re-Parents is a website developed for Ukrainian LGBTQ+ organizations as part of a global platform to increase acceptance of the LGBTQ+ community in Ukraine. This initiative spurred the creation of Ukraine’s first LGBTQ+ friends movement Rizni.Rivni (rizni means “diverse” and rivni means “equal” in English) as the first safe symbol of Ukrainian support for the community. The movement has been supported by famous Ukrainian artists, world-renowned fashion designers and even international stars.

Larger picture: During our work on re-Parents, we discovered many shocking facts, but what stunned us was how many parents can’t accept their children despite their approval being crucial for LGBTQ+ self-acceptance. We dove into the topic to explore why this happens and found the simple but shocking answer: Parents often aren’t ready. They are scared. They seek help and get it from the wrong people. This interactive experience based on other parents’ real-life stories of acceptance is to help them prepare.

Design core: The site’s core features hide within the mix of several key components: A storyline that stretches from the child’s birth to the final acceptance of their identity. Music was specially produced by the composer to convey the intimate, personal and complex experience of the journey from darkness to light. The shock and swarm of thoughts at the key moment of someone coming out conveyed at the level of sensation. And finally, mothers telling words of acceptance to their children for the very first time in a 360-degree video experience.

Favorite details: We focused on combining complex and truthful experiences in storytelling, visual images, videos and music. And, of course, the whole result makes us proud. But as a key point, we’d highlight the atmospheric music, emotional UX design and the filmed moments of acceptance. People can find themselves in the middle of this complex conversation and physically experience this energetic tension.

Challenges: The biggest challenge was the story itself. We had to tell people’s lifelong stories briefly to live through their journey. Emotionally, it was challenging to exclude any details of their stories. The second most challenging part was being on the 360-degree video shooting. After all, it was the place where parents verbally accepted their children for the first time. The whole crew cried.

Navigation structure: We didn’t want users to “jump” through the story. It was important to us that the site remained immersive and guided visitors through a specific experience. Therefore, navigation only allows users to move linearly along the storyline: forward and backward. This is also reflected in our horizontal UX design: we considered that in a museum, people usually walk along the walls and not from top to bottom.

The main navigation element is the timeline leading users from beginning to end. With its help, we move further into the story, observing how the feelings and sensations of the main characters are displayed within. The line encounters obstacles and tries to overcome them. Kinks and breaks in the line formed the basis of the identity and the elements of the site. You can track the line and see how it transmits sensations of shock, heaviness and hardness in the beginning. Then, at the end of the stories, the line becomes smooth to show acceptance, softness and integrity.

Technology: In the project, we used a wide range of libraries and tools for native JavaScript. Most of the animations are based on our background. To implement it, we used three.js and WebGL.

The background consists of several layers. The first layer is a floating haze. The second layer is made of various kinds of animations necessary to complement the story: the gallery of archive photos that can be observed against the background on the first screen, like a photo of a mother and son that scatters at the start of the story but comes back together at the end to show their reunion. The final—but not any less important—layer is the line that runs through the entire story from beginning to end, changing dynamics and behavior depending on the story’s emotional tone. We used the GSAP library to animate all these elements.

GSAP was also used for small animations of UI elements that are outside of the background. For small graphic elements drawn in the interface, we also used SVG animations and Canvas 2D. To keep the effect of complete immersion, BarbaJS is responsible for smooth transitions and continuity between pages.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In