Live Moscow, photo 1
The "Urban Projects" agency

Live Moscow

A site that’s dedicated to infrastructure changes in Moscow. A special “curtain” widget allows the user to see a street, courtyard or any other object before and after the changes. All objects are classified by types and nature of change. It includes a cluster map. Made at the blogger Ilya Varlamov’s initiative.

Idea — Ilya Varlamov

Development, design — Live Typing

Live Moscow, photo 3
Civic Tech Tourism Web Comments Places Maps Clusterization Back End Front End Java Media Process UX/UI

Live Moscow

The project "Live Moscow" was created to display all of the city changes, important for residents and guests.
The task
The task was to create a website that would visually demonstrate the changes introduced to the infrastructure of Moscow.
Past History
The city of Moscow is reshaped all the time: houses are demolished, new ones are built, streets are repaired and reconstructed, and new metro stations are opened. Some of these transformations are obviously appreciated while others seem like changes for the worse, and some things alter in ways not easily evaluated. The "Живая Москва" ("Live Moscow") project is aimed to capture these changes and allow the city's inhabitants to express their opinion of them.
The process
The idea
On the phone, our customer told us the idea for this project, and later that evening we met to discuss the design brief. The main visual idea of the website was decided to be a pair of matching images, combined into a single widget for a "before – after" comparison.
First plan
We discussed the future website's features, main sections and ways to arrange the content, and the first draft of the project looked like this:
  • content: text, links, photos, paired photos;
  • comments, polls, sharing buttons;
  • content preview lists and sorting;
  • content on the city map;
  • offering content to the users;
  • "About" section;
  • news and announcements;
  • the main page.
The primary information unit of the website
It is a content item that would describe the changes made to a building, an entire street or any other object. The content item consists of one or two pairs of photos and other images and a text. We also decided to supplement content items with comment boxes, polls and buttons for sharing their links in social networks.
We were on a tight schedule, so the first version of the website had to be launched as soon as possible, and to create a whole website that would put this plan into practice we picked the minimal set of features from the initial list to be implemented first: content items, consisting of paired photos and text, the content preview list with different sorting and filtering modes, and the main page.
The customer insisted that it was essential to involve the website's visitors in filling it with content from the onset, which is why at the first stage we implemented a webpage using which any user could send us images and their descriptions.

  • content;
  • content preview list;
  • collecting user-provided content;
  • the main page.
Everything else was, for the time being, put off until the second stage.
The first stage
Usually we start working on a website by creating a prototype that lets our customer choose different webpage layout versions, move around, add and remove various interface items and so on. After we come up with a prototype that seems perfect, we begin the development process. When designing every edition of the prototype, we ask ourselves how the website visitor will perceive this and whether they will find it comprehensible and easy to use.
The object page
A screenshot of the first webpage prototype is provided below. The info concerning the object (the year the photo was taken, object category, area and date of publishing) was placed horizontally under the header.
This info was later extended and put together in a vertical box on the side.
The final version of the page looked like this:

The announcement page
At the first stage we decided to display content previews as lists with sorting by date of publishing (with the most recent ones at the top) or by date of reconstruction (placing the most recently reconstructed objects at the top), and also implemented filters by type of change and geographical location (regions and districts).

Here is the second prototype of the preview page, where we tried to implement reconstruction periods as a timeline with two side limiters.

Some experimenting with the timeline's appearance:

But the final version of the page looked like the image below, where the preview box itself was also significantly altered.

The registration
As registration is annoying on most websites, we decided to make it inconspicuous, meaning that any new user who wants to upload photographs enters their user data not to register, but to provide contacts for feedback to the website's editor. Using this data, the website remembers the user and recognizes them automatically in the future.
The object page
When designing any page, it is vital to understand the reasons why and in what context different users might visit it, even more so when it's the main page of the website. For our purpose, we divided the user base into three groups: newcomers, occasional users and regular users.
As a result, the main page had to fulfill three functions at once:

  • show newcomers where they are and what they can do here;
  • show occasional users the most interesting content and features;
  • show regular users the most important and consistently used features.
For the first stage, we decided that the main page should display:

— a slider with the most popular content items;
— illustrated links to the "About" page and the photo upload form;
— previews of the two most recent content items.

The title's lettering
Several interim versions of the title's lettering were suggested, with the first six versions looking like this:

The customer picked a version from each page, leaving the last word to the designer, so the final version was:

