Milestone 1.2: Navigation

Status: Planning

Design milestone, Code milestone, Figma

The application flow in Milestone 1 is very simple. After a mostly linear onboarding flow, the user lands on the block clock. They can navigate into settings, and back.

In the future, the application will be more complex. There will be new distinct areas for viewing activity, sending, and receiving, each with sub-pages, nested user flows, modals, and more.

Goal with this milestone is to restructure the application, focusing on navigation. We can add empty placedholders for all new screens, only containing essential navigation components.

A central part of this will be the new navigation bars, which will differ in look and behavior across desktop and mobile.

One of the consideration is that the application can be built without wallet features, or a user may choose to only use the node features. In the first case, the UI will skip anything related to the wallet. In the second case, the node will be the primary focus point, with a subtle option to add a wallet.

Three desktop screens with different wallet states.

The same states are required on mobile, along with other layout differences to account for the different form factor, interaction model and user needs.

Six mobile screens with different wallet states.

Below are the various interactive states of elements in the navigation bar on desktop.

Various interactive states of the desktop navigation bar

The wallet selector differs across device types. While the content is identical, it appears as a dropdown on desktop, and a modal that slides up from the bottom on mobile.

The wallet selector modal on desktop and mobile.

We are still investigating how much information the application has about closed wallets (only one wallet is open, or active, at a time). Here are some variations with different amounts of detail.

Three variations of the wallet selector modals with varying detail.

Below are interactive states of many of the individual elements. For all the visual details, see the Figma file linked above.

Detailed interactive states of individual navigation elements

Another aspect is to implement navigation and transition patterns that are intuitive and consistent (in that order). Below are some basic patterns, most of which are already implemented in the application.

Wireframe outlines of transition patterns.

On desktop, users can also directly access various options through the application menu, which are slightly different across operating systems. Below is a first mock-up based on the existing QT application. We will refine these as we work through the remaining milestones as we detail the other features.

Desktop menu options.

Everything on this page is a work-in-progress.