Top nav

The top nav can show a back or dismiss icon, a title, and a primary action.

Title:

• Sentence case
• Must fit in one line, usually 3 words max
• Must clearly relate to whatever action the user tapped to come to this page. E.g.: User tapped “edit” on their “Personal info” tab, then the title of next page is “Edit personal info”

Primary action: (optional)

• Positioned on top right corner
• Tapping on it “finishes” what you’re doing and takes you out/back to the original screen
• Can be a single verb or, if more than one action, an icon. E.g.: Save, Assign, Submit

Back or dismiss icon

Doesn’t apply for the main page of each section (e.g. Home dashboard tab, Schedule tab, etc.).

• Positioned on the top left
• A back chevron (iOS) or back arrow (Android)
• No copy
• Takes you back one page
• If you’re on the first step on a stepped experience, tapping “back” takes you out of the flow
• If you’re on the second step on a stepped experience, tapping “back” takes you to the first step

Android vs. iOS

Today, different OS affect the top nav, bottom nav, and native components, and this should be reflected in the designs.

However, our app aims to be device-agnostic. In the future, these differences will no longer exist.

Top nav

The top nav on Android is Deep Purple on top level pages and White Stripes for all secondary pages.

The top nav on iOS is White Stripes for all pages.

Read more about the Top nav’s UI.

Bottom nav

The bottom nav on Android is only visible on top level pages. In addition, the bottom nav is not visible if the side nav is open.

The bottom nav on iOS is always visible.

When to use a back button (<) versus a dismiss button (X)?

Only full page success messages and full page ads use a dismiss button. Everything else uses a back button.

Top level pages vs Secondary pages

Top level page

Includes the home dashboard plus the main page of every section. These are usually accessible through any item of the side or bottom nav.

Their UI always shows:

• Tap nav (with no “back” option)
• Content of the page (varies)
• Bottom nav

Secondary pages

Secondary pages include child pages, flows, full page ads, full page success messages, among others. Their UI always shows:

• Top nav (may have all 3 components of a top nav or not, depending on the need)
• Content of the page

Background colors

Feed pages

A feed is a page that includes or can include the same component more than once. For feeds:

• Use Blondie background
• Place almost all content inside a Box or a Card

The only content that can be placed directly on top of the Blondie background are:

• Page titles and their subtitles (if any)
• Legal text or similar
• Empty states (one for the whole page)

Child pages, full page ads or messages, flows

• Use White Stripes background
• Place content directly on the page

Button placement

Button placement depends on:

• Type of action: primary, secondary, tertiary
• Type of flow: feed, primary page, or child page vs. flows or ads

Feeds, primary pages, child pages

Place primary actions on the top nav, and secondary/tertiary actions at the bottom of the page.

Primary actions

• Placed on the top nav, on the right
• Single verb (e.g.: Save, submit, Assign, etc.)
• If there’s 2 primary actions, use an icon to trigger a drop down menu

Secondary/tertiary actions

• Place at the bottom of the page, not sticky (simply at the end of the first page or the end of the content)
• Stack buttons vertically, full width

Flows or ads

Place all actions at the bottom of the page, always visible

• Place on a sticky bottom bar
• Ideally no more than 2 actions. Max: 3 actions
• Full width buttons, vertically stacked
• Most important button on top (primary > secondary > tertiary)

Selection cards

Avoid using just a checkbox or radio button on mobile and use a selection card instead to increase tap areas.

• Select by tapping on any part of the card
• Title and subtitle should be 1 line each, max

Empty state

Use empty states with illustration when the empty state applies to the entire page’s content.

Use empty states with icon when the empty state only applies to a section of the page, e.g. a specific card.

Bottom sheets

Use for short information that immediately affects the user:

• Action confirmations (e.g. “Are you sure?”
• Request limited form inputs (2 max)

Don’t use for (and use a child page instead):

• Error or success states
• Longer information
• Information with images, tables, etc.
• Stepped flows
• Requesting 3+ form inputs
• FAQs

Structure and layout

• Only 1 step
• 1 single primary action aligned with the user’s intentions
• Cancel is optional but encouraged

Content

Title

• 1 line ideally, 2 max
• Start with strong action verb
• Indicates most important info
• Relates with primary action

Subtitle

• 2-3 lines max
• Avoid repeating what’s in the title

Actions

• Vertically stacked
• Most important action on top

Closing a bottom sheet

Bottom sheets don’t have a dismiss button. There’s 3 ways of closing them:

• Tapping the cancel button (if any) or the primary action (completing the action proposed by the bottom sheet)
• Tapping the screen
• Dragging down the sheet

Native components

Use native components whenever possible to reduce effort:

• Native keyboard
• Adding files
• Taking photos
• Adding contacts

Native modals

Use only for system errors. For anything else, use a bottom sheet or child page depending on the content.