METANOIA

METANOIA

METANOIA

METANOIA

Building homes, building harmony

Building homes, building harmony

SCOPE

UX | UI | Naming | Research | Brand Identity | Illustration | production

VIBES

🏡🕊🌱

YEAR

2023

Grad project 🎓

Animation by Alina Falin

Meta*noia - Ancient Greek [1577]

  1. The journey to changing one’s mind, heart, and self;  to expand it in such a way as to have a new perspective on the world or oneself.

  2. A spiritual conversation.

01

Summary

Metanoia is a platform that helps couples build their new home together based on shared family values, translates it into visual elements and creates a unique and meaningful family symbol.

Metanoia is a platform that helps couples build their new home together based on shared family values, translates it into visual elements and creates a unique and meaningful family symbol.

02

Context

One for the brain 🧠 ↳ According to many studies, open dialogue and exposed interaction between partners is very powerful because it allows us to include another human being within our identity. The intimate details that the couple shares during the conversation create closeness. Talking openly and sharing with our partners helps us feel closer and understand each other better. Research shows that when we discuss compromises ahead of time, even when things are going well, it strengthens our relationship.

One for the heart 🫀 ↳ Ultimately, everyone desires to feel understood and valued in a relationship where their needs, desires, and values are respected. When you invite someone into your life, they become an integral part of your identity, and vice versa. This is the foundation for creating a joyful, nurturing, and enjoyable home, strengthening the bond between you both, and embarking on a thrilling journey toward the future together.

03

Approach

I wanted to come up with a way to make this process feel hopeful and positive, while also helping us understand ourselves and each other better. Hopeful yet grounded process that fosters connection and self-awareness.

03

Approach

I wanted to come up with a way to make this process feel hopeful and positive, while also helping us understand ourselves and each other better. Hopeful yet grounded process that fosters connection and self-awareness.

03

Approach

I wanted to come up with a way to make this process feel hopeful and positive, while also helping us understand ourselves and each other better. Hopeful yet grounded process that fosters connection and self-awareness.

My goal was to create a 'transparent' and welcoming interface that guides the process and brings out values naturally. It provides a solid foundation for deep, calm discussions. I aimed for a design that breathes, allowing space for creativity and focus, harmony and calmness, openness and honesty.

My goal was to create a 'transparent' and welcoming interface that guides the process and brings out values naturally. It provides a solid foundation for deep, calm discussions. I aimed for a design that breathes, allowing space for creativity and focus, harmony and calmness, openness and honesty.

My goal was to create a 'transparent' and welcoming interface that guides the process and brings out values naturally. It provides a solid foundation for deep, calm discussions. I aimed for a design that breathes, allowing space for creativity and focus, harmony and calmness, openness and honesty.

The couple selects 7 values from a curated list of 30 (number 7 was chosen because it stands for eternity and perfection—a sacred connection to your roots). These values should embody the home they wish to create together.

The couple selects 7 values from a curated list of 30 (number 7 was chosen because it stands for eternity and perfection—a sacred connection to your roots). These values should embody the home they wish to create together.

The couple selects 7 values from a curated list of 30 (number 7 was chosen because it stands for eternity and perfection—a sacred connection to your roots). These values should embody the home they wish to create together.

Breakdown

Breakdown

The wizard takes you on a guided journey. Instead of seeking out specific values, the process encourages you to wander through them, exploring and uncovering what each one reveals about your relationship. The interface is designed for a slower, more thoughtful approach—one of discovery, observation, and deep reflection.

1/4 - Review

To start, each partner gets to express their personal and inner world. We begin with seven thought-provoking questions, each revealing something about the person— their approach, perspective, or values in life. Partners take turns filling in their answers on their side of the screen. This offers a peek into everyone's perspective based on the visuals they've encountered. Once they finish, they land on their shared profile page where all their answers come together.

2.1/4 - Discover

This is where they find their common ground. As they explore the space, they encounter values in a journey of discovery—dragging and uncovering more as they go. The map at the center keeps them anchored, offering a sense of security within the canvas.

When they linger on a particular value, a pop-up screen appears with a brief explanation. They can then decide to add that value to their list.

2.2/4 - Discover (2nd View)

They decide to switch things up and toggle to the index view — here, they can scroll through a list of all the options in an organized format.

After reaching their seven out of sevn values they complete the task. They are given the choice to either move on to the next stage (Focus) or keep wandering. Let's opt for the next level.

3/4 - Focus

At this point, they delve deeper into each value they added to their list of values. They turn his detail from generic to personal. What does the value "honesty" mean specifically for them? Here is the place to elaborate.

The detail helps the interface understand the couple's language better, and what they wrote is added to their shared vision board, which we will see at the end of the process.

4/4 - Create

This is where the couple experiences their values and answers transformed into visuals.

On the right, they see the seven values they picked, and can select each one to understand how it's visually represented in their unique symbol. They can see why each visual element was chosen to embody the value. By default, the illustrations reflect the couple's initial answers from the questionnaire, but they can switch to a cultural representation that feels more aligned with them if they prefer.

Meanings & Cultural Sensitivity

The meaning behind each visual translation of a value is inspired by three cultural traditions: Arabian, Western, and Eastern.

Hover to view the meaning behind each figure

Click to view the meaning behind each figure

Challenges & Solutions

Creating this platform involved tackling some tricky challenges and touchy points, especially since we're navigating some sensitive scenarios.
Here are a few of them:

01

Balancing Act

How can I make sure both partners are heard equally and without hierarchy? Each person brings their own unique background, values, and preferences to the table. I wanted to create a space where both feel seen individually while also being heard as a team.

02

Solution

I aimed to encourage users to share at least one post or browse the main feed, as I believed it could help them understand the benefits and find relief. I recognize that some users might be in a sensitive state and could be easily triggered or discouraged from using the app. To support them, I have included a brief and simple onboarding process, which can be easily accessed from the app itself as well, that allows them to access the app quickly, minimizing the risk of scaring them away. This approach encourages engagement and helps uplift users as they read about others' experiences, helping them realize they are not alone.

02

Personalization and
Cultural Sensitivity

  1. How can I involve them in creating the visuals for their chosen values?
    The platform automatically translates their selections into images, but this symbol will (hopefully!) represent their family and legacy, hanging on
    their walls.

  2. How can I respect different cultures and be mindful of the meanings symbols can have? It's essential to honor each other’s backgrounds to prevent misunderstandings.

02

Solution

The Create section tackles both problems head-on. First, the couple can swap visual representations to match the cultural vibes they connect with most. They can also tweak the order and emphasize certain values more than others. This changes the composition of the symbol—figures may get bigger or smaller, and the hierarchy shifts. Plus, they can even decide how the characters are positioned; for instance, the horse can either walk or gallop.

03

A Clear Preview

How can I give couples a clear picture of what they're about to receive? So far, they've seen an illustration of the symbol, but the final product they get is crafted from wooden layers that mirror the couple's journey to their shared creation. How can I show them this within the platform?

02

Solution

To aid the couple in visualizing the appearance of the final symbol they will receive, in terms of its layers and composition, I integrated a brief 3D 360° snippet prior to checkout.

Visual Language

My goal was to create a 'transparent' and welcoming interface that guides the process and brings out values naturally. It provides a solid foundation for deep, calm discussions. I aimed for a design that breathes, allowing space for creativity and focus, harmony and calmness, openness and honesty.

01

Circular Concept

I went with a graphic motif of circles. In the logo, the circles invite dialogue, while in the symbols and across the interface, they represent infinity.

The interface begins with a symbolic interaction—the couple drags one circle to another, creating a shared space between them.
This action opens up the interface.

02

Color Palette

In terms of the color palette, I chose soft, calming colors that create a breathing space and keep the focus on the process and conversation. The colors are clean, harmonious, and gentle. I wanted to incorporate a touch of sanctity with shades of green as a symbol of renewal and a hint of light neon for a touch
of light.

03

Typography

The clean and elegant typeface adds modernity to the design, while still maintaining readability.

The Symbols

I wanted the symbols to convey a sense of new, spiritual beginnings—pure, hopeful, and almost sacred. Something classic, elegant, and timeless, which is why I chose white.

The symbols are crafted from wood to capture a natural, organic feel. Each one consists of layers, reflecting the journey the couple takes to connect and reach their final, shared creation.

The illustrations feature elegant, delicate lines, while also providing each character with unique traits that add warmth and character.

Behind the Scenes

On a personal note, the behind-the-scenes process was lengthy but incredibly rewarding. If you scroll down a bit, you can check out the initial wireframes, sketches, and production attempts. I learned a ton and gained some amazing insights into user experience. I love blending the physical and digital worlds to create an immersive experience that resonates emotionally with users while staying functional.

Throughout the process, I aimed to give couples a chance to actively participate in creating their symbol, letting them express themselves as a pair, create together, and make joint decisions. I wanted the system to feel personal and meaningful for them, fostering a deeper connection.

The interface is designed for flexibility and the ability to generate more symbols over time, reflecting the changing and evolving nature of relationships. Couples can revisit previous symbols and shared vision boards they’ve made, serving as reminders and records of their relationship over time—a kind of time capsule.

Need a refresh on the full flow? 🍿
Click to jump to the top!

Thanks for making it this far!
You've got so much more to explore 🌈 👀
Here are two suggestions:

This website was made using Framer, Figma, Spline, Code Overrides, Illustrator, Photoshop, After Effects, Notion, some AI, loads of matcha latte and cuddles from Oliver, and tons of pixie dust ✨

This website was made using Framer, Figma, Spline, Code Overrides, Illustrator, Photoshop, After Effects, Notion, some AI, loads of matcha latte and cuddles from Oliver, and tons of pixie dust ✨

Get in touch 💌

Linoyosef1@gmail.com

This website was made using Framer, Figma, Spline, Code Overrides, Illustrator, Photoshop, After Effects, Notion, some AI, loads of matcha latte and cuddles from Oliver, and tons of pixie dust ✨

Get in touch 💌

Linoyosef1@gmail.com