The making of TPS Real Estate shopping center websites

OverviewProcess I• Process II

As we work with information added by tenants, we are struck by the problem of strong visual noise. Ads are uploaded with no graphic moderation or any concern for the overall style of the website. Each banner is designed to stand out and draw the most attention. Text inside banners often repeats existing descriptions. All of this creates an uncontrollable chaos that overpowers the design of the website. We get an idea to develop a system that would prevent tenants from ruining the appearance of the main page and the news section.

We start by classifying all uploaded banners and studying the existing websites.

tps trc process2 00

The result is a solid approach that can be used to create a banner construction system.

tps trc process2 0_1

The client approves the idea. Working on banner styles. Deciding to use outline icons of various colors.

tps trc process2 01

Drawing the pictograms and creating rules for their placement.

tps trc process2 02

The client asks to make the page more bright and diverse. Adding more colors and developing new banner types.

tps trc process2 03

Searching for best color combinations for each shopping center.

tps trc process2 04

While the search for the style is under way, we implement the system using standard tools provided by 1C Bitrix. To make sure we don’t repeat the presentation logic, the system asynchronously queries the server for all possible banner types and their settings. All that’s left for the content manager is to choose the best one.

tps trc process2 05

Moving on to the icon placement randomizer. Simple random placement won’t do as it will result in banners with overlapping icons, while the scale of the pictograms won’t allow to create nice combinations. To solve this problem we create several banner placement templates.

tps trc process2 06

As we work on banner design, we realize it’s not always convenient to search the system for icons and chose the best one for each banner.

To solve this problem, we include a neural network to help the content manager. Using a set of existing news items to train the network. However, two hundred pieces of text turn out to not be enough for proper training. Adding texts and names of real and potential stores that are mentioned on the website; the neural network will take them into account when making a decision.

tpsre trc process code 01

Adding new sample texts and store names, running the training again.

tpsre trc process code 02

Testing the neural network on an example. Checking the correctness of the source code.

tpsre trc process code 03

The client doesn’t like the style. Continuing the search, making another approach.

tps trc process2 08

The art director asks not to mess with the banner shapes and concentrate solely on graphics. Making another attempt. Trying different variants of icon combinations and testing everything on the website.

tps trc process2 09

The art director approves. Finalizing the set and showing to the client.

tps trc process2 10

The client doesn’t like the family style of the graphics and asks to add more fashion.

tps trc process2 11
tps trc process2 12

A secret advisor appears and suggests to make another approach using heterogenous backgrounds and more complex graphic elements.

tps trc process2 13

The client approves the concept. Drawing a set of icons, choosing colors, preparing backgrounds and hover effects for all types of banners.

tps trc process2 14
tps trc process2 15

Testing the banner construction system.

After the client’s website administrators are allowed access to the new website, we discover banners that go against the rules right on the main page. The project team panics, as seemingly everything had been taking into account. Deciding to urgently fix the situation.

tps trc process2 16

Hastily training the admins and announcing the project.