OneClickLayout

OneClickLayout is a business-to-business photo layout application that helps generate high quality photo books for businesses to offer to their clients. With a high degree of customisability and branding options, no two photo books will look the same, while still offering a consistent branding and style that matches the business.

Expertise

Design, Engineering, Product Strategy

Platforms

iOS, Android, web, MacOS, Windows

Deliverables

Prototype, MVP, V1.0, Post-launch dev

Want to use?

Contact our team if you’d like to receive information about this product.

Set it up once... Then just print & repeat.

Everyone and their mother can design photo books these days, and there’s many different software solutions out there that can help you do that. But that becomes hard when it’s not just your own family vacation album, but all of your clients’ vacation albums as well, and more! The challenge OneClickLayout is trying to solve is when you’re a content-heavy online platform, you have many clients, many photos, and too few interns to drag photos into layout programs all day. Yet you still want to provide high quality photo albums to your users. OneClickLayout facilitates this process by giving businesses a host of branding, layout and design options to create photo book templates that match its vision and design for their clients.

Challenge

One of the hardest problems to tackle with OneClickLayout was finding a balance between offering full hand-tailored customisation and a standard template that looks the same for everyone.

Approach

We took a data-driven thinking approach to solving this challenge. We thought of a photo book in the same way as an urban planner thinks about cities. Slicing up each page to give as much possible space and flexibility - all while not knowing what the contents will be and maintaining a common aesthetic. We learned a lot from the conversations with our clients. They had strongly defined ideas on how they wanted their photo books to look. With this list of requirements and examples, we were able to design a system that allows for customisation.

We’ve built an API in Node.js that businesses can interact with and integrate with their tech stack, to allow automated generation of photo books based on their custom template. We’ve also developed a dashboard in React where businesses can login and manage their templates and layouts, see orders that have been made and manage their company information.

Cutting edge web technology is what made this level of customisation possible, heavily utilising the modern CSS grid property for pixel perfect layout, Microsofts Typescript for catching bugs before they appear, Google’s Puppeteer for browser automation and extensive code testing to enable seamless continuous integration and deployment.

Insight

Clients were more than happy to share their thoughts and contribute to the conversation on what this product was going to look like. What we learned was that engaging with clients early in the development process makes collaboration much easier and creates better outcomes for all parties.

Impact

We hope that by automating the tedious process of creating photo book layouts we can enable businesses to offer their clients an unforgettable experience by offering them beautiful printed photo books that captured the feeling of their first backpacking trip through Asia, their bohemian wedding, an exciting family trip in the mountains or whatever matters most to them.

OneClickLayout's technology specifications

OneClickLayout was built with common web technologies such as Node.js, Typescript & React. All code was written with maintainability in mind and we’ve used a library called Apidoc to automate documentation generation.

Ottavia Vignani

Full-Stack Developer and Project Lead

Project Lead commentary

Leading the Oneclicklayout team is an energising challenge, because it gives me the opportunity to experience both worlds: the business and the engineering one. Being there from the very beginning when this project was just an idea and helping to shape it into what it is today is something I am really proud of. Through the platform we built with React and Typescript (the magic duo), businesses can  select or design their own customised template, and then, connecting to our api, they can allow their users to create beautifully designed photo books, and have it sent to their door.

Jelle Bot

Head of Design

Design Commentary

Creating a full photo album with just one click, this was the challenge for our design team. We've solved this by allowing the platforms who use OneClickLayout to fully customise the look and feel of their photo books upfront. When everything is setup their users only need click the create button and the photo album is ready to print.

Patrick Huijten

Full-Stack Developer

Engineering commentary

Building OneClickLayout was a lot of fun since we were building a product from the ground up. We setup a little time at the beginning to define how we wanted to work together and what our standards are, and then used tools to enforce them to avoid code becoming a swamp. It always feels like a delight coming back to this codebase to solve a bug. It was also interesting to use web styling technologies for printing, meaning having to think of margins, paper sizes, DPI, PDF settings, etc.

Other case studies

Do you think we can help you?