With thismo companies can create corporate messaging for their teams. Service offers mobile apps for end users. We have created mobile design and developed Android app in collaboration with the client’s back-end team.
Real-time events are vital for any messaging software. In this project almost all the features rely on them: dialogues, messages and their statuses, “is typing” indicator, etc. The app also has user verification via SMS, can generate and read QR codes and offer profile search and messaging management functions.
In the iOS version the client already had navigation was implemented with tabs iOS users are used to. When working on design we started with navigation and tried to find another solution for Android version that would look more natural to Android users.
Navigation with tabs is not the best choice for Android since we have one main activity (My chats) while chat search and profile have less priority for the user. Solution with side-navigation (Drawer) is familiar for Android users but it doesn’t offer the best user experience since navigation elements are hidden in the menu and to access them user needs to perform an extra action.
That’s why we decided to sort navigation elements by their priority. The main activity (messaging) is also the main screen and Floating action button from Material Design gives access to adding new chats. Profile and other low-priority functions were put in the upper Action bar.
We were required to create an app design taking into account corporate identity, iOS version design and requirements of Material Design guidelines. We used 8-box grid, typography and a set of standard icons from Google. It allowed us to speed up further layouting and build elements on the screens with a strictly specified structure.
When creating interface we used elements of Material Design from AppCompat and Support Design libraries only. Thanks to it the app looks and behaves identically on different versions of Android system. Additionally, we implemented animations for user interaction with UI, namely transitions between screens and operations with list elements.