Interface unification: experience of e-commerce projects

At the beginning of 2012, the e-commerce line was reorganized in the Mail.Ru Group, and we were faced with the task of updating all services. As part of the update, the interfaces of all projects were brought to a single denominator. In this post I will talk about what unification gives in practice, and by what methods you can minimize costs when working with large-scale projects.

Input data

Mail.Ru Group's e-commerce business includes Goods, Money, Real Estate and Travel. In addition to them, during the year we worked on new products - satellites of basic services. The result was the emergence of new projects Airline tickets, Finance and Repair.

Our main task was to create a basic interface in a short time, which later can and will need to be improved and scaled.



Input data on the resources of the design department were as follows: two people on staff and the ability to attract freelance specialists. In practice, this meant that part of the work will be on external contractors and there will be a lot of communications.

Based on resources and timelines, a strategy for further work was defined - unification of the interfaces of all projects. Since such a large-scale unification in Mail.Ru Group was the first, a clear justification for such a solution was necessary.

Why do we need unification?



Economic benefits during development
Unification of projects allows reducing the time for interface design, design creation and frontend development. But most importantly, a unified platform allows you to quickly and painlessly connect different services among themselves, transfer modules from project to project and create satellite services with less cost. In the end, we get a universal constructor for creating interfaces.



Saving is not only the monetary equivalent of production costs. The most important factor is the time during which it is possible to bring the finished product to the market. Saving time helps not only to reduce actual work, but also to reduce organizational processes within the team and when working with freelance specialists.

Supported economic benefits A
unified interface simplifies versioning support, which facilitates subsequent product evolution. When new functionality appears or existing modules change, changes are implemented on all projects with minimal costs.

The problems of similar projects are also similar. When conducting usability studies, some of the results can be transmitted to other projects. Similarly, successful conversion-boosting solutions can be cross-cutting.

Types of unification

Unification can be divided into two components: functional and visual.

Functional unification implies a reduction to a common denominator of the grid, navigation, logic of construction and operation of search forms and other modules.

For visual unification , various brand elements are used - fonts, colors, rhythm of distances, graphics, etc. The result is a style guide for using the style. In addition, the visual unification includes simple interface elements, such as buttons, drop-down lists, input fields and other controls and their animation. This part is described in the so-called UI kit.



The two components of unification have different purposes and different areas of implementation.

So, the visual component affects the increase of brand awareness, helps to streamline and synchronize the work on the project within a large team. However, visual unification practically does not save time. Creating single guidelines is a long and painstaking job. For example, it is sometimes easier to draw ten unconnected icons than to develop a single visual platform for creating a large set of icons. Thus, a further reduction in communication time is leveled out by the time spent on compiling and maintaining guides.

But visual unification is just the tip of the iceberg. Most of the unification work falls on the functional component.



Functional unification describes the general principles for the creation and operation of various parts of the interface. This type of unification contributes most to saving resources and time. Interface modules always have their own mechanics and many different states; it is their migration from project to project that greatly reduces development time. For example, comment modules or a registration module can be repeated in projects with virtually no changes.

These two types of unification need not be carried out simultaneously. Each of them can be used separately, based on the task.

A good example is white-label projects. The service provider provides a functionally unified product, the interface of which the client can design for his brand or, in other words, visually unify.





Methods

One-time approach to the problem
The first method assumes that at the beginning of the work analytics is carried out for all projects, the functional and business requirements are formed, on the basis of which a single solution for all products is proposed.

Plus of the method:
- availability of a general picture and analytics on projects
Cons:
- creating such a solution may require a lot of time and effort
- high cost of error
This method works best on small projects when the results of analytics do not have time to become outdated during the development of the product, and the price errors are reduced in proportion to the project volume.



"Evolutionary" approach

The essence of the second method is that work begins with one product. Work scenarios and visual stylistics are gradually being worked out, a minimal set of rules and elements is created, which subsequently applies to other projects.

