Please keep in mind that regardless of feature, the structure for this app is as follows:
- Header Bar (top): Displays current user status icon, app name, network connection icon, incoming alerts (for example, incoming text, voice call, etc.).
- Tab Bar (bottom): Displays 3-5 of the main tabs that lead to core features/interfaces. These currently include Contacts (left side), Recents (middle), and More (right side), but may include “who’s near” and “post” for public posts in the future.
- As the first screen that users see upon entering the app, the Contacts displays a list of other users who have accepted invitations. Information shown include users':
- Profile Picture
- Online status icon
- Nick Name (ID in parenthesis)
- Last seen
- User defined status text
There is also a ‘more’ icon leading to our activities screen for that user (there, you can start a chat, voice, video call, voice, video message, share location, update that user’s display name, etc.). We will need icons for:
- text, voice call, video call, share file, voice message, video message, share location (all these features are between RakEM users, device to device)
There is also a sub-header bar at the top of the screen, which displays the user’s name and has a “Refresh” button that allows the user to manually refresh their contacts. Tapping the sub-header bar takes users to their profile (or tapping “More” and selecting “Profile”).
At the bottom of the contact list is a search button which takes the user to the search screen.
To give you an idea of how this screen relates to other interfaces, here is a summary of gestures that are supported on this screen:
- Swipe up/down to scroll
- Tap on any user to go directly to the chat screen
- This is where the user can see a list of history of chats, sorted most recent first. If a chat has been received but not yet displayed (ie. chat is unread) an icon is displayed on the left most side of the contact (currently a vertical bar)
This screen displays:
- icon if unread, no icon if read
- Profile picture
- User name
- Either “Me:” or the user’s name, whichever of us sent the last message, along with the date/time of the message
- the first part of the message
- to the far top right of each contact is an icon for deleting the thread – note that this takes the user to the Delete Messages screen, where the user can delete the entire thread, or message by message, and these are also deleted on the recipients device.
- 1-1 chats and group chats should be differentiated
- This is a popup menu style dynamic list menu, allowing the user to move to other features and settings.
- This list will be text – need background and text color.
- A sophisticated chat interface that can support both 1-on-1 and group chat.
Users can securely share text, photos, videos/audio recordings, video/audio calls, emoticons, locations within the chat.
The sub-header banner:
- has the user’s Profile Picture, Nickname, UserID and text encrypted status. To the right, the user is informed (via text) of the number of unread messages they have sent to this user – if there are no unread messages the user has sent, this area is blank.
- includes standard chat features – text entry box, send button – and attachment button, which displays a menu of items which can be attached or activated (currently the list is: media (camera, pictures, video), Location, Emoticons, Voice Message, Voice Call, Video Call. Need icons for these activities.
- the main chat area has chat bubbles of different colors/location based on who sent the message. These “fly in” from either side depending on who sent the message. In the chat bubble are several icons, depending on the type of message: normal text has a sent check mark indicating the message has been sent and a forward icon for forwarding the text, pictures have a fullscreen icon to allow the user to view fullscreen, video has a play button and a fullscreen icon to allow the user to replay or view fullscreen.
- Currently the app header bar and tab bar are displayed while the user is on the chat screen – however, this is not a requirement in your design, but the user must be able to “exit” from the chat session by tapping.
5) User Profile
Where users can see and update their basic information:
- View their encrypted and sharing status, and go to the services panel to view expiries and renew
- First Name, Last Name
- Primary #
- Mobile #
- Email address
- Status Text
- Home Country (pick list)
- Profile Photo
- Change Password
6) Splash Screen
- this is the screen that shows when the app starts (iOS)
- fun, uplifting image of “people” enjoying the app/communicating
7) App Icon/Logo
- Consistent with the design, we will require an app icon that works on both iOS and Android devices
- the icon should reflect secure communications
- we will need a “default” button design for text buttons providing 2 states: Up and Down (selected), which can be resized as required.
- a general background image, which can be used on various popups and screens.