Commercial projects

B2b website redesign

Objectives. Refresh company's image. Make the site reflect the high status of the company. Attract new customers. Help prospective clients learn more about the company.

Solution. Updated the website design. Structured information about the company in such a way that the visitor would immediately find answers to key questions: what the company does, what problems it helps to solve. Conducted initial SEO analysis, found popular search words and phrases. Used them to tell more about the company's services. Made a Russian-language, English-language, Ukrainian-language versions of the site. As a result, the site traffic has increased more than 1.5 times, people spend more time on the website.

Company's B2b website

On the left is the old site design. The style is outdated, the text is difficult to read and understand, the accents are random. On the right is the new site. I updated the design, structured the text, and added accents.

Marketing materials design

Problem. The company's old marketing materials had a number of flaws. The information was presented unsystematically, common phrases did not help to understand the essence of the proposal and make an informed decision about cooperation, the accents were placed randomly, the style of presentations was outdated.

Solution. Updated presentation design. Defined the pupose of the presentation: to help a prospective client learn more about the capabilities and advantages of the company. To make the story about the company's services more visually compelling I used illustrations, transitive headings, factoids.

Omnibus Digdata presentation
Online Panel Digdata presentation

On the left is the old design. The stylistics are outdated, the solid background makes it difficult to read, common phrases do not help to understand the meaning of what is written. On the right is the new design. Illustrations, transitive headings, factoids help to quickly grasp the main point

Design code

Objective. Based on the results of the research, the analyst generates an analytical report for the customer. Often the analyst focuses more on the content of the report and thinks less about the visual component. If the company does not have uniform standards for preparing analytical reports, reports look unpredictable.

Solution. Developed uniform standards for the preparation of analytical reports. Provided instructions on how to design slides, set a modular grid, picked up colors and fonts.

Design code for the preparation of analytical reports of the company

In the Guidelines I explain how to style text, tables, how to use a modular grid and corporate colors

Fragment of a lecture on editorial hygiene. Explain how to get rid of information noise and make slides more expressive

Merch design

Objective. We wanted to prepare something special for the company's employees as a present for the company's birthday.

Solution. We considered different options, including the classic ones: cups, T-shirts with the company logo and symbols. But it seemed that we better come up with something special. I offered to make a unique gift for everyone: I drew vector portraits of employees, ordered a print on a hoodie. What it looked like:

As a present for the company's birthday, I painted vector portraits of company employees

Printed portrait hoodie mockup

Process. Website structure

I sent a brief, asked the client to provide some information about the company. Let me explain in detail what information I collect when I develop website structure.

1. Information about the company:

• — field of expertise, what goods and services the company provides;
• — target audience, the needs of target audience;
• — main competitors;
• — information about sales and discounts;
• — any other information about the company that seems to be relevant and important.

2. Design preferences:

— I ask the client to indicate preferences in the form of general emotional characteristics (the site should be strict, elegant, provocative, graceful, glamorous, etc.).

This information will be useful when choosing a palette of colors and visual material.

3. Technical issues, site functionality:

• — whether the client needs a content management system (Wordpress, Joomla, Modx or similar);
•  — how the visitor contacts the company if he is interested (feedback form, call order, online chat);
• - adaptation for mobile devices.

The functionality affects the price. Each additional function increases workload, implementation takes time and effort.

4. Additional suggests and comments:

— the client himself focuses on what seems essential to him regarding website development.

Process. Prototyping

I have formed the information structure of the site. I took into account the needs of the target audience, the tasks and goals of the project, the wishes of the client. The prototype contains sections:

• – the advantages of living outside the city

I show benefits to grab attention and arouse interest.

• – developed infrastructure of the village
• – communications

I brought the infrastructure and communications sections to the top of the landing page for several reasons. Firstly, the client emphasised that developed infrastructure is one of the significant advantages of the village in comparison with competitors. The second reason is the benefit to the audience. Our audience is married couples with children, business owners, top managers with incomes above average. Those people are used to think a lot, analyze, make decisions, be responsible for others. They cannot be carried away by beautiful pictures and empty promises. They care first of all about the comfort and safety of their own and their loved ones.

• – panorama of the village

I do not use photos of the village on the website. A good angle can greatly embellish a place and create false expectations. I show panorama, hoping it helps visitor to see what the village and surroundings really look like.

• – promotional deals, mortgage loans, discounts

