polyLook Design System
Project Overview
polypoly is building a sustainable data economy to change the way data is handled. Focus is the polyPod, an app that turns end devices into data centres.
How can we improve our design while ensuring that it is scalable and future features are easy to build? By using components that can be styled and maintained agnostically. Cue to... design tokens! I took it upon myself to introduce polypoly to design tokens and how we can use them.
- RoleDesign System Lead
- @polypoly GmbH
- Appapp store
Key Takeaways
-
Improved documentation by including all stakeholders.
-
Improved Designer/Developer collaboration.
-
Introduced autolayout and design tokens to the Design System.
Objective
My aim is to transition the existing Figma UI kit into a full-fledged Design System that uses design tokens to have aligned component throughout all of our platforms (iOS/Android/Web).
Process
- Consumer research
Research the Design system maturity level and the company culture - Educate through workshops and collaboration
- Design Library
- Implement components throughout all platforms
- Consumer testing
Follow adoption and the need for support
The consumers
3 in-house designers, 6 in-house developers as well as future 3rd party developers to build on the platform.
Research
15 min interviews of current designers and developers to understand their needs for a Design System and gather insights of Design Systems and tokens knowledge.
Based on qualitative data from the interviews I was able to see that our consumers had little to no knowledge of design tokens, and mixed knowledge about design systems.
After this first initial research phase, I established a plan to educate designers and developers about Design Systems and design tokens by conducting a workshop to start establishing a common language and a common understanding of Design Systems
Culture
The company culture is really collaborative based so I decided to approach the design system with clan culture mentality of let's do things together. And we are in a very disruptive phase of our product creation so building things fast and be flexible about it is very important.
At my first team event I proposed to set up a Design System workshop that I called "Cross guild Design System". One specific aspect I was trying to solve was to have a seamless Design handoff between sculptors (designers) and tinkerers (developers) via design tokens.
- In order to free up time to focus on more abstract concepts
- Help scale and onboard new tinkerers and sculptors.
- Having design tokens as a single source of truth gives the opportunity to sculptors to take part in implementing changes.
- Design tokens allows us to speak the same language all while using our own tools.
Here are some of the concepts I wanted to talk about
To organise this workshop I prepared a small interactive presentation to bring everyone up to speed. I partnered up with a front-end developer that showed interest and we prepared a test project to show off how a single source of truth works.
My expected outcome was to define requirements for each guild, seek ownership from stakeholders and start establishing a naming convention. What I ended up having was already great, an overall understanding of the value of Design tokens to a group of previously unaware stakeholders and A Proof-of-Concept implementation that reflects changes in Figma directly on GitHub. A total win on my side.
Documentation
I was in close collaboration with front-end developers to understand the coded status of our components and added the status property to our documentation. Every time a component was used or reworked on I documented the component with design tokens and shared the progress with all stakeholders via a slack channel I set up to ensure all stakeholders had a shared language when talking about the Design System. Product owners used this channel to be up-to-date with that was available to them.
