The making of TPS Real Estate shopping center websites
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](tps-trc-process2-00.jpg)
The result is a solid approach that can be used to create a banner construction system.
![tps trc process2 0_1](tps-trc-process2-0_1.jpg)
The client approves the idea. Working on banner styles. Deciding to use outline icons of various colors.
![tps trc process2 01](tps-trc-process2-01.gif)
Drawing the pictograms and creating rules for their placement.
![tps trc process2 02](tps-trc-process2-02.jpg)
The client asks to make the page more bright and diverse. Adding more colors and developing new banner types.
![tps trc process2 03](tps-trc-process2-03.jpg)
Searching for best color combinations for each shopping center.
![tps trc process2 04](tps-trc-process2-04.jpg)
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](tps-trc-process2-05.jpg)
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](tps-trc-process2-06.jpg)
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](tpsre-trc-process-code-01.jpg)
Adding new sample texts and store names, running the training again.
![tpsre trc process code 02](tpsre-trc-process-code-02.jpg)
Testing the neural network on an example. Checking the correctness of the source code.
![tpsre trc process code 03](tpsre-trc-process-code-03.jpg)
The client doesn’t like the style. Continuing the search, making another approach.
![tps trc process2 08](tps-trc-process2-08.jpg)
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](tps-trc-process2-09.jpg)
The art director approves. Finalizing the set and showing to the client.
![tps trc process2 10](tps-trc-process2-10.jpg)
The client doesn’t like the family style of the graphics and asks to add more fashion.
![tps trc process2 11](tps-trc-process2-11.jpg)
![tps trc process2 12](tps-trc-process2-12.jpg)
A secret advisor appears and suggests to make another approach using heterogenous backgrounds and more complex graphic elements.
![tps trc process2 13](tps-trc-process2-13.jpg)
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-14.jpg)
![tps trc process2 15](tps-trc-process2-15.jpg)
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](tps-trc-process2-16.jpg)
Hastily training the admins and announcing the project.