Hierarchy and Wayfinding

Clear definition of 'where you are' and 'what you're supposed to do'

You are Here

A good Hierarchy definition and Wayfinding system prevent users from getting lost while using the app or from having a clear definition of how the information is organized on screen. To help with that, we have some pre-set definitions that should be employed whenever possible:

Heading

Big and Clear

Every page should have a big and clear name.

Always visible

When users scroll, our big and clear heading will go away, but it's essential to make it always visible on top.

Clear Hierarchy

Whenever a user access a feature, they should know, without a doubt, what is the most important thing about that feature. We can use colors, contrast and page placement to guarantee that. Higher placement, higher contrast and pops of color are good approaches to achieve this result.

Figma File for Specification

Related Content

Use of Colors

Text Style

Page Name