Mobile Dimension has developed a "tablet for the consultants of the trading hall" by order of M.Video

Within the framework of the project “Deal here and now!”, Teams of technical specialists M.Video and Mobile Dimension developed tablets for the consultants of the sales area.

About company
')
M.Video is a leading Russian retail chain specializing in the sale of electronics and home appliances in Russia. M.Video is one of the largest European companies in this segment. In the first quarter of 2017, the network consisted of 399 stores in 165 cities of Russia.

Challenge to Mobile Dimension

It is not so easy to be a sales assistant in M.Video. Even if you are a real expert with a pronounced encyclopedic mindset and phenomenal memory, remember the huge range of the store - from blenders to plasma panels, from mobile cases to refrigerators, numbering about 20,000 items of equipment, is difficult. Now imagine that for every product there is a whole set of accessories, and each one has its own technical characteristics, its own advantages and disadvantages. And this is not all the difficulties: the buyer is not just waiting for a qualified answer, he is waiting for him instantly, here and now. And after all, the buyer is not one, there are many buyers.

Fortunately, in this world there are mobile technologies and Mobile Dimension. Thanks to the well-coordinated teamwork of the Mobile Dimension and M.Video technical teams, the network’s shop assistants have their own personal electronic consultant who knows everything and receives data online. And not only about the assortment in general and each product separately, but also a little about the buyer.

At the start, the task sounded very clear: to increase sales by introducing a “tablet for consultants to the trading floor” by 3%. In fact, the first meetings and discussions, it became obvious that the tablet should contribute not only to increase sales efficiency, but also to the growth of up-and cross-sales. And he must be integrated into the loyalty program and be able to offer the buyer additional motivation to purchase more goods and increase their average bill. To fully understand the functionality, meetings with dozens of consultants were held, and the sales process was analyzed in real stores.

Each shop consultant, taking a tablet with our application in hand, should receive:

• Exhaustive information about the product range of the store and the network as a whole
• Full information on the technical characteristics of each product
• The ability to compare similar products
• Comprehensive information on all accessories and related products for each product.
• Access to the client profile and bonus account in the “M.Video - Bonus” loyalty program
• Opportunity to register a buyer in the loyalty system with a few clicks
• Information on current discounts and promotions in the store

Complicated? Yes! But for us there are no impossible tasks.

Mobile Dimension Solution

In order to implement the project on the Mobile Dimension side, a project team of 11 people was allocated, including four back-end developers, three testers, two mobile developers, and two UX / UI designers. To enhance the dynamics of the work, the Mobile Dimension technical team worked directly in the M.Video head office side by side with the project team on the part of the customer using Agile-Scrum methodology. The solution was implemented on the UWP platform for target devices - Windows 10 tablets.

Convenient product catalog

• Full catalog of goods
• Extensive product information
• Specifications
• Availability at the store

Alexander, senior back-end developer Mobile Dimension:

As part of the back-end development, a classic technology stack was used, including Java 8, Spring, and Hibernate. To make the further development of business logic solutions modular, flexible and easy, we used a micro-service architecture built on Docker. Each service turned out to be as isolated as possible thanks to API Gateway, which proxies calls from application to services, aggregating data if necessary. If service A needs service data B, then it does not take them directly, but uses a dedicated router. On the one hand, this made the code somewhat complicated, on the other hand, each service began to work practically in an isolated environment. This makes it easy to write unit level tests without mocking. This situation allows us at the assembly stage to understand whether the innovations have violated the system, and thus save time. If the service accesses the database, then before the test, the data related to this test is migrated, and, if necessary, this data is immediately inserted into the code.

Since all requests are taken over by the Gateway API, it is subject to increased requirements for reliability and performance. Since it took a lot of time to wait for responses from other services, we used an asynchronous communication scheme available in version 8 of Java. To execute requests, we used the AsyncHttpClient library, which is also used in the gatling load testing tool. With Swagger, we always had up-to-date information about the API of our application, and thanks to MapStruct we were able to easily modify the data between services.

A considerable part of the application is communication with the service platform - a common API hiding behind all business systems such as CRM. In fact, this is the only thing we had to mokirovat in tests.

Quick search, compare and order goods

• Compare Products
• Quick checkout

Victoria, UX / UI Designer Mobile Dimension:

What was the main difficulty in creating this tablet solution? We had to create a tool that is interesting not only for the seller, but also for the buyer! Corporate and custom solution in one application! This is a challenge!

It was a project that we created side by side with store consultants. We worked not so much in the office as in the fields. We went to M.Video stores, talked with sellers and consultants, collected information, discussed the convenience of the future interface. The information gathered was the basis of the concepts that were tested again in the context of live communication with end users. We deliberately chose various specialists: experienced consultants and novices. We visited different points: for example, I learned that stores in shopping centers and detached ones differed from each other in the number of buyers and the goals of their visit - and all this had to be provided for in the decision and reflected in the design. To test the most insane ideas, interactive animations were created in Principle: first we discussed them inside the team, then with the customer's team, and we would surely bring them to the sellers. In a word, we checked the interface solutions as they were created, which helped to correct and improve the interfaces in time, to avoid major errors and large resources.

