Mobile design guidelines

Introduction

This document covers the visual styles and interaction patterns used in the Totara Mobile app.  It is intended for developers and designers working on expanding and customising the app, to help them create a cohesive and enjoyable experience for their users.

It is a living document and will be updated as the app evolves.  Please refer to the latest version when designing and implementing new features and workflows.

Fundamentals

We used React Native  to build the Totara Mobile app for both iOS and Android platforms. The app is published for both platforms, with consideration for the different approaches they take on UX.

To learn more about the design principles and native controls (e.g. switches, status bars, etc.) used in the app, please refer to the iOS and Android design guidelines:

• Read more about  iOS human interface guidelines (Apple)

• Read more about  Android design guidelines (Google)

• Read more about the Totara Mobile app theme: Theming product documentation

Colour

Colour theme is applied consistently across all the app, with the default theme based on the Totara brand.

Colour variables, as depicted below, follow an abstract semantic framework that is applied in a meaningful manner consistently throughout the app. This enables users to derive meaning via colour, aiding the user experience. Each colour variable is customisable to match the customer's brand and design needs.

Brand The default brand colour in a clean install is Totara green (#69BD45) The primary colour is used in primary buttons and the tab bar To customise it go to Quick-access menu > Plugins > Mobile > Mobile theme in your Totara site, and edit the setting totara_mobile | primarycolour
Open	PRIMARY #69BD45 105, 189, 69
Neutral While vibrant colours aim to grab attention, neutral colours provide a low-key backdrop, helping users focus on their learning content Currently the app only offers light mode (dark mode will be added in the future) In light mode, use light neutrals (i.e. Neutral-01 to 03) in backgrounds and dark neutrals (Neutral-06 to 08) in borders, text and graphics
Open	NEUTRAL-01 #FFFFFF 255, 255, 255	Open	NEUTRAL-02 #F5F5F5 245, 245, 245	Open	NEUTRAL-03 #E6E6E6 230, 230, 230	Open	NEUTRAL-04 #D2D2D2 210, 210, 210
Open	NEUTRAL-05 #C7C7C7 199, 199, 199	Open	NEUTRAL-06 #7D7D7D 125, 125, 125	Open	NEUTRAL-07 #4A4A4A 74, 74, 74	Open	NEUTRAL-08 #000000 0, 0, 0
Prompt These colours are used in system feedback to inform users and prompt a response It's important to use the right colour for each feedback type in order to reinforce user confidence in the app Info: Guidance or help Success: User action was received and processed successfully Warning: User action is required Alert: Critical error such as server or network failure Highlight: Background colour of selected item inside a set, such as table cell or list item
Open	INFO #337Ab7 51, 122, 183	Open	SUCCESS #69BD45 105, 189, 69	Open	WARNING #8E660D 142, 102, 13	Open	ALERT #953539 149, 53, 57	Open	HIGHLIGHT #FDF8E4 253, 248, 228
Interact Link colour indicates actionable text and icons such as tertiary buttons and hyperlinks Primary colour is used in primary buttons and the tab bar Destructive colour should be limited to actions that lead to data loss, such as content deletion
Open	LINK #007AFF 0, 122, 255	Open	DESTRUCTIVE #FF3B30 255, 59, 48

Layout, grid and spacing

The Totara Mobile app uses the widely popular 8pt grid for consistency and flexibility. Layouts, margins and UI element dimension are multiples of 8: 4, 16, 24, 32, 40, 48. This helps us achieve visual harmony and optimal rendering on most common screen sizes and device pixel density (for example x0.75, x1, x1.5, x2, x3). Follow this grid when designing and implementing new layouts in order to maintain a consistent UI.

• Responsiveness: We use flexible UI components with fixed spacing, based on 8pt grid, to ensure a good fit on any mobile device (and to future-proof the app)

• Readability: All pages follow Apple's safe area guideline, with margins on all edges, clear of content and interactive elements (excluding content overflow which users can swipe to scroll through)

• Harmony: Grouping and stacking elements based on 8pt grid (this is true for cards, tiles and page layouts)

• Usability: Touchscreen interaction must be forgiving to user errors, allowing for multiple factors such as 'fat fingers' and on-the-go usage - interactive elements such as buttons need bigger target areas (at least 40px) and generous spacing around them

• Read more about the 8pt grid: The comprehensive 8pt grid guide (Medium)

Typography

Typography, according to Wikipedia, is "the art and technique of arranging type to make written language legible, readable and appealing when displayed". In essence, mobile typography helps users find their way around the app with ease. We use fonts, text sizes, colour, grouping and spacing to bring order and hierarchy, making the app more user friendly and accessible.

• Read more: Designing better mobile apps typography (UX Collective)

Text styles

Totara mobile app uses iOS & Android system fonts:

• Android: Roboto

• iOS: SF Pro

Imagery

App icon

The app icon appears on phone home screens, in menus and on the app stores. A well designed icon helps users recognise the app at a glance. See below all the different sizes used to show the app icons on different platforms. Providing all these sizes will ensure your icon always looks at its best.

This is the default app icon. The clean and minimalistic design uses Totara's brand logo and colours, and the white background makes it stand out in busy home screens, menus and lists. You can change the default app icon and rename your app in any mobile development tools such as React Native.

Open

• Read more about App icon guidelines (Apple)

• Read more about Product icons (Google)

• Read more about changing app icons in React Native (aboutreact.com)

• Read more about the Totara Mobile app icon: Theming product documentation

iPhone icon size (px)

iPad icon size (px)

Android icon size (dp)

App logo and splash screen

The splash screen appears while the app loads in the background. Totara's default splash screen shows the Totara logo over a white backdrop. Once loaded, the app redirects to the homepage. On first-time use, or if the user is logged out or when the server URL has changed, it redirects to the Get started screen (see below screenshot), where the user is asked to enter their organisation's URL. You can customise the splash screen by changing the logo image. 

• Optimal image dimensions: 120 x 85px

• Supported file formats: PNG / JPG / GIF

Open

The splash screen (left) and Get started screen (right).

Icons

We use icons for common actions, status and feedback. When used correctly they help declutter the UI and reduce users' cognitive load. The Totara Mobile app makes use of the Font Awesome open source icon set, with a few custom icons of our own making.

All these icons are designed to be simple, modern, friendly, and a bit quirky. Each icon is reduced to its minimal form, expressing essential characteristics. We recommend following these principles if you wish to add your own custom icons.

Font Awesome icons

Open

Open

Open

Open

Open