my roles
design leadership / brand & visual design / design systems implementation
In March 2019, Vector embarked on a re-brand of its main brand, consolidating all of its many business units into one unified brand.
Business units such as Ongas and Powersmart, who had lived life as with their own brand identities, would now share the Vector name and branding - becoming Vector Ongas & Vector Powersmart.
With the merge into one unified brand, the management each of these brand’s assets individually wasn’t a practical long term solution.
A challenge was set create a Proof of Concept of system & workflow that would allow both a level of autonomy but also consistency for the Vector family of brands.
I assembled and lead a small team consisting of Architects, Front End Developers and members of our technology partner, UI revolution.
The seed for Vector Edison - a design & brand system for Vector - was planted.
opportunity
Create a proof of concept system to increase efficiency & consistency of the Vector brand
“..be sure to set up an environment that allows design system makers to be productive and effective, while also creating an environment that effectively communicates the design system to your organization”
Discovery
Design systems are not a new concept - already adopted by many of the largest international brands.
My biggest source of inspiration quickly became Brad Frost and through his articles I learnt how to break down the task in simple concepts - including atomic design and the analogy of “workshop & storefront”
I set out to research what “good looked like” by exploring the public design systems of major brands such as Shopify, Uber, Facebook and many others
An incredible source of information turned out to be Adele - a vast repository of publicly available design systems and pattern libraries
I was also able to find interesting backstories for each system around their inception, the problems they solved and the pitfalls which I began collating into a matrix - with the hope of adopting parts that would work for Vector specifically.
I love the quote “One size fits all only applies to rain ponchos” and I knew that whatever we adopted would need to be tailored to the Vector environment - not only in terms of usage but also in terms of the technology stacks already in place within our Devops team.
I produced a set of personas based on “jobs to be done” & roles that each type of person would play in a design system experience.
Through my research, I came to the conclusion that a design system lives and dies by its level of adoption and maintenance. If a design system is not useful and easy to keep up to date then it will undoubtedly fall by the wayside.
Due to this, I now knew that whatever set of tools were proposed, they had to work end to end for the users involved, with as little friction and bottlenecks as possible.
Using this UX lens, I began to explore options for an end-to-end workflow that could work across all my personas, with efficiency a top priority.
design
At the time, I was working predominantly in Sketch but had been experimenting with Figma.
While researching, I came upon an interesting concept offered by a design tool called FramerX where live code components were directly connected to design artefacts.
This, to me, sounded like “nirvana” as could reduce “double handling” of design and code, ensuring that both production assets and design assets were always in sync. This could assist create not only a design system but a living design system.
Whatever tools that was selected, it was mandatory that they would need to integrate with existing DevOps continuous integration/continuous delivery (CI/CD) pipelines, including automated testing.
I explored Framer X with the team but it was decided to pivot away from as would add additional complexity to the proof of concept, reducing our ability to move at speed.
This left Figma, which ticked a lot of the boxes for our needs. Knowing that integration with Vector’s existing GutHUB repository was also must, I explored what other additional tools established design systems from other large organisations had adopted.
Eventually, I came across Storybook which I pitched back to the team and once pros and cons were weighed up, was adopted as our “workshop”.
This left the choice of a “storefront” - the place where the design system would be publicly available.
As a team, we again weighed up a few options eventually settling on Zeroheight, as this allowed directed integration with Storybook.
With these three tools pencilled in - Figma, Storybook, Zeroheight - I lead a collaborative effort with the working group on draft end-to-end workflow from Designer to Developer to 3rd party, design system adopter.
Designers
Benefit from access to a constantly up to date design library containing all approved components eg buttons, alerts, form elements etc.Developers
Access to Figma artboards in the cloud to gather requirements for development in their existing libraries (React) and would push to Storybook for review.3rd parties
Able to access and browse a public library of existing components, design patterns and guidelines to assist them with designing for the Vector brand
Prototype
Once we had agreed on a workflow, we wanted to test the end-to-end process using one component - is this case a button.
Put simply, the Developers on our team worked to create a button based on my design, including interactions, into React.
This React code was pushed to GitHub and then integrated into Storybook. A view of this button component in Storybook was then integrated into Zeroheight - our proof of concept had worked.
We continue to build upon this proof of concept, rapidly building up our component library with a plan to release a full design system mid 2020.