Trello + Unsplash

The Trello and Unsplash integration creates a wonderful experience that allows users to seamlessly add beautiful images to their Trello boards. Unsplash is a website that hosts thousands of stunning photos royalty-free that are gifted by a generous community of photographers. The team at Trello was lucky to have early access to the Unsplash API which we used to integrate the vast library of pictures into a delightful feature in Trello. Wired magazine wrote an article in which the Trello Unsplash integration is mentioned: https://www.wired.com/2017/05/unsplash-api/. We wanted to achieve an experience to make it easy to find that perfect photo, so to ship the integration, we needed to solve two central design problems: this meant that discovery and search features needed to be flawless.

Image collage

As a team, we started by focusing on the web experience while being mindful that the experience we created for the web should transfer to the mobile apps. One limitation we faced was the limited real estate in the board menu to display, discover, and search the vast library of photos from Unsplash. Two columns of pictures made it possible to show enough detail in the photo while showing 6 - 10 photos at a glance; this solved the display constraints. We addressed the discovery issue by leveraging Unsplash's featured feed available through their API. Doing so ensured that, every so often, a new set of high-quality pictures would be available for the user to discover, instead of always showing the same static images every time the user searched for a photo for their board. The engineering team did wonderful work to make search results extremely fast and keyword searches accurate. Quick and accurate search results encourage discovery which ultimately makes for a very satisfying experience.

Solving problems for the web experience lent itself well to finding solutions for the mobile Trello apps. From a design perspective, the most time consuming element was working within the framework of each operating system(OS). Each OS required different elements such as different visual standards and sizes for items like placeholder images, search interactions, headers, and layout requirements. While the experience is consistent throughout the web and mobile devices, each implementation on mobile provides a native experience that users expect for their respective mobile operating systems. By using a similar layout and experience on web and mobile apps, users did not have to relearn how to add background images to their Trello boards. Doing so reduces frustration or confusion when moving from web to mobile, or vice versa.

When it came time to ship our new Unsplash integration, the Trello Marketing team made a video along with other marketing material to make for a successful launch which you can watch here: https://trello.com/unsplash.