Design Leadership and Change Management
Client: Schwan’s Home Delivery/Yelloh!
Role: Principal product designer
Responsibilities: Design leadership, design systems, training, research, UX/UI design, onboarding
Collaborators: Shawn Ricketts, Courtney Beyer
Overview
As the Prinicipal Product Designer, I embarked on a project to create and implement a same-day delivery feature for Schwan's Home Delivery, later rebranded as "Yelloh!" Despite the client enduring financial and operational challenges midway through the project, I remained committed to the team and, over the following 18 months, pivoted to provide design leadership where it was previously lacking, and to fill the many design-related gaps that appeared throughout.
Outcomes:
30%
Increase in overall site consistency*
45%
Reduction in front-end development time
26%
Increase in error-free releases
Design System
The Problem: Schwan’s had worked with an design and development agency prior to my joining the team, but endured several years of designers quickly rotating in and out of the project. The result was a piecemeal and poorly-executed component library that didn’t serve the needs of the production team. On top of that, many of what looked like usable components were actually just screenshots from the website. Additionally, the different component groupings were organized according to which page they lived on in the live site. So if a new designer needed to add or modify a component, they had to know what page it lived on first.
The Solution: I chose to recreate a new design system from scratch using Atomic Design as my organization method. My priorities were to create a design system that could
be easily understood by any designer coming onto the project, regardless of how much previous knowledge they had of Yelloh.com,
include flexible components that could easily be modified to adapt to different needs,
bring the site’s visual design into alignment
scale according to the product team’s (and company’s) growth.
I knew that most designers would know and understand the structure of Atomic Design, and so I organized the structure by atomic level, and then named each component. Because I knew stakeholders or other business leaders might view the design system, I included a page that explains the concept of Atomic Design in simple terms (largely borrowed directly from Brad Frost’s website and credited to him in the design system).
Because the team also lacked any documentation practices (which I promptly introduced), some of the components were referred to by multiple names. I worked with the team to establish naming conventions that would be meaningful and allow team members to easily understand the purpose and makeup of a component, but would also be recognizable to our other internal partners at Yelloh.
In May of 2023 Schwan’s refreshed their entire brand image, reinventing themselves as “Yelloh!” and moving away from the family-owned branding that had kept them going since 1954. The company engaged a local ad agency to create their branding, and we requested they create the redesigned pages in Figma. Since the agency wasn’t familiar with Figma, I held a training session to give them the basics.
I took the final files they created and broke each page apart into components. Because they were still very new to Figma, most of the designs still used shapes and groups instead of Figma-centric tools like auto-layout and variables. So I ended up re-creating many of the components for the new system.
The Result: After implementing the design system and updating the pattern library accordingly, we found that less time was needed to complete design tasks, and the final designs were far more consistent with the overall branding and patterns than previously. This, coupled with transitioning the Marketing Design Team from Photoshop to Figma for their page production (covered below), allowed the E-commerce Product Team to run through our product design life cycle 45% more efficiently.
In 2024 company leadership experienced a number of operational harships, which turned into financial hardships, and as a result 90% of our product team was laid-off or their contracts discontinued. The company chose to bring in an experienced offshore team to handle design and development, and the design system and thorough documentation I implemented enabled a seamless transition that ensuring ongoing continuity in the user experience.
Figma Onboarding Training
After seeing how efficiently my team was able to work in Figma, the marketing department decided to switch their design team from Photoshop to Figma. This was a bit daunting for the team, as their concern was the automation and efficiency in Figma would restrict their creative freedom.
I streamlined their design workflow and trained the team in Figma by writing instructional guides, creating training videos, and holding one-on-one and group workshops. I focused on how the tool would actually improve their creative output by allowing them to spend more time designing and less time nudging.
The added efficiency ended up taking a whopping four hours off of the file prep tasks during design/developer handoff.
This is an example of one of several “how-to” videos I created for the marketing team.
For more complex components I included instructions for use in the design system.
Conclusion
The introduction of both Figma and a functional design system enabled tremendous growth within the E-commerce team. Our work brought an increase in customer satisfaction, an increase in new customers, and a higher conversion rate. Additionally, we were able to design more accurately and consistently, iterate more quickly, and deploy pages and features faster and with far fewer errors.
In the summer of 2024 the client found themselves amidst more financial and operational difficulties. As a result, our product team of 15 was reduced to five, and all third-party consultants were let go. To maintain their online presence, Yelloh decided to hire an offshore design and development firm. Thanks in large part to my design system and documentation, the transition proceeded smoothly and the incoming designers and developers felt confident that they could carry on their work with no problem.
Yelloh! continues to deliver high-quality products to their many customers around the United States, and I’m proud to know that my work there continues to help them endure, even through hard times.