Online photo collage maker

In May 2014 a client turned to us with a request to estimate the complexity and the cost of an application that generates a mosaic from the user's photos. In November the order was canceled, but we liked the idea so much that we decided to research the most popular mosaic generation services. The research has shown that all of these websites have issues with either UX, technologies used or both:

  • Photo upload takes too much time. With 200 images upload could take over 15 minutes, which makes you abandon that idea after all.
  • ⅔ services use flash which does not work on mobile devices and tablets.
  • Mosaic generation takes 10-25 minutes. Imagine that you don’t like the result and you want to generate mosaic again you will have to wait for 10-15 minutes for results.

After analyzing the pros and cons, we allocated a budget and a staff for this project and the work began. We developed prototypes and invested some time in developing design. As a result, we decided to build main page that users can immediately start creating mosaic.

Mosaic creation consists of 3 steps. At first you select the main image, size and type of mosaic. At the second step, you upload photos. The third step is viewing and sharing results. You can download the result image or buy a high resolution one to print.

At the beginning of 2015, we launched the project. It received very positive reviews and scored quickly attendance. People liked convenient design and nice UX there.

We managed to solve the following tasks:

  • Increased the speed of photo upload. Uploading of 200 photos takes only 1-2 minutes. Photos are compressed using javascript in the client’s browser to the size needed to create a mosaic and then send to the server. All photos from social networks can be imported and the right size will be stored.
  • Added integration with the 7 most popular social network and allowed users to select images from the preferred social networks.
  • Made application supported on all modern devices. Laravel and Angular.js were the main technologies that were used.
  • Decreased mosaic generation time from 10 to 30 seconds depending on the chosen size (from 2,000 to 21,600 pieces). It is very fast!
  • Reduced the cost of the service by reducing the load on the server.

In May 2015 the project was sold and the copyright was transferred to the new owner. We reserved the development rights and now we keep maintaining this website.

A structured presentation of the layouts

We have been at the market since 2005 and we always try to simplify and speed up our daily operations. One of the major problems that we faced every day is the presentation of project structure and mockups.

"I smile when I think back on the days when I had to go to the client personally to present the mockups. I had to show him in person to be sure that mockups are correctly displayed and understood.

During the presentation it was important to follow the correct order and it was very inconvenient to switch from one mockup to another. There were some other issues, for example, it was not easy to store all the comments and suggestions regarding the mockups. This was already difficult enough, not to mention travel time, waiting time and traffic jams"

Ihor Abuzov
CEO and founder of the company

In early 2014 we decided to create a convenient online tool for organizing project presentations to the client. We had to solve a number of issues for this:

  • Simple, high quality mockups that are available for download without quality loss
  • Change of the project structure should be easy
  • Have sharable specific links to specific mockups
  • Have simple, supportable interface by tablets and mobile devices
  • We should be able to get quick access to the mockup without referencing it by the file name.

The company allocated a budget and a staff to work on this project. We started looking for turnkey solutions but the existing ones did not meet our requirements. So we decided to establish the SaaS service for ourselves and to help other designers and web studios.

As a result, in early March 2014, the first version of the project was launched. Until September 2014, we were working on various updates for this service. We managed not only to achieve the goals set, but also to exceed our own expectations. Service consists of 3 parts: a selling website, tools for designer and tools for presentation. The principle of operation is as follows:

  • 1. Designer creates a project and uploads the mockups.
  • 2. Then he arranges all mockups according to the project structure. He can come up with names for each of the mockups and for the folder, as well as write a comment if necessary.
  • 3. Then the designer can get a short link to the project or to a specific mockup and send it to the client. The client receives a link that he/she can open and can quickly see the created mockups.

Problems solved:

  • SaaS service development for structured on-line presentation of mockups to the client
  • Simple and fast upload of mockups for designers, ability to create quickly a project structure and organize the mockups
  • Always correct order of mockups. The customer receives a permanent link to the project and is always up-to-date with all of the changes happening there.
  • The client can conveniently view mockups on mobile devices, tablets and desktop PCs. It is also possible to switch between the sizes in the desktop version.
  • Navigation using number of mockup. Each mockup gets an assigned number [folder number][mockup number] (eg 0314). This helps to understand quickly what kind of mockup we are discussing. When you know a project name and a mockup number you can quickly access the correct mockup by typing in the url.

The project was picked up very quickly by our customers. After that we decided to launch an advertising campaign to promote the service. Unfortunately, our budget was not enough and we stopped the promotion of this resource.

Adaptive technology

When monitors with cathode-ray tube started disappearing, new monitors with a variety of sizes and resolutions started appearing at the market. Later it became necessary that the websites would be beautifully displayed on the most popular resolutions and would be adapted to them. At the end of 2010 we started working on the solution of this problem.

We experimented a lot and concluded that a decrease or an increase of the font didn’t give the desired effect. It is necessary to change the size of all the blocks, icons, images, fonts, and even background images. We have examined all the popular resolutions at that moment and their usage statistics. We divided them into 4 groups and for each group determined the size of the workspace, padding, and the recommended sizes.

One of our regular customers agreed to try to build his website using our new technology and we began the development. For the first time we drew layouts for more than one screen size. For us and for the customer it was important to understand what the website should look like on all the resolutions. Also we had to provide a high-quality mapping for the website where one size flowed into another. We made it a rule that all 4 sizes for the user website should look the same, but it shouldn’t be just a proportional shrinking of the entire layout. We conducted some additional tests and found out that on bigger screens it was more important to increase the font size rather than the size of the images. As for tablets it was interesting to see that the font size had to remain large to make reading easier. But the size of the images could be reduced significantly.

The next step we needed to automate the process. We took main.css as a foundation. We decided to add comments to the styles that should change depending on the screen size. The comment included changes to style properties for each size. Then, during deployment a small php script forms a file for each size and stores it in the data folder. This way each project contains 4 sets of styles and images. Pictures have to be created manually because each size requires pictures of different proportions. This does not apply to the background images, but we also store them in 4 sizes for faster downloads on small screens and better quality on the large ones.

After the successful launch of the first website that used 4size technology we have applied for copyright registration and after 6 months we obtained a copyright for this technology. At this moment we have developed more than 25 sites using 4size. These were mostly the websites for public companies, for which it was important to showcase.