This is similar to how you learn to speak, while the rules and elements can be compared with letters. Composing “letters” and creating “words” from project to project, you can expand the “vocabulary”, and then improve the quality of the “text”.

Advantages of the solution:
- to start "talking", you do not need a complex system, you can do it right here and now
- low cost of error, its correction will not be laborious
- maximum flexibility of the system being created, you can always painlessly adjust the selected course
Minus:
- lack of full analytics
But this drawback is smoothed out by a clearly defined interface development strategy.

This method is suitable for large-scale projects where work is built iteratively. In our case, the evolutionary method was optimal, since it is the fastest and most painless way to launch updated projects in a reasonable amount of time and further improve these projects.

Strategy

We have relied on a minimalistic, lightweight design, where the main thing is a simple and intuitive interface mechanics. A minimalist solution is much more focused on the product sold and, ultimately, on the consumer. For e-commerce projects, the user's focus on the final action is important, expressed in conversion, the number of purchases or other transactions that bring projects revenue.



In addition, this solution is more durable. We started the redesign in early 2012, and the direction we have chosen is still relevant, including after the arrival of Windows 8 UI and the so-called flat-design.



If we talk about the mechanics of the interface, then simple solutions work better, and they are subsequently easier to improve.

By the way, many people make the mistake of believing that creating a minimalistic design takes less time. In reality, there is no difference in the amount of time spent creating a simple or graphics-loaded interface.

Functional Unification

Grid, navigation, search forms, interface modules
Modular grids
We can assume that there is a way to design a single modular grid once. This is well suited for projects with the same information.

However, there are many types of information in e-commerce projects: search forms, product listings, search results, payment forms, text. In this case, it is impossible to define a single grid for all projects, because each type of information requires its own scenario of grid construction and behavior: fixity, full or limited adaptability.

For each project, we determined the behavior of the grid based on the dominant type of information on this project.

For example, in the Goods project, the main type of information is product releases that exist in two states. Depending on the type of product, either photographs or text data dominate. Consider two categories of products: “Clothing” and “Computers”. Appearance in the form of photographs is obviously important for clothes, for computers - technical specifications in the form of text. While pictures can occupy almost the entire screen area without loss of readability, the text has a width limit. In this case, it is better to compromise: use a grid that changes its width to a certain size, thus maintaining a balance between information richness and good readability.



The Travel project has a completely different situation. The project can be divided into two main parts. The first is a system for searching and booking airline tickets, hotels, and tours. This part does not need to be scaled, because text and tables are most conveniently read when they are limited in width. The second part - content, with articles, reviews, photos - on the contrary, needs adaptability. In this case, it was necessary to determine which part of the project is a priority. We singled out booking as a priority, and the service received a fixed grid.



Navigation and search modules

The situation with navigation and search forms is simpler. The logic of the location of search forms and navigation is set once. The migration of these elements according to the project would be ambiguously perceived by users, disorienting them, as a person learns the interface and gets used to the fact that certain common elements are located in one place or on the same logic. Thus, it is much more effective to once train users in common scenarios of working with search and navigation on projects.

An F-shaped zone was used for the arrangement of elements, which, according to the results of usability testing, is best read by users. This arrangement makes search and navigation the highest priority and cross-cutting on all projects.



We created some simple scripts and rules that we used in work on all projects.

Rule 1
Navigation of the first and second levels is located above, under the portal

header. All projects of the Mail.Ru portal have common requirements for the portal portal with the project logo and search. We highlighted the project navigation using the dark dice as much as possible, playing in contrast with the blue portal hat and white background. This decision has taken root, and now it can also be seen outside of e-commerce projects, for example, on the Poster and Sport projects.



Rule 2
Large search forms are located in the left column.


They can be displayed both in short and in full. The vertical arrangement makes it possible to freely change the number of search parameters, leaving it intuitive and end-to-end. This is important, for example, for projects Goods and Real Estate.



Rule 3
Small search forms are arranged horizontally.