The described works were carried out in the framework of the first stage, during which we gathered together, on the one hand, the requirements of the business, and on the other, the wishes of the sellers. The basis of the design went to the M.Video brand book and the requirements of Windows. The design was developed using Sketch. From the first layouts, interactive prototypes were created in the Marvel App, opened on a tablet, and tested custom scripts. Currently, work on the interface continues. We get new feedback, think over new solutions and strive to make the application even more convenient and functional.

Loyalty program

• Buyer Information
• Bonus Calculator

Jan, UWP Developer Mobile Dimension:

It is necessary to choose the UWP (Universal Windows Platform) technology for all companies for which the main ecosystem is the Windows 10 OS. M.Video is among them. UWP allows you to deploy created applications not only on mobile devices or tablets, but also on the PC of company employees. By preserving and improving the legacy of WPF - MVVM out of the box, rich tools for developing, styling and expanding controllers - UWP focuses on solving a pressing task, namely developing applications that can be deployed on all types of devices on Windows 10 operating systems.

It coincided that during the development of the “consultant’s tablet” for M.Video, Visual Studio 2017 solution was released, which also expanded our ability to work with UWP. What is worth only the ability to edit application markup in Debug mode without having to restart to view the changes - this greatly accelerated the speed of application development!

From the very beginning, the development of a “tablet of a consultant” was carried out under a certain resolution of the device displays, but at the same time the adaptability of the created UI for other resolutions was laid. The adaptive model implemented in UWP allowed working “on two fronts”: the team implemented the models provided by the designers on time, and several months later, when the need for deployment on mobile devices arose, just a week later a prototype of the same application was provided, but under completely different resolution. The customer was pleased and agreed that the mobile device does not require processing. The UI company did not lose precious time, and the team did not waste time on solutions that would have to be redone.

In the process of further development, we found a nice innovation from Microsoft: unlike WPF, all controls in the standard library are almost completely open access, so we had the opportunity to change existing controls, rather than writing them from scratch according to needs project.

Buyer area

• Speedometer bonuses
• Points & Bonus Information

Alexander, lead testing automation engineer Mobile Dimension:

As part of the project, the tasks of the tester included setting up CI, writing autotests for the frontend (UWP - java + appium) and backend (java), as well as conducting load testing.

At the beginning was the task of setting up CI. The assemblies of backend and frontend artifacts, as well as autotests for the backend, were required. For this we have chosen TeamCity. After making configurations for building artifacts, I took up configurations for deploying the application. As a result, the artifacts began to be assembled in one assembly and deployed in several assemblies into Docker containers (Dev, Test, Front Test). For debugging in dev-assemblies and mocking third-party services in auto-tests, Wiremock was also selected in the docker container. Next, an assembly was made to test all commits, in which the application was assembled, deployed, tested and, in the absence of problems after testing, was deleted. The next step was the configuration for release artifacts. In them, the application is assembled in a docker-container for a production server and a pro-like test bench. Containers are stored in the docker repository, the production server update takes less than 5 minutes, but with two nodes in mind, it runs seamlessly. The frontend is written in C # (UWP), assembled on the CI server using msbuild in x64 and x86 configurations.

Now about testing. All test cases and test run results are maintained in TestRail. Backend autotests are written in java using frameworks - testng, rest-assured, hibernate, spring.

Before each launch, the test base and wiremock mapping is cleared. Tests are run in several threads in parallel by class. After running the tests, the results are collected and added to the TestRail. In autotest frontend uses a different stack in accordance with the requirements of the customer, namely java and junit + cucumber. The tests themselves are written in the gherkin script language, they are stored in TestRail, during the launch they are taken from there and chased away. Spring, hibernate and appium were also used. To automatically install the latest build of the application, powershell scripts were written.

Feedback from the customer

Evgeny Jamalov, project curator from M.Video:

The Consultant Tablet is a complex project for several reasons at once. First, because of multitasking. The TK included extensive functionality for servicing a variety of business processes and tasks facing the company, as well as HR-work with sellers. Secondly, at a certain moment, we realized the need to integrate the development with the m_mobile solution that already existed at that time, which was actively used by consultants in the area of ​​smartphones and digital electronics. This required a gradual refinement and interface change. In fact, we solved the difficult and very interesting task of integrating applications when you need to avoid duplication of functions and keep the user for a single user flow. Thirdly, the scale that caused the increased demands on the load and data security.
The Mobile Dimension team demonstrated the flexibility, efficiency and full compliance of professional skills with a complex technical task. The chosen Agile work format allowed us to work closely with each other, quickly adapt to changes and move dynamically towards the goal. The initial task of releasing the minimum vital functionality was completed successfully. Now we have a new goal - as soon as possible to provide our users with a full-featured application, so that M.Video sellers promptly accompany the buyer’s full cycle in a retail store - from help in choosing equipment and making a purchase to post-sales support.