Stadt Meister | Mobile App Redesign

A few weeks before the scheduled app release the project management team decided to change its interface completely. We had worked with Meinestadt in the past, so they asked us to help with the project.

StadtMeister is one of the projects of a German media company Meinestadt. It was developed by the department responsible for testing new product ideas for the company’s multi-million audience.

In the shortest time possible we had to:

completely redesign the app UI and integrate it into already existing product;
design the app icon and logo;
create the app landing page;
put together a promo video;
create a web page for publication sharing.

The purpose of the app is to inform the users about things happening around them at the moment — weather, events, news, social media content, and even messages form the police.

It’s important that Apple and Google notice us and the app interface should not get in the way!

From the client’s brief

1. Colors, Fonts & Style

In order to avoid any unnecessary moves we use general-to-specific approach and first of all develop and approve the visual language: colors, fonts, the style of icons and buttons.

The typeface, icons, shapes and weights set the style.

When selecting the color spectrum we used Meinestadt’s brand book. This allowed us to meet the client’s expectations right away.

2. New app design

Weather widget

We try to bring something new and special to every product. For StadtMeister we came up with a special way of displaying the weather.

In addition to the usual icons we assigned each state its own color and gradient. This allows regular users to find out the forecast just by glancing at the screen.

iOS app redesign

Clean and strict design serves as content passe-partout. At the same time it contains bright highlights and icons, pretty details and complies with iOS Human Interface Guidelines.

Android app redesign

While one of our designers was working on the app for iOS, another designer was developing UI for Android. We used the same visual language, only in accordance with Google Material Design. In order to meet Google's standards, we had to redesign the app navigation.

There are four types of cards inside the app: events, news, police messages and attractions. Soon this list will be supplemented with Twitter and other social networks, as well as sports, radio, urban services and transportation.

Work on the application icon.

3. App Store and Google Play product pages

Preparing screenshots and turning them into promotional materials is a very important step that many companies forget about until publishing their app in the store.

4. Landing page and promo video

A classic startup landing page includes a story about the product and its features and lets you quickly download the app. Responsive design and animations have become standard for digital industry.

The site is made with Readymag.

What to do when there is no time for coming up with the video scenario, not to mention animations? Find the right template, tell the customer about it and fill it with your own content.

This video was introduced during Meinestadt’s general conference 2016.

TO BE CONTINUED...

StadtMeister was launched on time and was introduced during the annual Meinestadt conference. Behind beautiful pictures in front of you lies hard work of our iOS and Android developers, who integrated new design into already existing app. We are looking forward to supporting and further developing the app.

Project team

Dmitriy Provotorov

Product Manager

Dmitriy Sidorov

Art Director

Elena Moiseeva

Lead Designer

Vladimir Stegantsov

Designer

Maksim Zakopaylov

iOS Developer

Yuriy Zolotukhin