Redesign navigation migme

Migme simplified

At the end of the summer in 2015 we started a new project to simplify and improve the navigation of migme. The redesign of migme from the end of 2014 for Android and Web was not easy to use and caused for a lot of confusion for our users.

1 Design — 4 platforms (Android, iOS, Web, Mobile Web)

Users can access migme through four different platforms. They can install and use migme's Android or iOS app, they can browse the full-sized website on their computer/tablet or they can go to migme's mobile website via a mobile device. Throughout the years migme's different platform teams have been working hard, but separately, to add and improve all kinds of features. This caused migme's platform to have a large range of different design features which also meant that the platforms all behaved differently from each other. Have a look at how they each looked back then:

Old design

However with the redesign, one of our primary goals was to ensure that our Android app, iOS app and websites all share the same design style. That way, it’s very clear that they are all part of the same migme network.

Simplified design

Updated style

Design styles keep changing as new technologies emerge and expectations develop. People become more used to a modern, flat design style and we wanted the new design to meet these expectations. For inspiration the redesign uses principles laid out by Google’s Material Design and leans on their cards metaphor. One big benefit of a flat design style is that the user interface (UI) recedes to the background and the content becomes more prominent, providing a more pleasant content-driven experience.

Designing for multiple clients and keeping a consistent design language across all the different platforms come with certain constraints. The icons, in particular, need to be pixel perfect on iOS and Android and sufficiently clear on lower res devices. The old line icon designs did not satisfy these requirements as the lines of these icons 'break' on lower end devices and become unclear. As a result, we came up with a new solid icon system that helps solve these problems.

Improved navigation

The biggest change however has been the navigation, especially for our mobile apps. In the previous version people had to navigate by tapping on an orange button with a plus icon. It opened up showing two options left and right of the button, indicating where you could go next. Above the orange button, depending on where you were at that moment, up to three contextual actions appeared.

The orange button caused several problems for people using migme, which we wanted to solve in the redesign:

- The navigation was not obvious, it was hidden behind an action button. The plus icon shows no clear indicators that the button could also be used for navigation.

- You never knew exactly how to go somewhere else. Every time the navigation options changed, one moment the chat is on the left, the other moment it’s on the right. This was very confusing for most people as there was no consistency.

Confusing old navigation

In the new design we have redesigned the access to the miniblog, the chat and discover sections. Our most engaging sections, miniblog and chat, are now next to each other on separate cards and are central in the app. You can navigate between these two sections just by swiping left or right, it’s that easy. Access to the discover section (with stories from our team, music, games and the store) has now been placed at the top, next to notifications and search.

Simplified navigation

Design System

Migme has so many features and it needed to work on so many platforms that with the old versions it became difficult to innovate and develop at a rapid pace with so many different moving components. So a secondary goal for the redesign was to simplify the design components we have in order to reduce development times.

In order to achieve this we analysed what components were needed in the design. The design was then deconstructed into its smallest, most basic elements. From these elements the important components we required were reconstructed and in doing so, we reduced the number of different styles used. All these components have been organised into a design style guide which helps us get an steady overview of the complete design, from its smallest components to the complete UI screens for the different platforms.

Design system
  • Drive Better With Flo

    Flo is an app that makes you drive more safely, save on gas and logs all of your trips! Put miles into Flo and she responds with trip data that shows how you’re improving and where you still need some help. You can even analyze past trips in 3D…

    Improving migme sign-up rate

    With legacy product decisions from feature phone era in a smartphone ecosystem, it's no wonder our sign up rate has been abysmal. Changing our working processes has been beneficial in getting the different disciplines better aligned and improving our…