Close [X]

C
O
L
O
R
S

With colors, we want to convey confidence and optimism, their meaning was taken into account in both the west and the east. The blue and orange color is widely used in Japanese posters, in some animes we can see them in the costumes of the main heroes, reinforcing its meaning.

色で自信と楽観主義を伝えたい、その意味は 西と東の両方で考慮されました。青とオレンジの色は日本のポスターで広く使われていますが、一部のアニメでは主人公の衣装でそれらを見ることができ、その意味を強化しています。

Pixel character from the Yonko Level project
Black color spec
White cloud color spec
Bittersweet color spec
Lapis Lazuli color spec

UX

Building the UX the idea was as it is most of the time when we deal with UX to be very intuitive and simple.


Tools like storytelling, personas, future press release, blueprints and user flow were applied. They help find new features and understand the needs of the user at each moment of the booking and post-booking process.

Persona 1Persona 2Persona 3

Personas

By using personas we can identify our ideal target audience and relate to them and the issues they face. They allow us to understand and anticipate their needs so we can come up with possible solutions for them.

Service blueprint

Blueprint

A Blueprint allows us to map all the actions and processes involved when using a service or product and what each actor does. With this tool, we can identify critical moments and come up with solutions.

Golden Path

Golden Path is the fastest way for a user to do a determined action on an app. The booking process was divided into 5 steps: define locations, date and time, items, identify yourself and payment.


The post-booking flow is defined by waiting for the concierge, meeting the concierge, and tracking luggage to the final destination.

UI

The visual ideas for the user interface come directly from the branding and the UX, keeping things simple, clean and intuitive, paying attention to the small details and adding illustrations to help the customer relate to the web app and decoding information.

Iconography sheet

Iconography

For the icons, it was important that they were outlined and had a filled version. Ionicons is an open-source library with a huge variety of well-designed icons, and they make the implementation easy.

Yonko Level illustration

Illustration

The illustrations aim to make the user experience more pleasant. Similar to photos, they represent the target audience and show diversity. They were made to fit the brand with straight lines, sharp edges and almost realistic proportions.

Yonko Level interface component sheet

Components

The components are a reflection of the design system taking shape: grids, typography, icons, illustrations and colours all getting together. They are the pieces that will compose the app screens.

High Fidelity
Mobile

Mobile high fidelity screen