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, which later rebranded as "Yelloh!" Despite the client enduring financial and operational challenges midway through the project, I remained committed to, and embedded with, the team. Over the following 18 months I noticed a number of gaps in their processes and a general lack of design-focused leadership on the E-commerce team, and I stepped in to assist where I could.

Team

Courtney Beyer (Product Owner), Hope Doom (BA), Jim Bittner (Scrum Master), Shawn Ricketts (FED), Jill Subera (Marketing Team Manager)

Goals

Increase consistency across the board by introducing scalable, flexible, modern design system
Transition marketing design team from Photoshop to Figma
Train marketing design team in proper handoff procedures
Establish documentation practice

Highlights:

45%

Boost in productivity and efficiency

5.25 hours

Time savings for FED each sprint

30%

Improved consistency sitewide

Project Details

Background

For several years prior to my joining the team, Schwan’s had worked with a local design and development agency, but for a number of reasons, designers tended to leave after a few months. This consistent turnover ended up taxing the team quite heavily, as there was no one to establish any kind of design consistency, and Schwan’s design team specialized more in marketing and graphic design than UX and product.

No design system: One result of this was a piecemeal and poorly-executed component library that didn’t serve the needs of the product team. Many of what looked like usable components were actually just screenshots from the website, rather than usable, customizable components. 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 front-end developer (who also worked for this same agency) had worked on the site since 2015, and did his best to try to maintain consistency by establishing a pattern library. But because of the limitations of the front-end framework, these mostly ended up as static page templates rather than a true pattern library.
Design team using Photoshop: The E-commerce Marketing Design Team designed a new homepage every two weeks to highlight various deals and promotions, and they were building their page layouts in Photoshop rather than a modern tool like Figma or Sketch. Because the marketing team hadn’t been trained in how to conduct a proper design-dev handoff, our FED was having to spend an extra 5-6 hours each sprint doing file prep and extracting images.

With my work on Same-Day Delivery paused while the org determined its next steps, I brought these concerns up to our Product Owner and offered some solutions. She readily agreed to allocate time for me each sprint to focus on these things in addition to our business-as-usual work.

Design System

I chose to recreate a new design system from scratch. 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 accordingly. 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, 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.

To streamline the design workflow, I created a special component I called a “canvas.” This was a pre-built layout for mobile and for desktop that included a header, footer, and a flexible content well. A designer could drag this component onto their workspace, detach the instance, and start adding components. The content well was set to auto-layout to keep everything aligned.

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 to make them usable for the new system.

From Photoshop to Figma

After seeing how efficiently I was able to work in Figma, Schwan’s decided to purchase their own license. I offered to lead the transition process for the marketing team, as the idea of having to learn a new tool was daunting. Aside from the learning curve, their primary concern was the automation and efficiency in Figma would restrict their creative freedom.

In talking with the design team, I focused on how the tool would actually improve their creative output by allowing them to spend more time designing and less time nudging pixels.

I kicked things off with two training sessions where I went over the basics of asset creation, auto-layouts and components, and how to use the component library. I then set up a regular session every week (twice a week initially) where the designers could ask questions, practice their new skills, and learn new ones.

For particularly complex “specialty” components, I included specific instructions within the design system, and also recorded training videos for the team to follow.

I also walked them through how to properly hand their files off to FED. Several of the contract designers had never worked with a development team before, so this was brand new information for them.

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.

Client Testimonial

Courtney Beyer, the Product Owner for the E-Commerce Product Team, had this to say about our experience working together:

“I had the pleasure of working with Grahame for about 18 months on the Schwan's Home Delivery ecomm product team. Grahame was a consulting product/UX designer and I was the product owner/manager. I greatly enjoyed working with him during that time, as he brought a positive attitude and energy to the team while creating and owning innovative UX design.

“Grahame is not only a highly talented designer, but he also has high standards for quality work and design system principles. He brought a fresh perspective to our team that enabled us to be innovative and bold with our designs and experiences, while still aligning with our customer base needs and expectations. An example of just two of the projects we worked on together included the introduction of Same-Day Delivery ordering capabilities and the rebrand (Grahame did an amazing job co-championing several areas of this design work alongside our brand agency). Another kudos to Grahame is that he helped (and truly led) us through moving from Photoshop to Figma for content design creation. This was a change management feat and involved training and advising other freelance designers, content marketers, and e-comm marketers. He handled it with grace and exhibited excellent leadership skills - influencing others without direct authority and being seen as a trusted advisor and expert in that space. Without Grahame, that internal transition would not have been nearly as successful.

All-in-all, Grahame is a joy to work with and is smart, incredibly talented, positive, and kind. Any team would be lucky to have him!”

Internal Process Improvements