Search forms with a limited number of parameters (for example, in Travel and Finance projects) are displayed under the header, on a dark background next to the navigation. This arrangement is also end-to-end and allows you to effectively use the screen area. In addition, a dark background separates the search from the content part, which is important in Travel.



Rule 4
In the presence of a small search form, filtering is located on the right


With this placement, filtering does not draw the user's attention and remains an additional control element for search results.

Once adopted, the rules save time on finding solutions and coordination.

Modules

Inheritance of modules is a striking force in the struggle to save time and resources. The module can be either a simple paginator or a fairly voluminous system for adding comments.

Modules always have strictly defined work scenarios, but can be used outside of a single visual base. If there is a well-thought-out prototype with a scenario, the design of the module can change from project to project. For example, we have created a showcase for the clothing catalog for Lady Mail.Ru based on the Clothing section of Mail.Ru Products.



The more projects, the fuller the base of modules, and the greater the savings in labor costs. Simple modules can be combined into more complex ones; in the end, we get typed pages or page blocks - templates (for example, the “Articles” block or “Creating a new entity”).

Templates are not a finite and strictly defined solution. Depending on the project or task, the templates need refinement, but the amount of effort expended is less than when developing similar blocks from scratch.

The amount of work on the templates may vary. For example, a block of articles needs minimal revision.



The “Create a new entity” block on different projects has a greater range of functionality. This can be a block of pages "Create an advertisement", "Create a new project", etc. In this case, the general scenario is the same, but the steps of the script are different. For example, "Upload photos - Describe photos - Describe a project - Publish a project." As a result, we have a common scenario for the interface to work with implementation options.

Visual unification

Font system, graphics, simple interface elements
Style-forming elements
The font system, color schemes, indentation and distance systems are created during the work on the first project and are further supplemented and improved from project to project. It’s best to describe them on the guideline along with other brand elements. Such a document simplifies the task of a team of designers and layout designers.

In our case, we work with the Arial and Helvetica families, using Georgia for large arrays of text. The main corporate colors, blue and orange, are bright enough and serve to highlight elements. We mainly use white and shades of gray. This solution allows you to neutralize the aggressiveness of blue and orange, making the design fresh and bright.

Interface elements
Buttons, switches, input fields, progress bars form a UI kit - a set of simple interface elements. You must understand that one such set is not enough for the visual unification of the product.



Icons and illustrations
The most powerful tool for visual unification is the unified style of the basic graphic elements, icons and illustrations.



We have created a single visual platform for icons: project icons contain the main colors of the Mail.Ru Group brand on a neutral substrate, against a dark background for best readability. We specifically focused on simple forms that are easily recognizable in any size and look good both on the web and on various mobile devices. The general solution allows you to scale and expand the line. Our one-year-old solution has successfully integrated into current design trends.

Unification Results


Type of projects before redesign
Type of projects after redesign
Mobile projects
What was done
Since March 2012, that is, for 18 months, we have carried out a complete redesign of three web projects - Goods, Travel, Real Estate in the basic version. In the future, according to the results of usability research, we continued the development of these projects and prepared updates. In addition, 3 new web services were created - Air, Repair and Finance. In addition to web projects, we have actively developed the mobile direction: four mobile applications for Money, Goods, Real Estate and Travel were created for two platforms - iOS and Android.

Entertaining arithmetic.
The average duration of creating a web project is 2.5 months.
The maximum number of participants in the design process is 4 people. The
average number of layouts for one project is 60.
The average duration of creating a mobile project is 1 month. The
average number of screens for one application is 22.

conclusions


- Unification is a flexible method of managing design processes and company resources.
- There are several unification methods that are applied depending on the situation and needs.
- With the right methodology, you can unify any products
Thank you very much Polina Vydrich for participating in writing this huge number of letters and working on all the projects described above. And special thanks to Nikita Gutorov for funny penguins!

If you have experience in unifying small or large projects, I invite you to share it in the comments.

Kirill Golyshev,
head of the e-commerce design team