Koto is an optimistic group of designers, strategists and writers that works at the intersection of brand and digital from studios in Berlin, London, Los Angeles and New York. We’ve been working with them since 2015; not only on their own sites, but also forming a strong partnership from which to collaborate with an array of clients. We helped Koto celebrate the next chapter of their global journey with a dynamic new website.
Seamlessly bringing case studies to life whilst empowering users through a rich bidirectional navigation system.
Building upon V1 by introducing more flexibility to navigate around the site and showcase case studies in fresh ways.
The latest and greatest: combining the learnings from user feedback and engagement gathered over the years to deliver a state-of-the-art experience that showcases Koto's work for clients in the best way possible.
Over the years, together we’ve developed a deep knowledge around how the Koto site is used internally — and to speak to a broad audience including current and potential clients, industry peers and new talent. We’ve used this knowledge to push the site further in its latest iteration — as a showcase and a new business tool. The site merges Koto’s rigor and charisma in the design and branding worlds, with ON’s deep understanding of modern web capabilities. Making use of cutting-edge technologies, the new website allows Koto to present their work in the most flexible and engaging way possible.
We worked closely with the design teams at Koto to rapidly prototype and create builds that could test layouts using real content, enabling a better understanding of design needs by seeing elements in situ. In addition, the site has been developed with a powerful modular architecture using the latest modern technologies. Combined with how the site is delivered, this means a blazingly fast experience.
We devised a bespoke approach for Koto to showcase and continually evolve their portfolio, marrying expert functionality and flexibility with high-performing imagery and design savvy.
Many traditional sites take the approach of using dynamic systems to serve pages. A more modern approach is to decouple the server and the front-end. This means that we are able to leverage the best of both worlds and deliver an unmatched user experience compared to more traditional means. This decoupling allows for highly scalable architecture that can be evolved more easily — enabling Koto and ON to work on the front-end separately from the backend, or to completely replace the CMS without any impact to the front-end.
The Koto website is a portfolio of their projects, which involves a whole lot of images and videos. Optimization is particularly important for such a media-heavy website. The first line of optimization is the use of image sizes, which means the website duplicates and scales each image into different dimensions, and only serves the image with the dimension closest to the user's screen but larger than it. This is handled by Cloudinary, a content delivery network (CDN) specialized for images, with many servers across the globe to serve an image to the user based on the user’s geo-location.
Not only are the images fast to load but they are also beautiful — covering a wide gamut of colours. It’s not currently possible to use P3 in many web browsers. Therefore, we developed a custom solution to defeat the limitations of browser display quality and make effortless use of P3, allowing images to really sing.
Not only are the images fast to load but they are also beautiful – covering a wide gamut of colours. It’s not currently possible to use P3 in many web browsers. Therefore, we developed a custom solution to defeat the limitations of browser display quality and make effortless use of P3, allowing images to really sing.
All the content on the website consists of modules, which can be reused on any page of the website. This flexible approach gives the maximum editorial freedom to Koto, and also adapts very well to Koto’s fast-moving culture.
Each of the content modules consists of numerous content and configuration fields, for entering text content as well as media content, and to configure how elements appear.
Founder & Creative Director of