Brief:
Our designs were created using a large amount of custom made components that created a time deficit due to having a high engineering and testing requirement. Combined with the uniqueness of each component were different behaviours which created inconsistencies in the implementation.
We decided that moving to a component based system such as Material Design would help us optimise our design, reduce inconsistency and provide us with a highly customisable design system to make our own.
Structure:
- Research component libraries
- Audit current components vs. each library
- Audit current icons vs. each icon font library
- Create draft versions using the chosen component library and icon font solution
- Draft versions using only existing components
- Create a design system based off of the chosen component library
- Re-design all pages and create documentation for developers
Component Library Research & Audit
We tested multiple component libraries and it became clear that React Native Paper, which is based on Material Design by Google, was the best fit for our priorities.
Icon Pack Research
This process also gave us the opportunity to switch away from Linearicons, which we had encountered issues with instaling custom icons and that did not fit the new style so well. So we performed an audit to see which Icon Packs covered best our currently used icons and what alternatives they possibly had.
In the end we chose FontAwesome as they have a large array of icons and continue to add regularly, also offering the option to upload your own.
Research by Page
We did a test run of using the React Native Paper component library to see how closely we could adapt our current designs before making changes. This allowed us to discover where we could encounter issues and also provided the spring board for offering new ideas and customisations during the creation of our design system.
💬 Chat
- The contact detail section of the chat messages will be changed. Previously the contact name was above the first message bubble from that users thread. The avatar was placed on the left hand side and would move to the latest message sent by that user in a thread. Now the two elements (Avatar and Contact Name) will be placed in a horizontal line above the first message of a thread on their own line. Both the avatar and contact name will be shown in a larger size.
- The circle play icon button on the chat Video Message will be replaced by the new Material Design button in dark blue with the Play icon and text "Afspil video".
- All text message bubbles will be full width.
- Files will now be attached as a list element showing the details of the attached file with a material design button attached that shows the Download icon and text "Hent filen".
- The Create Message toolbar at the bottom of the chat has been split so the quick actions are moved to their own row.
- A larger text input field is used and the send button remains.
- The quick actions placed on their own line will all be shown pemanently and the Arrow icon to expand this row will be removed.
- A Call button can be placed in the top right hand side of the Top App Bar for 1-1 chats. In a group chat, this will still show the three dots for the More Settings function.
💬⚙️ Chat Settings
The Chat Settings section does not contain too many changes as most of the current designs have simple corresponding components available in the Material Design package.
- The Input field uses the material design Text Input component.
- The list elements are updated to the newer material design list elements.
- The list items in the Chat Creation page will use the standard checkbox in addition the material design list items.
- The details section that the list scrolls behind can use elevation.
👨💻 Contact Details
- The list now users Text Input fields to both display and edit the information.
- A save changes button will be present when the user makes any changes to the page.
- When pressing back without saving the changes, the user will be prompted to save the changes.
📕 Contact Profile Page
We have experimented with the idea that the header section of the Contact Profile Page will not be minimised. Through this decision we lose some screen real estate but save development and QA hours.
- The event cards used on the Contact Profile Page will be changed. These changes will be noted down later in this document.
👩👩👦👦 Contacts
The contacts page uses mostly standard elements from the material design the mirror the old designs.
- The Star favourites icon can also be used here next to the name to show whether a contact has been favourited.
- A concept placing the different types of contacts in lists is also shown.
- A further concept using the avatar section of a list item showing which type of contact the user is - Standard: User icon - Follow up: Flag icon - Favourite: Star icon
- The idea of being able to swipe to add to follow up has been retained but with the option to also add the contact as a favourite in the same swipe menu.
👷♂️ Co-worker page
The co-worker page will use a lot of the same concepts from the original design.
- The contacts will be shown as cards instead of custom list elements.
- The activity status of the co-worker will not be described in the list element. This now be viewed when pressing the "+ Mere" button on the card.
- When pressing more, the user should be able to view more details about that co-worker including being able to copy the virtual number.
- The message and call buttons will be replaced by the newer material design versions.
- Users still unverified in the Maguru system will shown in a seperate list underneath and it will still be possible to send a new invitation. When the invitation is sent then the button should change to show a tick with a disabled state. This is to prevent the user accidentally sending multiple invitations to the same user.
- When an admin returns from another page, they will be able to send a new invitation again.
- The user reminder when another user is busy will now change from a system message to a dialog from material design.
- A light grey background (#f8f8f8) has been considered for the background.
👩👩👦👦💬 Groupchats
- The event cards for the group chats use the same event cards as the event card header.
- A notification number can be added to the top right indicating how many recent messages there have been.
- If a message is unread then the name is in bold and the subtitle is in semi bold. Then if the message is read, then the name is in semi bold and the message is in regular.
- The list has been divided up into three sections:-
- Groups with unread messages
- Pinned chats
- Other groups
- A banner has been added to the top of the page when the user first accesses the page to make sure that they are aware of the all chat.
- The all chat is pinned by default but can be unpinned by the user. The user can pin other group chats so that they are at the top of this section.
Event Cards
To create commonality amongst the event cards - the different areas are being split into smaller components. This allows for a section of the event cards to be used similar to the event items from the chat elements. In doing so we are still able to give the same level of detail while providing a better overview of each event.
- To be consistent with the Recent Events and Contact Profile Page, the events have been split into four sub sections.
- Event List Header
- From/to identifier
- Message content
- Actions (Optional)
- The content section for the Recent Events page can be a maximum of 2 full lines of text. On the Contact Profile Page there is no limit.
- A system line is used to inform the user if there was no content.
- The audio playback section has also been updated with a more usable component with better spacing and the possibility to call the user back.
- Routed elements are more complicated but a design solution for this is shown in the design file.
- Locked elements are shown with a padlock badge in the bottom right corner of the event detail avatar.
Create design system using React Native Paper
We adapted our branding, design guidelines and icon with the React Native Paper component library to create our own design system which could be used for designing new elements.
Final Output
Here some side by side reviews of some re-designed pages can be seen below.
Profile Page
Dialpad Page
No Connection Fallback
Work Hours Settings Page
Account Selection Page
Review
Switching to React Native Paper and Material Design has been a long process and was an ongoing project for several months. It was felt that it cut design and development time especially towards the end of the design stage.
Consistency in the app has been improved and it is easier to implement ideas without having to design and create a lot of custom elements or animations.