designing a website for a supplier of industrial refrigeration devices
AGENCY
IgorPronin.com
INTERFACE TYPE
Responsive Web
Sole UI/UX–designer
ROLE
DATE
2019
STATUS
Launched
JOB TYPE
Remote
Why: Business Aims
'Ryad-Service' is a company that has been designing, selling, installing and servicing HVAC equipment for over 26 years. The company's specialists have installed and put into operation refrigeration equipment for more than 10,000 customers in 12 regions of Russia, Kazakhstan and Mongolia.
The main task is to increase conversion from visits to orders.
Since 2010 the company has had a website. The target action for all groups of visitors is to send a "Leave a request" form. The average conversion over the last year from visit to filling in a form is 0.5%.
Why: Product Tasks
Tasks of the new site:
— enter up-to-date information for key customer groups, answer their basic questions, 'close' fears and objections;
— get rid of the mass of unstructured and unformatted text information on the home page, develop a clear, modern structure regarding content;
— make the feedback form more obvious.
— enter up-to-date information for key customer groups, answer their basic questions, 'close' fears and objections;
— get rid of the mass of unstructured and unformatted text information on the home page, develop a clear, modern structure regarding content;
— make the feedback form more obvious.
One of the most important tasks was to create a more aesthetically pleasing website which would increase the company's value while preserving the existing graphic style and thus the company image.
Another nuance that had to be taken into account when developing the new site was finding the means to scale the number of company 'lines of business' indicated on the first screen of the home page.
Who: Analytics, Scenarios, Structure
After a three-hour interview with the client, I formed a vision of the project in the form of a diagram with several dozen branches. This diagram became the starting point for analysing target audiences and forming the structure of the site, as well as the structure of each page within it. In the process of analysing the target audiences, I identified the needs of 12 typical 'Ryad-Service' clients.
To more accurately capture how customers now solve problems related to refrigeration equipment, I built a CJM for each client:
Using the data obtained, I geared the structure of the site (and each page within)toward answering questions and working out the fears of each target group:
What: Sketching
Based on my designs for the structure of the site, I created four sketches of the main page. The sketching phase helped determine the best combination of elements on the homepage.
The first sketch shows a classic block design with cards. The structure strictly follows the scheme created at the analytics stage.
The second sketch implies the presence of a constantly open submenu which contains 2-8 titles representing different areas of the company's activities. The 'slogan' on the first screen is linked to relevant blog and review cards (e.g. 1. '25 years of experience' - blog entries with the hashtag 'cases' confirming these years of experience, 2. 'more than 10,000 customers' - cards detailing client feedback). This meant that even on the very first screen, we could work to remove any of the client's fears about the quality of the potential work. The 'About Us' block consists of a direct quote from the director, which also increases the client's confidence. This version of the site also includes the block "We guarantee ...", which is designed to eliminate all of the doubts and fears of the clients (those whose profiles were described at the analytical stage).
The first screen from the third sketch is fairly similar to the one from the second sketch. The difference is in the slogan and in the absence of a review card; reviews are highlighted in a separate block below. In this version, there are letters of thanks that aim to increase trust in the company. The key feature of this option is in the "All services in one click" block, which is designed to make the interaction between the client and the company as quick and convenient as possible. At the analytics stage, reports of several situations cropped up in which a client lost a significant amount of money during a season due to equipment breakdown. In this kind of situation, the client would certainly have appreciated the possibility of calling a specialist in one click. Even if the subsequent process was more conventional (you need to leave your phone number, a specialist will call back to clarify the details, etc.), under the heading 'one click' it would be perceived as a more rapid process than that of other companies.
The fourth sketch was the most advanced in terms of the underlying visual design, but this also created a problem: the solution would have been more difficult to implement than those described above.. In this version, there is no background under the header: the video is the background of the first screen. The videos change as the user hovers on the areas of activity located at the bottom of the screen. The transition to the page 'About us' occurs directly from the main heading, without 'attracting' a separate button labelled 'About us.' On the first screen, there are links to download the price list, and to company presentations: these are designed for managers / secretaries who have to 'put all the options on the director's table.' The blocks 'Blog' and 'Reviews' are 'veiled' under 'More than 25 years of experience' (where there are blog posts with the tags 'cases' / 'projects') and 'More than 10,000 customers' (reviews). This technique was used on the first screen of the second sketch, and allows for the integration of content with quotes outlining plus points, thus saving time and space for the customer.
At the sketching stage, I suggested that the client work with the layouts like a designer would: he agreed, and compiled the final layout from the elements he liked in the different sketches.
The second sketch implies the presence of a constantly open submenu which contains 2-8 titles representing different areas of the company's activities. The 'slogan' on the first screen is linked to relevant blog and review cards (e.g. 1. '25 years of experience' - blog entries with the hashtag 'cases' confirming these years of experience, 2. 'more than 10,000 customers' - cards detailing client feedback). This meant that even on the very first screen, we could work to remove any of the client's fears about the quality of the potential work. The 'About Us' block consists of a direct quote from the director, which also increases the client's confidence. This version of the site also includes the block "We guarantee ...", which is designed to eliminate all of the doubts and fears of the clients (those whose profiles were described at the analytical stage).
The first screen from the third sketch is fairly similar to the one from the second sketch. The difference is in the slogan and in the absence of a review card; reviews are highlighted in a separate block below. In this version, there are letters of thanks that aim to increase trust in the company. The key feature of this option is in the "All services in one click" block, which is designed to make the interaction between the client and the company as quick and convenient as possible. At the analytics stage, reports of several situations cropped up in which a client lost a significant amount of money during a season due to equipment breakdown. In this kind of situation, the client would certainly have appreciated the possibility of calling a specialist in one click. Even if the subsequent process was more conventional (you need to leave your phone number, a specialist will call back to clarify the details, etc.), under the heading 'one click' it would be perceived as a more rapid process than that of other companies.
The fourth sketch was the most advanced in terms of the underlying visual design, but this also created a problem: the solution would have been more difficult to implement than those described above.. In this version, there is no background under the header: the video is the background of the first screen. The videos change as the user hovers on the areas of activity located at the bottom of the screen. The transition to the page 'About us' occurs directly from the main heading, without 'attracting' a separate button labelled 'About us.' On the first screen, there are links to download the price list, and to company presentations: these are designed for managers / secretaries who have to 'put all the options on the director's table.' The blocks 'Blog' and 'Reviews' are 'veiled' under 'More than 25 years of experience' (where there are blog posts with the tags 'cases' / 'projects') and 'More than 10,000 customers' (reviews). This technique was used on the first screen of the second sketch, and allows for the integration of content with quotes outlining plus points, thus saving time and space for the customer.
At the sketching stage, I suggested that the client work with the layouts like a designer would: he agreed, and compiled the final layout from the elements he liked in the different sketches.
What: Prototyping
At the prototyping stage, key design solutions were formed: the use of three columns instead of the traditional twelve, the unconventional arrangement of blocks in a grid, and wide and contrasting typography.
I had to put a lot of text on the homepage: this was to convey the various benefits of the company. To make things easier for the user, I decided to split the written information into blocks, and clearly indicate the entrance, pathways, and exits away from them.
To optimise the content, instead of traditional titles like 'Projects', or 'Reviews' I used 'More than 26 years of experience' and 'More than 10,000 clients.' In this way I was able to kill two birds with one stone: I managed to divide the text blocks into semantic parts by their headings and outline the key advantages of the company.
What: UI–design
My task was to make the design of the pages as simple as possible so that it would be easy for the layout designer to create a fluid layout. Therefore, instead of the classic 12 columns, I used 3 very wide columns, which, when the browser window narrowed, would be able to narrow without deforming the blocks and make reading the content impossible. I did not use 'body kits' – i.e. left and right sidebars– so the layout designer did not have to think about the logic of column overflow on adaptives.
The design is based on contrasting and beautiful typography. Druk Wide was chosen as the font for the headings, stretched horizontally in a manner reminiscent of the logo. This was to reflect the stability and reliability of the company. Druk Wide was then paired with the free Rubik google font, which is similar to the company's proprietary paid font, for the body text.
The design is based on contrasting and beautiful typography. Druk Wide was chosen as the font for the headings, stretched horizontally in a manner reminiscent of the logo. This was to reflect the stability and reliability of the company. Druk Wide was then paired with the free Rubik google font, which is similar to the company's proprietary paid font, for the body text.
I preserved many of the stylistic attributes of the previous site – ecru background colour, stripes in corporate colours, plenty of text blocks, wide photos – in order to provide continuity.
The composition of the blocks, based on four vertical lines of force, is unconventional and creates a distinctive yet instantly recognizable pattern. This kind of composition is more characteristic of print than digital design, and therefore looks fresh and helps distinguish the site from competitors.
I developed three versions of the design (for desktops, tablets, and smartphones). All of the elements and functions available on the laptops and computer versions are also available on the mobile version.
Outcomes, Criteria for Success
I managed to resolve a key business issue, and increased conversion from visit to request from 0.5% (2018) to 3.5% (2020).
I also successfully completed the product task: client responses suggested that the website had become more aesthetically impressive, while still preserving graphical continuity from the old site.
I also successfully completed the product task: client responses suggested that the website had become more aesthetically impressive, while still preserving graphical continuity from the old site.
