QA checklist

Visual checks

Fonts and Branding guidelines

Please refer to the Branding guidelines page for general fonts and branding guidance.

By default, Poppins font family is used in Ethora UI.

Poppins font has 5 variations. Bold and Black variatons should be used for headings and Light should be used for the content.

Note: The above, of course, is subject to any project-specific branding changes applicable to the specific project. In case you are making changes, your design team can create own branding guidelines based on our initial document.

Colour Scheme

"Background Light": the background colour used for the Top Header and other default backgrounds

"Background Dark": the background colour (typically a slightly darker hue of the "Background Light" used for the Navigational Header and other navigational backgrounds, e.g. the top part of the User Profile screen, to visually divide them from the main background.

Icon and Splash Screen

Applicaton Icon should be present and visible in the smartphone screen.

Splash Screen should be present and visible during launch.

Main page / lobby

Nav bar

1. Header & navigational section is visible in the top consisting of two sections: Top Header (above) and Nav Header (below) which visually occupy under 20% of the screen height and 100% of the screen width.
2. Top Header uses "Background Light" colour.
3. Nav Header uses "Background Dark" colour
4. Top Header displays the App Title (aligned to the left), Balance Box and Menu icon (both aligned to the right).
5. Nav Header displays the Rooms Tabs. By default these are "Official", "Private" and "Groups", with "Official" being selected by default.

Body

1. Body displays the list of Room Cells corresponding to the currently selected Tab.

Room Cell

1. Displays the Room Icon (aligned to the left). If not defined, displays first 2 letters of the room name.
2. Displays the Room Name (goes after the room icon, taking most of the middle space remaining between the Room Icon on the left and the Members Icon & Members Counter on the right). The font is smaller here so that there is space left under the Room Name to display the Latest Message.
3. Displays the Members Icon & Members Counter (both aligned to the right). Members Counter displays the number of users that are subscribed to the room.
4. Displays the Latest Message under the Room Name. Latest Message is shown in a font size slightly smaller than the Room Name, and the less intensive colour. Last Message includes: "<First name> <Last name>: <Message body excerpt>" (all aligned to the left) and the Last Message Timestamp (smaller font, HH:MM format, aligned to the right and displayed under the Members Icon & Members Counter). In case the Latest Message is not retrieved from the room yet, the following should be written in its place: "Tap to view and join the conversation."

Bottom / overlay UI

1. In the bottom right, an overlay "Manage Chats" icon is displayed.