Visual Branding + Product Design

#AUTOMATION

with Tray.io

“Integrate your entire stack with the leading general automation platform. Do more, faster with clicks-or-code"

FOR CONTEXT...

I worked with Tray.io as a freelancer in the early days of what has become a phenomenal rise. they were trying to prepare for their first significant funding round and were in need of some early-stage design guidance.

AS FREELANCE PRODUCT/BRAND DESIGNER…
  • I worked directly with the founding team 

  • Led a visual re-brand 

  • Working with the CTO and front-end engineer to build out a new front-end UI kit and workflows

THE CORE PROBLEM WAS...

The existing brand had been created by a non-designer & lacked the impact and finesse they were after. They also didn’t have a consistent design approach to the fundamental UI elements required to rapidly build out their product. I was tasked with elevating tray.io’s overall branding and a visual design system to be rolled out across their new & innovative platform. With a round of funding about to kick off, they wanted to stand out in the market.

Trays' original visual identity and UI

I BEGAN BRAND EXPLORATION BY…

talking to the founders to understand more about their business, positioning, and scenarios the branding would be used. Tray only had a handful of closed beta users, but I chatted to a few of them to get a sense of what they thought tray represented. Then the CEO and I spent some time sketching and riffing around a few ideas we both had.

Some examples of the “blocks” and Iconography we explored

At the time Tray was all about building block of code that helped to create bespoke workflows for users. It was highly customisable and we collectively settled on pursuing an isometric star-shaped brand mark as we felt it reflected the business offering and messaging particularly well at the time. 

AFTER MUCH COLLABORATION WITH THE FOUNDING TEAM….

we settled on the “connected star” blocks. As a collective, we believed the iconography was striking and stood out in what was a fairly mediocre space in terms of branding. It also conveyed the “code blocks” and “connections” that underpinned the software offering of Tray.

HAVING DEFINED THE VISUAL BRAND…

I then looked into building a lightweight Design Language System to guide the engineering team. As with most early-stage start-ups speed and flexibility in visual systems is key so we focused on the core elements only. These were being built super fast and with a lot of pairing and tweaking done on the fly in the browser. So these were used as approximate guidelines.

Tray-Web-GUI.png

Super lightweight UI Guide for engineers

Tray-Login.png

Login Screens and associated UI

Tray-IDE.png

Main IDE Layout

Tray-Community.png

Community Resource Portal

LOOKING BACK & REFLECTING...

Tray.io has skyrocketed in the years since I formed a relationship with them. I am super proud of the work and help I gave them during their formative years and worked with them on and off from 2014 until 2017.

 

The logo, palette and lightweight visual system were used as the basis of all brand & platform work from early 2014 until early 2019, seeing them through 3 fundraising rounds totalling $21.9m and huge global customer growth. 

 

Now, with a multi-million $ turnover, they have engaged an agency based in San Fransisco to set a new direction for them.

Get in touch

  • Twitter
  • LinkedIn

© 2020 by Rob Freemantle