Ricky Synnot

REA design UI Kit

October 12, 2014

The process to create and publish a UI Kit was a big milestone for design at REA Group. The UI Kit provides designers and product teams with a common standard of UI and interface elements from which to create product designs & concepts. Using a shared UI Kit ensures that the core elements in our designs are aligned, and makes cross-line-of-business workflow more efficient.

Objectives

The goal of the UI Kit project was to create and agree on a ‘single point of truth’ for our UI styles, typography and interaction patterns. The approach I helped define aimed to do this through real project work, rather than create the UI Kit as an isolated task. The UI Kit should provide all designers, external agencies and global partners with a comprehensive library of UI & interface elements from which to create future designs & concepts.

My role

The residential design team began the creation of the UI Kit as a collaboration. I was responsible for taking ideas and suggestions for the UI Kit into my work on the Agent Profiles (Find an Agent) project, and report findings & recommendations back to the team. Through a repetitive process of concepting, experimentation, cross device testing and discussion, I was able to contribute many items & styles into the UI Kit.

In addition to UI elements & styles, my contribution to the UI Kit included art direction, critique, analysis and alignment with current web trends. My deep understanding of web based interaction patterns, interface style and modern design trends was in my view influential in the success of the UI Kit, and its uptake within the business.

Outcomes & results

The UI Kit now forms a strong base for all REA Group design work. It was immediately picked up by all core and adjacent projects, and the kit has been provided to our global offices for use.

As much as the process to create the UI Kit aligns our design work, it brought the design team closer together. We sat next to each other for weeks on end, in a highly collaborative and team oriented situation.

 

REA-UI-Kit-v2.6x