Migme Redesigned

Migme Redesigned

As some of you may have noticed, we recently redesigned our Android, iOS apps as well as our website, with the new design being far easier to use and engage with than before. This redesign has been a long process especially given that the recent release is planned to be just a first step, with more changes forthcoming. From the design team’s perspective we want to share our story on how this redesign happened and explain our thoughts around the changes.

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

Users can access migme through four different platforms. They can install and use our Android or iOS app, they can browse the full-sized website on their computer/tablet or they can go to our mobile website via a device.

Throughout the years our different platform teams have been working hard, but separately, to add and improve all kinds of features. This caused our 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 style. That way, it’s very clear that these are each all part of the same migme product.

New Design

Updated design style

Design styles keep changing as new technologies emerge and expectations develop. As people become more used to a modern flat design style, we wanted the new design to adhere to 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 line breaks on lower end devices. 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. Also 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.

Old Confusing 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.

New Navigation

Systematic design

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 Guidelines

Still to come

As design and development are continuous processes, we have just taken the first big step with this redesign. There are so many features and items we haven’t included yet, but we are working hard to get these done currently.

For instance, iOS doesn’t have access to games or the store yet, but these are being developed and will be implemented with due time. Simplified access to find new chat rooms is another thing on our to-do list, together with improving the miniblog. Ongoing changes like these are never easy but they are absolutely necessary in order to make the experience of migme more powerful and enjoyable for our users.

Show your support

Clapping shows how much you appreciated Shen-Hau Cheng’s story.