Rossmann

The company needed us once again. This time, along with creating the new Rossmann Club mobile application, there was a need of building a new version of the app’s home screen (Dashboard) as well as a set of dedicated cards.

The goal was to make the app’s Dashboard visually appealing, easy, and convenient to use, allowing a smooth transition between two of the applied modes: At home and In store. Every mode needed to have its own looks and prioritize different functionalities.

Additional task was to personalize the app’s view depending on the parameters assigned to a target user. The views had to be compatible with both iOS and Android systems and available for all the users – whether logged in or not.

It was also necessary to design a new CMS module which would allow managing the Dashboard and cards according to the business’s requirements.

First, we download the list of texts for the cards with a single request and they are displayed. The cards have many different data: from graphics to the list of products. Other requests for details are queued and sorted depending on which elements of the list are visible. In the end, the data is joined to a current card’s list. It keeps the list fluent, appears immediately, and the users always see the data of the cards they are presently looking at.

Products on the card can be displayed in many different arrangements on the 2:2 net – every arrangement is a separate scene and transformation between the scenes is launched in the form of animation. It allows a fluent change of deploying the graphics.

There can be many cards on the list and their graphics usually take up the whole card. Additionally, a graphic can be a static picture or a gif. They have to be stored in the memory to avoid downloading them every time anew.

From time to time, there’s also a need for a thumbnail or an alternative graphic. What responds to all of these needs is a Glide
library – and we squeezed it till the last drop!

Data which won’t change their value, e.g. graphics, are saved in the read-only memory of the app. If a graphic is repeated, it’s not
processed from the internet once again but loaded directly from the storage. Data that can be changed are more difficult to store.

The solution is caching them in the RAM of the device. A user is always provided with valid data within the limits of a single session
with the app. After launching it once more, data is updated.

We provided both by an animation based on a user’s actions. We’ve decided to animate the scrolling of the list. Thanks to the dynamic cards’ sliding in regard to the speed of the move, a user gets an impression that the tiles are floating and bouncing off the edge which gives a natural visual response. Applying the physics was extremely important for the most natural floating behaviour.

We operated simultaneously in two different teams and had to clip it all together in a quite short period of time. Although we created only a small piece of the whole mobile app, it was highly interrelated with
Rossmann’s development process and in result difficult to deploy. Even though it affected the backend, too, it was much easier to implement thanks to the applied microservice architecture

Functional tests were based on the guidelines provided by the client and information acquired during the team interview. We also performed exploratory tests, retests, and regression tests on different internet browsers and mobile devices’ system versions. The acceptance tests were applied by the Client.

The application has more than 10M downloads on Google Play and is used everyday for both offline and online shopping, making the process easier and more convenient. It works flawlessly on Android and iOS based devices and a dedicated CMS allows a seamless Dashboard and cards management, targeting a client’s needs and following the company’s requirements.