The project`s name
On August 21 the name "Живая Москва" (literally: "Live Moscow") was approved.

The designer felt like playing around with the 70's motif using this font:

While everyone liked the little star at first, we later decided that it should go. The font was preserved, the color was softened a little and the final variant was:

The "меняется на ваших глазах" ("Changes in front of your eyes") catchphrase was introduced at the second stage.

As the editorial staff filled the website with content, they realized that some of the photographs the users had sent could make for valuable content, but their quality was too low. They asked us how we could use these photos, and we decided to make two types of paired images – a larger and a smaller type. After assessing an image's quality, the website's editor could choose a suitable widget size. This solution also added some diversity to the content page.
On August 31 everything was ready for release. 33 content items were published on the website by this date. We checked everything once again and uploaded the website's code from the test server to the one in the field and made it available to all online users.
The second stage
The map
While we were working on the first stage, the draft of the second stage grew larger with details, with the map as its most important novelty. Here is the first concept image of the map:

One content item on the website could describe a rather extensive object – an entire street or a park, which is why we decided to mark the location of specific objects shown on paired photos instead. For this, we linked each pair to a set of geographic coordinates using the admin panel.
All the paired photos on the map that are located close to each other are grouped into a cluster. The first version of the cluster's icon looked like a droplet icon, and the latest version – like a photo camera.

One content item can include several paired photos. To distinguish them on the map, we used color marking: hovering over one of the miniatures highlights all the paired photos of the same content item in red.

Sometimes, when publishing a new content item, we couldn't find a suitable category for it and had to create a new one. Finally, the categories became so numerous that we had to separate them into two groups ("Object type" and "Category of change") and implement tools for managing the list of categories in the admin panel. The same filtering system we used for the content items was added to the map.

Page content
We extended the caption below the photos by adding the date when the photo was taken and a link to the author's personal page, where all the paired photos that include this author's images are displayed.

The widget

When designing the "before – after" widget we had to keep in mind that mobile device users might have a hard time hitting the slider with their finger, which is why we made the entire image clickable.
The main page
The main page was also altered: the slider with the hottest content items was removed and replaced with the new interface item – the reconstruction map.
A news page
For a while, the website had a "News" page, but as there weren't any announcements except for the new content published on the website, we decided to drop it.
The comments
The comment section for the content items was made using the Hypercomments plugin, which supports authorization through VKontakte, an essential feature because VK is the most popular Russian social network. In extreme cases like troll raids in the comments, the admin can temporarily turn off the comment section both for a specific post and the entire website.
The third stage
The most important addition at this stage was the poll feature, using which the website users could now rate the changes and decide whether they had a positive or a negative impact on the city's image.
There had been several in-between versions of the poll system's design. Also we thoroughly looked through the best mouseover color labeling choices for the poll fields:

Later we noticed that the users compared the number of "better" and "worse" votes and thought it would be more convenient to display this as a percentage. The final version of the poll system looked like this:

No registration or SMS
The website visitors can vote from the main page without reading the entire content item, and on the content item page itself the poll system is located at the bottom.
o reduce hassle and allow the maximum amount of users to participate, voting on the website does not require authorization. Poll systems without authorization are vulnerable to vote stuffing, so we implemented a system to prevent this.
Sharing paired photo widgets
Paired photos uploaded to the site have a fixed width, which made it inconvenient to view them from mobile devices. As a result, we had to modify the paired photo's code to make the widget adjust for the browser's width.
After testing this feature in Ilya Varlamov's blog, we enabled it for all users, and now everyone can place a paired photo widget on their website or blog.
Performance issues
After we implemented the website widget placement feature, the monthly viewership of the project increased five times. Every time Varlamov published the website's reviews in his blog, the website experienced an overload and performance dropped. An emergency optimization was performed to solve this issue.
At a certain point, overload caused our scripting server to go down. We turned on caching for the webpages that weren't updated often – insertable widgets, content item pages and the main page. The webpages are now cached by the nginx web server at a constant time interval. We also moved the website to a more powerful dedicated server.
Boris Tolstukha
server developer
Main page reorganization
The users' votes allowed to separate city changes into the best and worst rated, leading to the creation of four categories: "New", "Best", "Worst" and "Random". Only the content items that have a hundred or more votes are included in the "Best" and "Worst" categories.
We immediately felt like putting these content items on top of the page for everyone to see, so we created an element that included the entire set of tools necessary to work with the website: a classifier with four categories, paired photos, the poll system and the slider.
The resulting element meets the needs of every website user. Newcomers get a feel of what they are supposed to do on the website, occasional users can check out the best, worst and random content items, and the regulars learn about the latest updates. As a result, we decided to put this element on top of the main page, above the map. The "Best content items of week" were placed under the map.
At this stage the active development of the website is over. Its further development and support is done by the customer's experts.
july 2015 — march 2016

Work on the website
272 638

people have visited the website in March

content items have been uploaded to the website

authors published their materials

times visitors rated the content In the period from March 21 to April 24

the average weekly amount of votes made since polls were introduced
The team
Account manager
Alexander Kuznetsov

Project manager
Yuri Kuzmenko
Elena Gatzina
Eva Rupenko
Back end
Boris Tolstuha
Victor Mihal
Front end
Pavel Baibara
Michael Danilov
Svetlana Krovosheeva