RossmannDashboard for clients who love a combined on-line & off-line shopping experience.
- Scope Android and iOS development, backend development
- Innovation Motion Layout, Glide library, a two-step cache mechanism, animations based on users’ actions
- Technologies Android: Kotlin, MVVM, RxJava, Retrofit, Dagger, Jetpack
iOS: Obj-C, AFNetworking, Realm
Backend: ASP.NET Core, MSSQL, Docker, Redis, MongoDB, TeamCity
- Business sector Retail
- Model of collaboration We worked on the Dashboard according to the fixed price model managing our own tasks within the limits of the defined scope
- Team 2 x iOS developers
3 x Android developers
6 x backend developers
2 x QA experts
1 x PM
start of the collaboration
beginning of development
last minute adjustments
testing and project release
Useful everyday digital application supporting clients in convenient shopping, whether they visit the store offline or online. Also, a functional management tool for Rossmann’s employees providing them with an option to personalize the offer according to particular customers’ needs.
Business needs & goals
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.
Dashboard’s main screen greets the users every time they open the app. It consists of a few fixed elements:
An editable greeting with a @name parameter
Switching between the modes
Menu at the bottom of the screen redirecting
to the main Dashboard, Basket, Shopping list,
products’ catalogue, and Profile.
Introducing the In store mode is one of the main alterations in the
new app’s looks and functionality. It allows us to use the basic functions while offline shopping:
Current store location or the address of the store that was manually set up by the user as the one of interest
All the available coupons.
Rossmann card with the barcode and additional
information: number of points gathered from Rossmann Club and potential information about Rossnę! discounts.
The content and order of cards on the dashboard is moderated by a dedicated CMS module created in the Angular technology, version 8. It allows a quick preview of the cards’ planogram for the whole month, copying, editing and removing them smoothly, as well as adding new ones, adjusting a target group, timeline, graphics, details, and preview.
Thanks to using streams, we were able to decide which card should be loaded with additional data.
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.
Adaptational tiles’ arrangement with MotionLayout
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.
Using a Glide library to adjust all the pictures – even the large ones are not a problem.
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!
To provide a user with immediate data, we applied a two-step cache mechanism.
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.
The speed of performance is not the only thing required by the users – the app should also be smooth.
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.
Challenges & solutions
The biggest challenge was coordinating our tasks with Rossmann’s development works.
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
The quality assurance process consisted of manual tests applied for:
- CMS performance on different web browsers
- Mobile app performance on iOS and Android system-based devices
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.