Rebuilding the Developer Experience

  • ui design
  • design system
  • prototyping
  • Figma
Created using the Atlas design system, which this work helped build Created using the Atlas design system, which this work helped build
Bold use of illustration guided by Clear January Bold use of illustration guided by Clear January
Reusable components were created to support the design system and aid the CMS construction Reusable components were created to support the design system and aid the CMS construction

Business Problem

Travelport has a heathy developer community creating apps for travel agencies that can be then resold on the Travelport Marketplace. The developer experience is currently disjointed with documentation in a number of locations and duplicated making content management time consuming. Travelport needed to bring the developer experience up to the same levels as modern SAAS brands like Spotify, Google and Facebook to ensure competitiveness within the market.

Design Process

A capable in-house, Helsinki based UX designer was able to produce a sizeable and detailed UX prototype to the key screens for a new rationalised down Developer Experience. From this, Clear January, whilst working closely with the Dublin based Atlas Design System team was able to guide the creation of the fledgeling design system through the creation of the UI mockup page templates. Using Figma as a collaborative design platform we were able to quickly work together and create a consensus on the direction of the design system and use it to mock up the UI. We then created a clickable prototype within Figma for use by the product owner to use as an aid to get the business onboard with the new direction the product was taking.

UI Design

We wanted to create a visual design using the Atlas Design System that was part of the Travelport product portfolio but at the same time something that was individual to the Developer Experience as this was one of only two outwardly facing products alongside the .com website - everything else is secure behind a log in screen. We did this with the use of bold, full width page components that alternated in colour to help separate the content on the higher level pages and decreased in usage as the user worked their way through the more content heavy page templates. We used the Atlas defined responsive classic 12 column grid to help us lay out the content build reusable components for the Liferay CMS.

To make the Developer Experience it's own product and not just a cookie cutter Travelport website we employed a number of sympathetic yet individual styles to the page templates. Rather than the brand photography which often felt a little generically travel orientated and not focussed on the developer persona, we wanted to use an illustration style inline with the global brand guidelines and worked up a series of illustrations in conjunction with the Atlas team.

Every week we showcased progress to the stakeholder and business teams to make sure we were all aligned and everyone had a chance to engage with the work. This, obviously, sat alongside daily calls with UX and Atlas teams to make sure the page templates and UI mockups were moving in the right direction.

The end result was a pixel perfect suite of UI mockups, components and page templates that we were able to walk through in detail with the offshore development teams so they would be fully up to speed with how the templates were built within the design and how they needed to be built into HTML.