Swisscom iO an instant messaging communication app that lets people send messages, images and talk to each other via voice calls, video calls and with innovative features like LiveChat, to follow what friends are typing in real-time and VideoChat which allows you to send and receive video while chatting.
When Google launched material design, I was quite excited, Android was finally getting a modern visual language and a set of very complete guidelines to visually unify the platform.
The visual style of Swisscom iO was an adaptation of the design originally done for the iOS version. This of course had some negative consequences, not only visually but also in terms of functionally, borrowing UX patters that didn’t belong to the Android platform and using components that felt out of place.
It took some time from the moment material design was announced to the moment we released the material version of iO. Our priority was to implement features planned in out road map. Once it was all done, we started to plan the redesign of the application.
We divided the redesign process in three steps:
- Styles normalization and application theme
- Material design implementation
- Transition and interactions
The first step was to normalize the current application by defining a color palette, font styles and iconography. We decided to use Roboto instead of the original fonts because they didn’t render well specially in low density screens. In this step I made a Sketch file with all the screens, defining the places where the revised text styles were going to be applied. We also replace the iconography using the Material design icons set.
While this step of the process was being implemented I moved forward with the design, changing the visual language of every screen using material design components and metrics. This was the most labor intense step for both me and the developers involved since we had to build again a lot of the screens.
I also redesign the application icon to make it look and feel part of the material design visual language. The original iO app icon had outer square. This time I choose a circle for the new version to make the change more visible to our users but also because circles are the biggest shape in the material design grid for app icons.
The last step of the process was to prototype and implement some of the transitions and interactions. I also made the promotional images for the Google play store.
This redesign was done in collaboration with a team of outstanding android developers that were challenged with some of the new demands of the design. The goal was to make a material design app following the guidelines but also with the flavor of our branding and we feel we did it! 😊www.io.swisscom.ch