Redesign of the Italian Dry Cleaning Network

Objective

The website was developed more than 7 years ago and is morally obsolete. The company has formulated new ambitious marketing plans, as a result of which it was necessary to thoroughly reprocess the current resource both for marketing discounts and to meet modern requirements for convenience and adaptability to mobile devices. Integration with the industry CRM application system and updating of information on the range and cost of services was also a challenge.

Problem

The editing of the existing website has been linked to a number of problems:

• the structure needed to be repeated to save positions in the search engine;
• a complex integration module with Yandex.Maps were implemented on the old site, which needed to be repeated;
• the site management system is very outdated and requires a lot of work to upgrade;
• the customer used the industry CRM system with which integration had to be configured;
• the mobile version had higher navigation and usability requirements than usual.

Solution

Develop a new site based on the 1C-Bitrix management system with a client’s private office, a developed service catalogue, and an adaptive layout for mobile devices.

Audit of site information structure and CRM

In the first step, I made a list of all pages of the old site and analyzed the results of the search release.

We have found that not all information pages of the site are involved in the creation of target traffic to the site. We discussed the situation with the Customer and decided to abolish some sections and simplify the structure.

An audit of the customer’s CRM system showed that it did not have integration protocols with external services, so they decided to implement integration by loading the prices that the CRM system allowed to form.

They discussed the plan of work with the customer and agreed on the methodology of implementation step by step. The development was carried out as the layout design was approved. Special attention was paid to the testing of the function and the experimental operation.

Based on the results of the audit, formulated the technical specifications and described:

• requirements for the structure and content of the site;
• integration mechanism with customer's CRM system;
• integration functionality with Yandex maps and wishes of the customer on change of logic of its work;
• structure and functionality of landing pages for marketing discounts;
• catalogue structure and the logic of ordering services by the end-user.

Break down the implementation process

This phase became one of the most important for the design team on the way to the final decision. There was a large amount of work to be done to analyze the current solution and design the structure of the new site.

UX/UI Site Preview Analysis and Implementation

Only two things can be said about the previous version of the site: it was created without the help of a designer and no rules UX and UI design followed. The site changed without controls for a long time without meeting the requirements of the corporate style. As a result of the analysis of the Customer’s site, we found nothing that could be used in the new version and decided to do all the work from scratch.

Obvious problems:

• chaotic content organization on the website;
• excessive emphasis and lack of uniformity;
• complex and complicated navigation of the site.

Prototyping

Since the Customer had not previously worked on constructing the logic of content, the UX designer took time to isolate the main semantic blocks for the main page. Conducted analysis, prepared the concept of navigation logic, made a presentation to the Customer and approved priority sections of the site.

As a result, we agreed to transform the current information site into an online service where you can quickly and conveniently order the service within the next 24 hours.

The main tasks in the design were:

• maximal simplification of the procedure of ordering the service;
• simplification of navigation;
• highlighting the advantages of the company.

After the basic work on the content and structure of the site was finished, the detailed work on the visual part began. They set themselves the goal of getting a visually clean and easy site that would not "press" on the user with its complexity, but mainly was easy to adapt to mobile devices.

Colour scheme

Decided to replace the site colour scheme with a more up-to-date and enjoyable one. We got rid of "dirty" emerald tones, and the main accents on the site were made in the colour "ultramarine", which visually, together with white colour, preserves the image of "purity".

Site header and banner

The first stage of the development of the layouts expanded the content area of the site and as a result gained more space for constructing the optimal visual composition of blocks.

The site’s hat has been transformed. All navigation has been revised to simplify. Only the most basic items were removed in the visible part, and the secondary items were hidden under the icon of the menu. The menu of the catalogue of services has been implemented separately in order not to load the navigation panel with such information.

Product card

Since the Customer has a long list of services, we decided to implement them in the form of trade offers made in the form of small cards with additional options. We realized the functionality of ordering the service without entering the goods card. To order it is enough to click on the plus and go to the basket for the registration.

Recognizable icons have been developed for each service category to help the user intuitively navigate the catalogue.

Account page and ordering

Since the main focus of the new site was on re-orders, we decided to implement the client’s account page with the order made through the shopping cart.

The display of services in the shopping cart was implemented by analogy with the catalogue. To simplify the order, we added the possibility to edit services directly from the basket without going back to the catalogue. Also, the functionality of quick access to the catalogue from the shopping cart was implemented via the button "Add" if the user forgot to specify the right thing.

The conditions of the order processing were further expanded by the possibility of selecting the time of delivery of the order (from the client to the performer and back), as well as by the indication of the urgency of the order.

Addresses of dry cleaners

One of the important questions for the Customer was the functional of the "Dry cleaners' addresses" and its integration with Yandex.Maps. It was important for the customer to show the scale of his company and to demonstrate all possible formats of his company: from receiving points to mini-factories, factories and dry cleaners.

To do this, we have implemented the ability to view the information in 2 types: points on the map and a list of maps with detailed information. We also implemented the functionality of filtering addresses by proximity to metro stations or the district.

Adaptive mocaps

Optimum site display on mobile devices was one of the main requirements of the customer. The desktop layouts of the site version were immediately developed with a view to their subsequent adaptation to mobile devices, so there were no problems at this stage.

UI Kit

For each project, we prepare a UI kit. It is a set of ready-made user interface elements that are designed to speed up the process of creating new layouts and mock-ups. In the future, UI-kit allows developers and designers to make changes to the site without problems.

After detailed functional development and design layout development, little remained to do - to implement all ideas in the finished product.

Tasks performed

Performed adaptive, cross-browsing layout. Implemented integration with the internal CRM system, developed a functional map, tested the whole functionality, conducted training and only then updated the old site.

A new adaptive site for the Italian dry cleaning network has been developed which includes the following functionalities:

• rapid order dry cleaning catalogue;
• an integrated map of the nearest reception and order offices;
• design of landing pages for marketing shares;
• exchange of data with industry CRM system on services, prices and applications.