Ikigai
The Ikigai App is a high-fidelity prototype of a website dedicated to mindfulness through nutrition and breathing exercises, meditation and sports.
Made in FIGMA
The intention with this project was to demonstrate FIGMA, focusing more on the visual and UI.
01
FIRST STEPS
The first thing was a study of the companies that would compete in the market with Ikigai. In this case it is a mix between mindfulness websites and the Petit Bamboo APP.
After that, a first sketch was made in Illustrator, placing the elements, first of the main page, and then of the rest of the most relevant pages for the user's flow.
As in this project I wanted to focus on the visual and the transitions, I developed them on paper, simulating the flow that the user would later go through.
02
Design refinement
Once the architecture of the APP and the flow were outlined, I began to design visual aspects such as the logo and all the iconography.
Letter sizes and fonts were decided to define the style of the page, as well as choosing the final color palette.
Once all the aesthetic elements were placed, the page was prototyped, creating the components and their respective interactions.
For this step, various pages like those mentioned above were observed to see what effects and transitions were used and to be able to replicate them. I gave a lot of importance to making it more visual and simple, since it is a mindfulness and meditation app, it made no sense to overload it with excessive buttons and texts.
03
Figura 1
Figura 2
Figura 3
Diseño
The user's flow in this case is not linear, there is no beginning or end, since there is no final product as such, since each of the sections is the possible destination of the user.
The start is on an aesthetic main screen with the logo in gold and a black background, with the "the mindfulness app" sign that serves as a letter of introduction. This combination of colors is used since different Asian cultures are linked to the sacred (Figure 1).
From this initial screen, the colors soften to the final ones in more light blue tones, giving the feeling of serenity and relaxation. Here begins a simulated loading page that after a few seconds gives way to a welcome page with a visual effect of fog over a meditating figure (figure 2). By pressing on the screen, it enters the figure's mind, making the simile that the content of the app is in the mind itself (figure 3).
The App itself has a minimalist design, with a profile and configuration section at the top, an animated search engine to simulate entering text and a tab that changes the content of the videos below depending on whether they are For You, New, Popular or Saved .
The initial page explains the different sections and their associated elements, namely fire-exercise, water-meditation, air-breathing and earth-nutrition.
Within each of the sections, visually themed with each of the elements, we find the latest videos and posts related to the topic.
The button below contains each of the elements, and in the center the tree of life icon that takes you to the home screen.
Finally, on the user screen, there is the profile data, highlighting the password revealer.
04
Conclusions
Impacto
The app aims to be used by people who want to incorporate mindfulness into their lifestyle, and do it from the roots, changing habits such as nutrition and exercise, in addition to the classic yoga and meditation of other apps, since Ikigai considers that mindfulness is achieved with a change in different points of the lifestyle, both physical and mental.
The learned
We have learned to create more complex visual effects and to synthesize information and iconography.
_edited_edited.png)
_edited.png)
