In late 2019, after changing their business strategy to focus on empowering their community, Sweat decided to refresh their image. They started several new projects, including updating their iOS and Android apps. But due to time limits and not always coordinating between teams, they sometimes lacked a consistent design approach. These individual solutions were okay, but they needed a more stable foundation for future growth.
The system should be easy to read, user-friendly, and considerate of those using different input devices or screen readers. It meets industry standards.
Use simple and consistent layouts across all components, regardless of the device, ensuring that the user interface is organised and predictable.
The basic design elements should consistently represent the brand across all products and devices, making users feel familiar and confident.
Each component element should follow specific rules defining its purpose. Having clear rules for each component ensures it has a clear reason for being.
Use of colour should have a purpose. Use colours to draw attention of the user to important elements, or as a visual support in situation that require the user’s attention
A navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical screens. When a new screen is displayed, a back button appears on the left side of the bar. Sometimes, the right side of a navigation bar contains additional controls such as a Icon or a Label button, for managing the content with the active view
✔ Use the standard back + close icon button
✔ Nav bar icons are always grey 50 on white circle.
✔ Title is grey 60 on white.
✔ Title is white when transparent bg over image
✔ Solid white background on scroll state
✔ Give text-titled buttons enough room.
✔ Labels are to only be plain text, never appear with chevrons.
✔ Abbreviate titles with elipses if they are too long.
✔ Minimum 16px padding between control and text.
Usage
Use a large title when you want to provide extra emphasis. These transition to a standard navigation bar upon scroll with controls staying fixed top right and contextual title with the same name.
Avoid crowding a navigation bar with too many controls.
In general, a navigation bar should contain no mare than the view’s current title, a back button, and one control that manages that view’s contents. We have some exceptions where there are two controls on the right hand side which may be reconsidered post reskin.
Showing the title of the current view in the navigation bar.
In most cases, a title helps people understand what they’re looking at. However, if tilting a navigation bar seems redundant, you can the title empty. If there are multiple controls in a navigation there may not be enough room for the title. In that instance it is recommended to abbreviate with ellipsis instead of wrapping the content
Usage
Search can be triggered from either tapping a search icon/control or tapping in the native iOS search field. Upon tapping either options it takes over the navigation with search results appearing underneath and the native keyboard enabled.You can escape this view by tapping ‘cancel’ on the right hand side or tapping out of the component.
Buttons allow users to take actions, and mak choices, with a single tap
Usage
Use a primary button to highlight the strongest call to action on a page. Primary buttons should only appear once per screen and not every screen requires a primary button.
Behaviour
Hover & Pressed state are only applicable to desktop.
Usage
Text links are used as actions in cells, or when hierarchy needs to be established over a Subtle text link
Behaviour
Hover & Pressed state are only applicable to desktop.
Usage
Custom buttons are informed by external brand guidelines, icons appear to the left to create consistency when layered together
Usage
Upon scroll the primary button remains fixed to the bottom with a white background. Theres a slight gradient above easing the transition of content underneath.
When paired with a subtle text link it is unlikely the page will require a scroll. However the same treatment applies with a white background and slight gradient fade above.
A text field is an input that allows a user to write or edit text.
Anatomy
1. Container
2. Label text
3. Input text
4. Trailing Icon
5. Helper text (optional)
Label
Label text is used to inform users as to what information is requested for a text field. Every text field should have a label. This should always be visible, moving from the middle. of the text field to the top (if the field is selected).
Input Text
Input text is text the user has entered into a text field. A cursor indicates the current location of text input in a field.
Assistive Text
Assistive elements provide additional detail about text entered into text fields.
✔ Clear icon to appear on all fields on far right once one character has been inputted.
✔ Visibility Icon (on/off) to override a clear icon on password fields.
✔ Active state primary colour cursor + grey 60 input text
✔ To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields
✔ If most fields are required, indicate optional fields by displaying the word “optional” in parentheses next to the label text
Usage — Helper Text
Helper text conveys additional guidance about the input field, such as how it will be used. it should only take up a single, being persistently visible or visible only on focus
Usage — Error
When text input isn’t accepted, an error message can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.
Behaviour
For text fields that validate their content (such as passwords), replace helper text with error text when applicable.
Usage — Helper Text
Helper text conveys additional guidance about the input field, such as how it will be used. it should only take up a single, being persistently visible or visible only on focus
Usage — Error
When text input isn’t accepted, an error message can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.
Behaviour
For text fields that validate their content (such as passwords), replace helper text with error text when applicable.
Use to alternate among related views within the same context
✔ Only one can be active at a time.
✔ Not be used for primary navigation.
✔ Have short and scannable labels, generally kept to single word.
✔ A text field is an input that allows a user to write or edit text.
Usage
Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by screen width They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.
Behaviour
To navigate between fixed tabs, tap an individual tab.
Specs
• Tab text that overflows will truncate with ellipsis.
• Maximum of 3 tabs possible in fixed view.
• Minimum of 8px padding on either side of tab.
Usage
Only use scrollable tabs when a set of tabs cannot fit on screen. Scrollable tabs can use longer text labels and a larger number of tabs.
Scrollable tabs display a subset of all tabs at once. The width of each tab is defined by the length of its text label.
Behaviour
To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can not be looped.
To select an individual tab, tap it.
Specs
Minimum of 8px padding on either side of tab.
Selection controls allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or modals.
It should be visible at a glance if a selection control has been selected, and selected items should be more visually prominent than unselected items
✔ Selection controls have been in user interfaces for a long time and should be used as expected.
Usage — Helper Text
No current use other than upcoming as part of yoga long form content. Pending research and discovery.
Behaviour
A slider is a horizontal track with a control called a thumb, which you can slide with your finger to move between a minimum and maximum value, such as position during media playback. As a slider’s value changes, the portion of track between the minimum value
Usage
The progress dots are visual indicators used when stepping a user through a journey, to allow them to keep track of their progress. They are typically accompanied by a carousel or another UI device.You would see this as part of onboarding, presenting promotional offers or new features.
Behaviour
User can tap the leading or trailing edge of a page control to visit the next or previous page, but they can’t tap a specific dot to go to a specific page. Navigation always occurs sequentially, usually by swiping the page to one side.
States
Active dot is 100% Opacity
In-active dots are 25% Opacity
Inverted — White Tint
Dark — Grey 50 Tint
Usage
Switches should be used instead of radio buttons if each item in a set can be independently controlled. Use switches to turn an item on or off, especially on mobile instead of a checkbox.
Usage
Radio buttons should be used instead of checkboxes if only one item can be selected from a list
Usage
Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
A tag is a visual indicator used to highlight, or categorise information for quick recognition. Tags can be either subtle or bold and use color to indicate meanings that users can learn and recognise throughout the app.
Appearance
Placement: Image card, dynamic modules, cell item, intra workout equipment.
Content: new program, trainer, friend referral, suggested workouts, types of exercises equipment
Future opportunities: Required fields, success/complete state, leaderboards, active - live workout status, Badges.
✔ By default, the maximum width of a tag is [x]px. When the text in the tag exceeds the max width, it will be truncated with an ellipsis.
✔ Tag text must be clear enough for color blind users to be able to understand immediately without needing to rely only on the color.
✔ For tallies or counts, use a badge
Usage
Use bold tags sparingly and reserve them for things that require immediate attention or are critical. These can also appear over an image.
Usage
Use inverted tags over an image in the top left corner.
Usage
Use subtle tags by default and in instances where they may dominate the screen such as in table cells.
An alert displays an important, succinct message, and provides actions for users to a ddress (or dismiss the alert). It requires a user action to be dismissed.
Alerts contain a single message and specific actions a user can take.
Alerts are interruptive, but their level of interruption should match the information they contain and the context in which they appear.
Alerts communicate a succinct message and what will happen if users interact with them. Avoid titles if possible and describe the message within 2 lines.
✔ They’re persistent and non-modal, allowing the user to either ignore them or interact with them at any time. Alerts stack vertically until dismissed when multiple concurrent alerts are triggered.
✔ Banners can supplement their message using a supporting icon.
Usage
These are persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should (ideally) be shown at a time.
Design Debt Constraints
Given the constraints of a direct reskin and not wanting to touch business login, this is most similar to the dynamic module so majority would be translated to this component despite it carrying over a bad user experience. Most will follow the title format as that is what matches current state.
Usage
These banners remain until dismissed by the user, or if the state that caused the banner is resolved.
