The team at Panera saw the redesign of the responsive e-commerce platform as an opportunity to tackle the first phase of a true design system, consisting of a Sketch library owned by the design team, and a living breathing design system owned by the web dev lead. The redesign allowed us to take a step back, reevaluate the internal product design process, and move to a model that moved conversations between design and dev up to the beginning of the process, and introduced an invaluable organizational tool which has helped facilitate the conversation.
“My role as the design system lead was to organize and stand up the Panera Design System and Sketch library. This included auditing and consolidating existing designs, working with developers to ensure alignment with designed and coded components, building out and maintaining the Sketch library, managing a small team to build and maintain the design system, and helping to rollout the new design system process to the larger organization. ”
The Team
We started with a centralized team, consisting of just myself, working to get the building blocks set up for the system. We eventually started involving other designers from the team as they became available, moving to a more distributed model, with designers spending a couple of weeks on the design system team, before moving back to working on the main Panera products.
The Process
Since the redesign effort was already underway, with five different designers working across various flows, there were inevitable inconsistencies and miscommunication between design and dev. The first step was to take a step back, survey the landscape, and work to consolidate designs and components into a true system.
Building Blocks & Rules
Since the design system and sketch library work was happening in parallel with the redesign effort, it was important that the design system become immediately useful to the team. Using the above process, it was important to focus on the building blocks (grids, colors, typography, illustrations, and icons) and setting rules that could be easily followed as designers were off working on new flows.
Know Your Users
Understanding that we were basically building a product, it was important to treat our users as we would for any other project. In this case we had two users, the product design team and the team of developers building the responsive site. That meant that I set recurring meetings to check in with the team to get their feedback and make sure the tool was going to be useful for the way they would work. When it came to maintaining the Sketch library, it was important to not only have the symbols and patterns in place for our system, but it was necessary to create instance sheets as well, allowing a designer or a dev to scan a category, at a glance, and grab a component or pattern from an easier to navigate presentation.
Maintenance & Education
Knowing that other designers will come onto the project, it has been important to make sure that process of building the system has been well documented. I wanted to make sure that there are points along the way where designers will have helpful educational moments that onboard them onto the experience in the way a tutorial might.
Evolving the System
Now that we have made it through most of the components in the system, we have started to evolve the system. We’re currently undergoing an effort to create a system around animations, with a large audit as the first step, and we’re working through planning to extend the system to other platforms like iOS, Android, and Kiosk.
