Tangram Design System
The Design System behind Trade Me. Tangram was born in 2014 to work behind the re-platformed responsive website.
Starting with the brand
Following a refresh of the Trade Me brand, we used the newly defined brand characteristics to design the Tangram Design System. We made a list of working hypothesis which paired a brand characteristic with a visual decision, for example "To be approachable, we soften the corners of interactive items".
We moved quickly in Sketch and the output was our first Sketch toolkit of components.
One hypothesis we tried out.
Sketch symbols ready to test with.
Testing it out
Designing from components-up is a great systematic way to approach the work, however we needed to test how they worked together in a contextual layout. As our design decisions had been based on hypothesis, we also needed to test if those held true when put to use.
We held a series of design workshops where we used the new Sketch toolkit to layout pages and flows.
Iterating and refining
Clarity on how to use the design system and its flexibility is critical to its wide-scale use.
The workshops provided feedback from designers across the business on how the components were working together. Refinements to the Design System were made as we went through the workshops. Requirements for new components were uncovered.
A living Design System
At this point the re-platforming work had been completed, and developers were able to begin applying the new design work to the components. I started to manage the project, ensuring it stayed on track.
I designed the guidelines website which is used by Trade Me designers and developers. Treating it like any other digital product, I've user tested the design and each iteration of the build.
A Design System is an organic product, and will continue to grow. Tangram today is a mature, comprehensive Design System complete with guidelines and tooling.
Accessibility
Throughout this work we have been mindful of accessibility. Wherever possible the design and development of components meet AA WICAG requirements. Tangram provides guidelines to Trade Me designers and developers on creating inclusive products. Our vision is to champion digital accessibility in the New Zealand private sector.
Collaborators: Zac Sanderson-Harris, Maz Hermon, Sean van Oossanen, Mark Huser, Denny Ford.
Brand guidelines are now easily accessible to everyone at Trade Me
The Product section features the reusable components used to build the Trade Me website