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:

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

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

NEUTRAL-01
#FFFFFF
255, 255, 255

NEUTRAL-02
#F5F5F5
245, 245, 245

NEUTRAL-03
#E6E6E6
230, 230, 230

NEUTRAL-04
#D2D2D2
210, 210, 210












NEUTRAL-05
#C7C7C7
199, 199, 199

NEUTRAL-06
#7D7D7D
125, 125, 125

NEUTRAL-07
#4A4A4A
74, 74, 74

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

INFO
#337Ab7
51, 122, 183

SUCCESS
#69BD45
105, 189, 69

WARNING
#8E660D
142, 102, 13

ALERT
#953539
149, 53, 57

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

LINK
#007AFF
0, 122, 255

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.

Text styles

Totara mobile app uses iOS & Android system fonts:

StyleiOS FontAndroid fontWeightSize (px)Letter space (px)Line height (px)
H1SF Pro DisplayRobotoBold400.3648
H2SF Pro DisplayRobotoBold340.1841
H3SF Pro DisplayRobotoBold28034
H4SF Pro DisplayRobotoBold22028
SubtitleSF Pro DisplayRobotoMedium20025
BodySF Pro TextRobotoRegular17-0.422
Body boldSF Pro TextRobotoBold17-0.222
CalloutSF Pro TextRobotoRegular16-0.3221
SmallSF Pro TextRobotoRegular15-0.2420
xSmallSF Pro TextRobotoRegular13018
xxSmallSF Pro TextRobotoRegular110.213
Button labelSF Pro TextRobotoMedium17-0.222

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.

iPhone icon size (px)

Pixel densityNotificationsSettingsSpotlightApp icon

1x

2x

3x

20 x 20

40 x 40

60 x 60

29 x 29

58 x 58

87 x 87

40 x 40

80 x 80

120 x 120

60 x 60

120 x 120

180 x 180

iPad icon size (px)

Pixel densityNotificationsSettingsSpotlightApp iconApp icon (12.9 inch)

1x

2x

20 x 20

40 x 40

29 x 29

58 x 58

40 x 40

80 x 80

76 x 76

152 x 152

83.5 x 83.5

167 x 167


App storeSplash screenSite URL and About screen

1x

2x

3x

1024

180 x 180

360 x 360

540 x 540

120 x 85

240 x 170

360 x 255

Android icon size (dp)

Screen resolutionLauncher iconsAction bar, dialog and tab iconsSmall contextual iconsNotification icons

mdpi

hdpi

xhdpi

xxhdpi

xxxhdpi

48 x 48

72 x 72

96 x 96

144 x 144

192 x 192

24 x 24

36 x 36

48 x 48

72 x 72

96 x 96

16 x 16

24 x 24

32 x 32

48 x 48

64 x 64

22 x 22

33 x 33

44 x 44

66 x 66

88 x 88

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


Totara Site Administrators can customise the mobile app logo and primary colour (see the green button in the below screenshot), but these settings don't apply to the Get started screen on first-time use. Go to Quick-access menu > Plugins > Mobile > Mobile theme to customise your mobile app theme.

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

Settings | f013Delete | f2edSync | f021Complete | f058External link | f35dFailed | f057

Error | f071Ban | f05eChevron-down | f078Chevron-up | f077Info | f129Lock | f023

Custom icons - tab bar

 

  

 

 

HomeFind learningCurrent learningDownloadsNotificationsUser profile

Custom icons - downloads

Ready for downloadDownloadingDownloaded

Custom icons - activity status

Self-completionAutomatic completionCompleteFailedLocked

Icon sizes

iOS Pixel densityAndroidIcon size (px)

1x

2x

3x

mdpi

xhdpi

xxhdpi

24 x 24

48 x 48

72 x 72

Default illustrations

We created these illustrations to provide feedback in an engaging and visual way. Illustrations make the app more delightful for users, but they should be accompanied by other forms of feedback (such as text) in order to ensure clarity and accessibility. 

This default collection is included with the app. You can replace them with your own images. 

Current learning empty state

Additional action required

Course not compatible

Notifications empty state

Download empty state

URL not compatible

Authentication in browser

Mark as complete

Successfully completed

Default course image

Default certification image

Default program image

Attempt complete







Navigation and information architecture

The app's information architecture is fairly simple:

  • Once logged in you arrive on the homepage, which displays Current learning (courses, programs and certifications you are enrolled in)
  • Other top-level pages include Find learning (available only in Totara 15 onwards), Downloads (a list of downloaded SCORM packages which can be accessed offline), Notifications and User profile

A flowchart outlining the structure of the mobile app.

Navigation bar

Use the navigation tab bar to navigate between top-level pages. Depending on the version of Totara you're using, there are four (in Totara 13-14) or five (if you use Totara 15) top-level pages. Find learning is available only in Totara 15 onwards.

If you plan to add more top-level pages be mindful that the tab bar should hold no more than five items, so consider removing existing items in order to maintain the five-item limit.

The Totara 13-14 tab bar with four items (left) and Totara 15 tab bar with five items (right).