It’s Thursday. You have framed the right problem, created a journey map, listened to experts, gone through sketching exercises, and have decided on a solution sketch. According to the Google Ventures Design Sprint “you’ll get clear data from a realistic prototype.” In this case a realistic prototype will be one that aligns to your solution sketch and follows the rules and guidelines of your design system.

Whether you have one team with several products, several teams with one product, or several products with several teams, you will heavily benefit from ensuring your design system takes center stage on your prototyping day.

Design Sprints at CDK

While at CDK Global we had 100+ apps in 100+ countries, so we took our design system to the extreme. It all started with our global UI standards team and ended with our awesome organization of designers spread throughout the globe.

The forefront of upholding the quality of our design system was our Standards Champions. We had spun up a team of experts that were located around the world from the U.S. to the U.K., and over to India. These are embedded experts with local teams that dedicate extra time towards knowing the standards, getting the latest updates, and relaying back the global UI standards team what is working, and is not working.

Design system champion example graphic

Standards Champions become very important when it’s time to prototype. The sprint team has dedicated their time making sure that they have created the best solution sketches possible, and so we want to make sure that the final solution sketch becomes a standards-compliant reality. We have the sprint facilitator (or someone else assisting in scheduling) book the time of a Standards Champion in advance to ensure they are present for the entire prototyping day.

Prototyping with Standards

The Standards Champion is present to help answer complex questions. Your solution sketch may be unique and might require a new pattern to be created that leverages existing components. All of our designers had common knowledge of our design system, but this is where it is nice to have an expert on hand to make sure that whatever gets created is aligned with the design system.

Prototyping template
Example from one of our mobile templates.

Our global UI standards team provided plenty of resources to keep the prototyping process moving along quickly. There are library packs, and then there are templates. We had both Axure and Sketch library packs that contain every component that was backed by our developed component library. We distributed this over cloud storage, so that every designer instantly has an up-to-date copy to work with. Our templates provided a quick starting point for common page layouts, so they can also be utilized to speed up the creation of a standards-compliant prototype. Another great benefit from doing this is that designers that do not primarily focus on UI design can still generate standards-compliant and great looking interfaces.

Post-Sprint

It’s now Monday, and you’ve made it through your sprint. You most likely have some scrapes and bruises, or maybe your concept was a complete miss. If your concept was a complete miss, then you definitely have some lessons learned, and it’s back to the drawing board. If you have some minor usability issues that can be addressed, then you should be in good shape. This also means that your design should be near-compliant with your design system, and you most likely have minimal work to adjust it.

At CDK when we had a list of things that went wrong, we would sync up with our product and development counterparts to gain alignment on spending some extra time fixing the usability issues prior to delivering our final assets. When we started to post our final assets a review occurred with the local Standards Champion, and then the global UI standards team. This occurred in InVision where we took advantage of its ability to quickly provide feedback through comments.

InVision commenting on prototype
Using InVision to comment on items that need to be adjusted.

Post-Delivery

Once everything had been delivered to the development team through InVision they were clear to start making it come to life. As we enhanced our design system over time the development process became easier. Our designs were compliant with our design system which means we had been bringing more consistency to our users and reduced the amount of custom components and patterns that had to be created by the development teams.

By including our design system as a necessary step in design sprints we were able to move faster, bring more consistency, and create realistic prototypes.

Next articleEasily Set up a Design Sprint Kit
Steven Meyer is a design leader at Keap where he oversees a team of product designers working to help small businesses succeed. Steven has history of leading large-scale efforts such as overseeing the creation of one of the largest design systems in the automotive industry. Steven’s experience has spanned through leading Marines, creating his own startup, working for a venture-backed startup, designing and developing at a Fortune 500 company, and more. Steven has worked for large brands such as O’Reilly Auto Parts, Pearson Education, and CDK Global. Steven holds an M.S. in Technology from ASU and a graduate certificate in Strategic Decision and Risk Management from Stanford University.