What are our mobile experiences?
Unlike our core desktop experience which is predominately served by the functionalities and features of Genesys Cloud, our mobile experiences are spread across four key mobile apps, Insights, Tempo, Collaborate and Communicate.
Each of these mobile apps provide a key service to our customers but at their core, they all look to empower Genesys users to use the Genesys ecosystem on the go.
Designing for mobile
Given the particular needs of mobile as a platform both in terms of distinct functionalities and platform requirements, we - the design system team - have created a custom design system for mobile focused UX designers to leverage.
Our mobile design system is both a subset of the Spark library with respect to the foundations (color, typography, iconography and spacing) while providing augmented and entirely reimagined components that better align with the needs of mobile.
Design system usage
In order to use the mobile design system and it’s styling/components within Figma, navigate to 'Assets' - 'Libraries' - 'Your teams' then add “Mobile Design System” to the file. Within this Figma library, designers are able to toggle between iOS and Android OS specific elements.
NativeOS Usage
Unlike the components used in our desktop design system which are all custom, for our mobile experiences we use a combination of nativeOS elements (those that are part of the system) and custom styled components.
Below is linked documentation from Material Design (Android) and the Human Interface Guidelines (iOS) for each of the relevant components.
|
Component |
Android Documentation |
iOS Documentation |
|---|---|---|
|
Menu |
https://developer.apple.com/design/human-interface-guidelines/menus |
|
|
Modal |
https://developer.apple.com/design/human-interface-guidelines/modality |
|
|
Segmented Control |
https://m3.material.io/components/segmented-buttons/overview |
https://developer.apple.com/design/human-interface-guidelines/segmented-controls |
|
Toggle/Switch |
https://developer.apple.com/design/human-interface-guidelines/toggles |
|
|
Action Sheet |
https://developer.apple.com/design/human-interface-guidelines/action-sheets |