The classic way to increase the interest of a potential buyer and differentiate the company from the competitors.

• -– Information about the company

I provide information about the company in order to increase the level of visitor's trust.

• – how to get to the village

Process. Design

When creating the design I was guided by the general characteristics of the website that the client outlined in the brief: "informative", "forest", "environmentally friendly".

Process. Website structure

I prefer to get involved in a project at initial stage. I want to understand clinet's problems and objectives. Listen to the client carefully, study the context, get to know the audience, look at the competitors. That is, first collect information, and then start development.

But freelance projects are not always like this. Sometimes you join a project when all the analytical work is done. The project is half way to implementation, it remains to guess its trajectory and do what you can to bring maximum benefit. That is just what happened this time. The client provided materials for the project. The structure of the website was already agreed, the texts were grouped by pages and sections. The client's request was "to place the information presented in the file in a coherent, structured way."

Process. Design

Given the request, I worked on the site, to some extent, as an artist. I looked not only from the point of view of logic, but also from the aesthetic one. I carefully selected pictures, experimented with harmonious color combinations, and looked for interesting composition.

Thus, I had a text document at the input, website at the output.

Process. Website structure

We discussed client's technical and design preferences. He provided text about the company, list of preferable sections, text to fill webpages.

Based on our discussion I prepared prototypes. We agreed upon website structure, position of information blocks and elements.

Client emphasised that he needs website not just to share information but also to make image of the company stronger. So I focused on making the website visually attracive and vibrant.

Main page is a show-window. Quick look at the main page gives you understanding what are the company's key fields of expertise. Text is structured in the same way as a content section in a book. It doesn't matter how interested you are, you see the big picture in seconds. You go from one heading to the other, and then dive deeper if you wish.

Page "About the Company" is crucial for new clients. I used text that was provided by the client, but then I refined upon it. Later I'll explain what improvements I made.

The structure and appearance of other pages take over those of the main page. I prefer to use less text and leave space for visual accents.

Process. Design

We discussed the client's preferences. Looked at competitor' websites. Discussed what visual solutions the client liked. Defined his dislikes.

The client's wishes for the design were mostly emotional: simple, laconic, bright. While working on the main page, we tried variations.

The first version was in shades that are classic for a snack theme. At first, the client considered this option, but later moved away from it for several reasons. The assortment of the company is more diverse. In addition, similar color solutions were used by competitors from whom the client wanted to distance himself.

The client suggested trying a design with an emphasis on sweets. We decided that a light theme is better than a dark one. But the client was also hesitant about this option. Still, I wanted the assortment of products to be presented more fully.

The third version was agreed with minor edits:

While working on other pages, I used the same principles — bright visual blocks, structured text, a minimum of information noise.

Process. Page about the company

The page "About the Company" — is the semantic cernel of the website. A visitor interested in further cooperation comes here to find out more.

The client provided a text about the company: "The FoodMarket company has been producing products under the Partytime trademark since 2004. Our goal is to provide the consumer with a quality tasty product. FoodMarket holds a leading position in the sale of popcorn and chips in the Northwestern Federal District. Significant work experience makes cooperation with the FoodMarket company profitable and reliable. We are always ready to cooperate with new clients of the wholesale, network and retail segment. And are ready to offer more than 50 units of products under our brand. For our products, we use only high-quality raw materials that meet all the quality requirements for this type of product"

We agreed that the text was "raw". In order to use it on the website, it still had to be worked on. In the process of editing:

Decide who the audience is. The audience is diverse. An old client, a casual visitor, or a potential supplier can come to visit the website. Not everyone knows what the company does. I propose to write about the company in simple words. So that a newcomer could understand instantly what the company does and in what ways it could be helpful.

Address the visitor in a targeted manner, bind the text to the audience. We address customers and suppliers separately. For different audiences - different advantages and arguments.

Emphasise call for cooperation at the end of the page.

I created the design of the home page and other pages based on the fact that the site appeals more to emotions. For this page, it is different. The focus here is on information. Therefore, I pay special attention to the structure and accurate layout of the text. Headings and subheadings form a hierarchy. Each semantic block is separated by a background. I did everything to make it easy to read and not be distracted by anything.

Process. Layout

I used HTML/CSS, sometimes Javascript. The site dynamically adapts to resolutions in the range of 1920—320 px:

At resolution, where there is not enough space for menu, I implemented a hamburger menu: