Mobile Dimension has developed a “tablet for sales floor consultants” commissioned by M. Video

    image

    Within the framework of the project “The deal is here and now!” Teams of technical experts M.Video and Mobile Dimension developed tablets for sales consultants.

    About the company

    M.Video is the leading Russian retail chain specializing in the sale of electronics and household appliances in Russia. M. Video is one of the largest European companies in this segment. In the 1st quarter of 2017, the network totaled 399 stores in 165 cities of Russia.

    The 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, it is difficult to remember a huge assortment of a store - from blenders to plasma panels, from mobile cases to refrigerators, with about 20,000 items of equipment. Now imagine that for each product there is a whole set of accessories, and each has its own technical characteristics, its advantages and disadvantages. And this is not all the difficulties: the buyer is not just waiting for a qualified answer, he is waiting for it instantly, here and now. And after all, the buyer is not alone; there are many buyers.

    Fortunately, there are mobile technologies and Mobile Dimension in this world. Thanks to the well-coordinated joint work of the technical teams of Mobile Dimension and M.Video, the sellers of the network stores have their own personal electronic consultant who knows everything and receives data online. And not only about the assortment as a whole and each product individually, but also a little about the buyer.

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

    Each store consultant, picking up a tablet with our application, should receive:

    • Comprehensive information on the product mix of the store and the chain as a whole
    • Complete 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 customer profile and bonus account in the loyalty program “M. Video - Bonus”
    • The ability to register a customer with a few clicks in the loyalty system
    • Information about current discounts and promotions in the store

    Difficult? 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 increase the dynamics of work, the Mobile Dimension team of technical specialists worked directly in the head office of M. Video side by side with the project team from the customer’s side according to the Agile-Scrum methodology. The solution was implemented on the UWP platform for target devices - Windows 10 tablets.

    Convenient product catalog

    image

    image

    • Complete product catalog
    • Comprehensive product information
    • Specifications
    • Availability in the store

    Alexander, senior back-end developer of 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 the business logic of the solution modular, flexible and easy, we used the micro-service architecture built on Docker. Each service turned out to be as isolated as possible thanks to the API Gateway, proxying calls from the application to the services, aggregating data if necessary. If service A needs the data of service B, then it does not take them directly, but uses a dedicated router. On the one hand, this somewhat complicated the code; on the other, each service began to work almost in an isolated environment. This makes it easy to write unit-level service tests without being wetted. This situation allows us even at the assembly stage to understand whether the innovation system has been violated, and thus save time.

    Since the Gateway API accepts all requests, it has high demands on reliability and performance. Since it took a lot of time to wait for responses from other services, we used the asynchronous interaction scheme available in the 8th version of Java. To execute the requests, we used the AsyncHttpClient library, which is also used in the gatling stress 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 data between services.

    A large part of the application is occupied by communication with the service platform - a common API that hides all business systems such as CRM. In fact, this is the only thing we had to get wet in the tests.

    Quick search, comparison and order of goods

    image

    image

    • Product Comparison
    • 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 was interesting not only to the seller, but also to the buyer! Corporate and user 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, and discussed the convenience of the future interface. The information collected laid the foundation for concepts that were again tested in live communication with end users. We deliberately selected various specialists: experienced consultants and beginners. They visited different points: for example, I found out that stores in shopping centers and freestanding differ from each other in the number of customers and the purpose of their visit - and all this had to be foreseen in the solution and reflected in the design. To test the craziest ideas, interactive animations were created in Principle: first we discussed them inside the team, then with the customer’s team, and necessarily - carried to show 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 high resource costs.

    The described works were carried out as part 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 design was based on the M.Video brand book and the requirements of Windows. Design was developed using Sketch. Interactive prototypes were created from the first mockups in the Marvel App, opened them on the tablet and tested user scripts. Currently, work on the interface is ongoing. We receive new reviews, think about new solutions and strive to make the application even more convenient and functional.

    Loyalty program

    image

    image

    • Buyer Information
    • Bonus calculator

    Jan, UWP-developer of Mobile Dimension:

    Choosing UWP technology (Universal Windows Platform) is necessary for all companies for which the main ecosystem is Windows 10. M. Video is one of 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 WPF legacy - MVVM out of the box, rich tools for developing, styling and expanding controls - UWP focuses on solving an urgent task, namely, developing applications that can be deployed on all types of devices running Windows 10 with a minimum fee.

    It so happened that during the development of the “consultant tablet” for M. Video, a Visual Studio 2017 solution was released that also expanded our capabilities for working with UWP. What does it cost only the ability to edit the layout of the application in Debug mode without the need to restart to view the changes - this greatly accelerated the speed of application development!

    From the very beginning, the development of the “consultant tablet” was carried out under a certain resolution of device displays, but at the same time, the adaptability of the created UI to other resolutions was laid. The adaptive model implemented in UWP made it possible to work “on two fronts”: the team completed the mock-ups provided by the designers on time, and a few months later, when there was a need for deployment on mobile devices, a prototype of the same application was provided in just a week, but under a completely different resolution. The customer was satisfied and agreed that UI processing was not required for mobile devices — the company did not lose valuable time, and the team did not spend energy on decisions that would eventually have to be redone.

    In the process of further development, we found a pleasant innovation from Microsoft: unlike WPF, all controls included in the standard library are almost completely publicly available, so we had the opportunity to modify existing controls and not write them from scratch according to needs project.

    Buyer Area

    • Bonus Speedometer
    • Information about points and bonuses

    Alexander, Lead Engineer for Test Dimension Automation Mobile Dimension:

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

    At the beginning, the task was to configure CI. The assembly of backend and frontend artifacts, as well as auto tests for the backend were required. For this, we chose TeamCity. Having made configurations for building artifacts, I took up configurations for deploying the application. As a result, artifacts began to be collected in one assembly and deployed in several assemblies in Docker containers (Dev, Test, Front Test). To debug in dev assemblies and to lock third-party services in autotests, 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, updating the production server takes no more than 5 minutes, but taking into account two nodes, it runs seamlessly. The frontend is written in C # (UWP) and is built 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 mappings are cleared. Tests run in multiple threads in parallel across classes. After the tests are completed, the results are collected and added to TestRail. Frontend autotests use a different stack in accordance with customer requirements, namely java and junit + cucumber. The tests themselves are written in the gherkin scripting language, they are stored in TestRail, during startup they are taken from there and run. Spring, hibernate and appium were also used. To automatically install the latest build of the application, scripts were written in powershell.

    Customer Feedback

    Evgeny Dzhamalov, project curator from M.Video:

    “Consultant's tablet” is a complex project for several reasons. Firstly, due to multitasking. Extensive functionality was included in the ToR for servicing many business processes and tasks facing the company, as well as HR work with sellers. Secondly, at some point, we realized the need to integrate development with the m_mobile solution that already existed at that time, which consultants in the area of ​​smartphones and digital electronics were actively using. This required a gradual refinement and change of the interface. In fact, we solved the difficult and very interesting task of application integration, when you need to avoid duplication of functions and save a single user flow for the user. Thirdly, the scale that led to increased requirements for loads and data security.
    The Mobile Dimension team demonstrated flexibility, efficiency and full compliance of professional skills with a complex technical task. The chosen format of Agile's work allowed us to closely interact with each other, quickly adapt to changes and dynamically move towards the goal. The initial task of releasing minimum vital functionality was completed successfully. Now we have a new goal - to provide our users with a fully functional application as soon as possible so that M.Video sellers quickly accompany the full cycle of the buyer in the retail store - from helping with the selection of equipment and making a purchase to post-sales support.

    Also popular now: