Own development

Online photo collage maker

In May of 2014, what would be our second startup came to us, with a request to estimate the complexity and the cost of an application that generates a mosaic from 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. 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, the upload could take over 15 minutes, which makes you abandon that idea altogether.
  • ⅔ of services use flash which does not work on mobile devices and tablets.
  • Mosaic generation takes 10-15 minutes. Imagine you don’t like the results and you want to generate the mosaic again. You’d have to wait through another tedious 10-15 minutes for results.

After analyzing the pros and cons, we allocated a budget and a staff for taking on this project as our own startup and the work began. We developed wireframes and invested a lot of time in developing the design. As a result, we came to the conclusion that the best course of action, with UX in mind, was to build the main page that users can immediately start creating mosaics.

Mosaic creation consists of 3 steps:

  • Select the main image, size and type of mosaic.
  • Upload photos.
  • View and share the results.

You can download the preview image, share it with friends in social media networks or buy a high resolution version to print.

At the beginning of 2015, we launched the project. It received solidly positive reviews and scored quickly attendance. People liked the convenient design and nicely featured UX.

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 directly to the server and the right size will be stored and in less time.
  • Added integration with the 7 most popular social network and allowed users to select images from their preferred social networks.
  • Web-app supported on all modern devices. Laravel and Angular.js were the main technologies used.
  • Decreased mosaic generation time from 10 to 30 seconds depending on the chosen size (from 2,000 to 21,600 pieces). It’s very fast!
  • Reduced the cost of the service by reducing the load on the server.

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

A structured presentation of the mockups

We’ve been in 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 a client personally to present mockups. I had to show him in person to be sure that the mockups are correctly displayed and understood.

During the presentation it was so important to follow the correct order and it was pretty 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 mockups. This was already difficult enough, not to mention travel time, wait times and traffic jams"

Ihor Abyzov
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 shareable short links to specific mockups
  • Have simple, supportable interface on tablets and mobile devices
  • We should be able to get quick access to the mockup without referencing it by file name.

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

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

  • 1. The designer creates a project and uploads the mockups.
  • 2. Then he arranges all the 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.
  • The client can conveniently view mockups on mobile devices, tablets and desktop PCs. It’s also possible to switch between sizes in the desktop version.
  • Navigation using a number of mockups. Each mockup gets an assigned number [folder number][mockup number] (eg 0314). This helps to quickly understand what kind of mockup we’re 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 resources.

Adaptive technology

When monitors with cathode-ray tubes 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 for this problem.

We experimented a lot and concluded that a decrease or an increase of the font didn’t give the desired effect. It was necessary to change the size of all the blocks, icons, images, fonts, and even background images. We 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 recommended sizes.

One of our regular customers agreed to try to build his website using our new technology and we began 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 possible 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. The size of the images could be reduced significantly.

The next step we needed to automate the process. We took main.css as the 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 the deployment a small php script forms a file for each size and stores it in the data folder. In 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 applied for copyright registration and after 6 months we obtained a copyright for this technology. At this moment we’ve developed more than 25 sites using the 4size. These were mostly the websites for public companies, for which it was important to have a high resolution showcase.