Try our open-source kits for mobile and web for yourself. Download links below!
Our amazing team built a Starter Kit to to improve the way we work with our teams to build digital products.
In order to successfully build digital products, in our experience, we found that we needed to be able to efficiently work with design systems. We also needed to be able to hand those design systems off to our engineering teams with accurate specifications they can work with easily.
However, we realized there were gaps in our process and the documentation we were providing our engineering teams – a problem that was compounded by the fact that we were building more complex products and rapidly expanding our design team.
So we built a Starter Kit to help bridge those gaps.
It took a team of talented designers, engineers and writers to launch our first version of the Starter Kits for mobile and web in late 2019. To this day, we continue to get feedback from our teams and make improvements as needed. Here are some of the things we learned along the way:
What the Team Learned
Processes can help you scale
We’ve been using design systems as a documentation tool for over four years. Initially, it started as a way to improve collaboration between design and engineering – we would think, “How can we capture button state changes easily without having to redesign the whole screen again?” or “How do we show what the screen looks like when it’s loading? Does this pattern exist for all screens?”.
And now that our team is growing, it’s even more important for us to standardize our process. We want to ensure we maintain consistency across projects, as well as set up more junior designers with the tools and resources they need to understand how to start building out design systems effectively, with no confusion.
– Carolyne Gardener, Sr. Professional, Product Design
This was a great team-building experience
I had a lot of fun building this thing. It was cool to sit in a room with fellow designers to hash out what best practices were and push our design thinking as a team. I think it really solidified our philosophies and values as a design team and I’m really looking forward to doing this kind of thing again. Maybe we can build a UX starter kit? Maybe motion design? Can’t wait.
– Matt Monaco, Professional, Product Designer
We’re designing better hand off for developers
Working closely with the engineers that are actually building the product you’re designing is invaluable! I’ve always been someone that tries to gain insight into how things are actually being built so it can be reflected back into the “atomic-ness” of the component designs.
Whether you’re able to sit in a room with your engineering teams or not, we wanted to make you feel like you could either way with this Starter Kit. With features like the “designer notes” to component level “rules”, we wanted to empower designers working in similar fast-paced environments to us.
It’s been an eye-opening experience – jumping into the nitty-gritty nuances with different engineering teams over the past year to nail down specific differences between platforms, and understand what tends to be missed by design and why. These Starter Kits have made it so much easier to give developers what they need, in a language they speak.
– Josh Mitchinson, Professional, Product Design
It’s about speaking the same language and understanding each other better
As a developer, it’s always a challenge to make a real thing that moves with which you can interact, while also working with a flat design or a “static blueprint”. In the past, we spent a lot of time sitting with designers one-on-one to try and understand what the other person wanted. And sometimes, we couldn’t end up building what the design team wanted because of technical limitations that come with our platform. It was a huge time trap.
So about a year and half ago, Aaron (Technical Director and iOS expert) and I started having in-depth conversations with the design team to understand our respective pain points and to start exploring how we could all work better.
Getting the chance to work with design on these Starter Kits has been really progressive. Design could finally empathize with how we work, how we organize our code, how we look for patterns that can be reused, and how hard it can be for us to actually make “quick colour changes” when we don’t have things organized on a component-by-component basis.
Before it felt like we were siloed, but now it feels like we’re collaborating better and being given documentation that’s more aligned to how Android logically works. It’s pretty great.
– Kar Ming Chu, Professional, Software Engineer
Share the pain and the glory will follow
When it came time to discuss engineering pain points with design, I was discontented with our current process.
For example, there are inherent limitations in the way Sketch and Zeplin provide data points for shadows – we simply can’t use the data points generated to replicate a design exactly as intended. It was time for a solution, so I built an internal iOS app that allows designers to create shadows directly on an iOS device so they can see exactly what it will look like when built.
It also provides the iOS-specific values used to create that shadow, which can then be handed off to an iOS developer. This internal app has grown into a real initiative at Intersect, with an Android app being worked on as well as an entire roadmap of additional features to improve the way design and engineering work together.
– Aaron Ritchie, Sr. Professional, Software Engineer
Try Our Starter Kits
You can download our Starter Kit Sketch files for yourself and let us know what you think. Do they help you build out your own Design Systems? Do they help you collaborate better with your team?