Digiteum Talks: Challenges and Opportunities in Photo and Image Software Development
Modern photo editors are intuitive and easy to use. It often fools people into thinking that they are dealing with rather uncomplicated systems — responsive resize, one-click crop and myriad editing tools are often taken for granted. In reality, however, top-of-the-class software that works with photo and image content is a unique blend of high-end technologies, clever engineering and thoughtful design.
We know that for a fact. Digiteum teams have solid expertise in this niche and know it inside out. Our dedicated teams have been working with Printique, one of the leading photo printing labs in the U.S., for over a decade now. In 2020, we also started building a large web product for an established printing technology provider from Canada.
We talked to our CTO, Viktor Lazarevich, and leading PMs, Tatsiana Saplitsa and Maxim Ilyin, about the challenges of building and supporting software products in this niche. We also discovered several unexpected opportunities rare expertise and skills bring to tech specialists and business.
Tell us about the tech stack you work with on web projects
Viktor: Printique project has an entire zoo of technologies involved. In general terms, we have a .NET backend and use BackboneJS for frontend development. These technologies are used to build the most complex parts of the web system such as photo editors and photobook builders. We use React and WordPress for marketing pages, e.g. landing pages.
Maxim: And a whole bunch of tools and libraries for image processing features.
Viktor: We also integrated Google Vision services. Earlier, as a part of an R&D project, we used Google Vision to add image recognition capabilities to the system and be able to segment users based on content. Today, we use Google Vision for intelligent crop — the system analyzes pictures and suggests optimal crop variants. It is an affordable and very useful service that makes a big difference in the order process.
We implement and support multiple integrations with different third-party services for shipping, lab operations, printing itself, and use a special set of tools for performance monitoring. We started with Elasticsearch and then moved to New Relic for performance data analytics and visualization.
Tatsiana: Canadian client is a mature printing technology provider with 20-year-old history in this market. When they first came to us, they already had a working system and wanted to redesign it and build a new functional frontend.
At the moment, we work with a React-based frontend that communicates with the client’s backend using custom API. When we were choosing the tech stack, React was the optimal choice based on project requirements and goals.
Technologies evolve very fast. Our goal is to always keep it up-to-date and make sure we live up to the standards.
Viktor: It’s the same story with the backend. When we started developing Printique’s web system more than a decade ago, we were working with the latest .NET version at that time and since then have been keeping up with the newest versions. Right now we are migrating to .NET Core.
Tatsiana: We chose microservice architecture for the same reason. This is a modern approach that allows us to develop and support applications efficiently.
Complex frontend are not mere words on these projects. Could you tell us about the challenges you have to deal with?
Viktor: First of all, it’s really hard to find frontend engineers who could cope with the complexity of such projects. One needs to have strong math skills and understand coordinates, transformation, resize, alignment, collision and many other things. We have an expert who also happens to be a mathematics and computer science teacher. He worked out the math for the project and helped the rest of the team understand and use it. Later, he also helped to prep the team on the other project.
Tatsiana: Complex applications like these have an entirely different understanding of frontend architecture. As a rule, frontend is associated with relatively simple logic. There are not so many dependencies between elements. Engineers need to connect the frontend with backend and make sure everything looks and works the way it’s supposed to. They don’t have to put too much work into page performance, for example.
Web applications that work with media content are different. On top of all the math, you also need to elaborate the architecture that won’t create unnecessary dependencies and make sure a single change won’t cause the whole page to collapse. Usually, frontend developers are used to far simpler architecture and don’t have to deal with such problems.
Viktor: This is a fundamental difference between a web application and a web page. Users open a web page once, and it just works. Photo editors like the ones we are building are complex applications that users work with for hours. We need to make sure our application won’t drain battery or waste memory. It should always be responsive and immediately react to any user command.
It’s extremely hard to find someone who would both have the skill and also very specific experience to work on such systems.
Were there other tech challenges on these projects?
Viktor: We had to deal with an interesting challenge to make font rendering consistent. Essentially, what users see in their browsers and on printed products must be exactly the same, text is not an exception. It should be pixel-perfect, and we won’t get away with it if it’s not.
At the same time, there’s a historical reason why fronts are rendered differently on different operational systems. Apple and Microsoft have two conceptually distinct approaches to font rendering. The two moguls had a legal fight about it, and eventually, agreed to disagree, creating trouble for the whole generation of engineers who had to deal with it.
Today, we are using libraries that help us solve this problem and render fronts consistently on the backend and frontend.
Tatsiana: This knowledge, among other things, gave us an upper hand on the project for a Canadian client. We already knew how to solve this and many other challenges and thus saved the client a ton of money and time. We could translate our experience and suggest optimal technical solutions without going through lengthy trial and error.
Here’s another example. As Viktor has mentioned, a photo editor can be open for hours and must be able to respond immediately to any user command. There are many ways how you can render spread and elements on canvas, but only one approach gives us the speed and responsiveness we need. When we started working on the new project, we already had a proven solution on the table and knew exactly what engineers should do to reach our performance goals.
Printique team develops and supports software for creating a physical product — photos, books, prints, etc. Maxim, how do you bridge the gap between the development team and the lab given that we work 100% remotely?
Maxim: To be honest, we frequently find ourselves in a situation when we would need to physically be in the lab, especially, when we deal with product measurements. For instance, when the lab switches to new paper with different quality and size, we also have to adjust. It takes time to measure, make changes on our side, then test it only to find out that we didn’t get the right measurements in the first place. And then we have to go all over again.
Viktor: People who work at the lab have a different product vision and, since they don’t know how the data is stored on our end, it sometimes leads to misunderstanding and creates a gap. The thing is, we work with different contexts -- we think of objects in a way they are laid down in our databases, while they see objects as physical products.
Tatsiana: I remember how we used to solve this problem at the very beginning. We had a set of special test books and other printed products with grids and measurements. We asked the lab to print many different versions, one for each size, and used them as sizing tables. In addition, the lab recorded short videos to show us how certain processes worked.
This is a highly competitive market, you work with sky-high expectations. How to stay on top in this niche?
Viktor: First of all, you need to keep it technically excellent. Consumers will not tolerate poor experience and won’t use slow or buggy software.
Secondly, the production process should be solid. Everything must work fast, including orders, delivery and customer service.
And finally, you need to score in innovation. Unique features, services or products can become a competitive advantage that will help a brand stay on top and make sure consumers won’t go somewhere else.
Maxim: It’s essential to always know what your competitors are doing. We monitor all major players in the market, test their ordering experience and see if there’s something we could do better.
Viktor: That’s right, we regularly review what other companies do in the niche, and so does the client’s marketing team. We follow their messages, strategy, focus, etc.
When we need to introduce a new feature, for example, the first thing we do is check how others implemented it. The goal is never to copy but to understand what the baseline is.
Maxim: On our side, we regularly monitor user sessions to track how users experience our applications and check if there are any rage clicks or other problems that require our attention.
Tatsiana: I would like to add that the efficiency of customer support is also important. Things can go wrong, and if they do, the response from customer support will have a major impact on how people will treat the brand. Perception is built on customer experience when everything goes well and also on how the company responds if something goes wrong.
This is why on the Printique project, for example, we have an emergency service. If there’s a technical issue, for example, a user can’t open a photobook, we get involved and make sure this problem is solved as fast as possible.
If you want to be a part of our stellar teams and use your skills and ingenuity to solve these and many other challenges, go ahead and contact our Talent Manager at [email protected] to learn about open positions on these projects.
