A Perfect Marriage: When the Pattern Library and CMS Become One

How we helped Organized Living yield more contacts in the first 72 hours after relaunch than contacted them in the entire previous year—and that's just the start of their success.

Our work with Organized Living was featured on the RWD Podcast with Ethan Marcotte and Karen McGrane.

Listen to the recap episode

Pattern libraries have quickly grown in popularity due to their ability to offer immense value and extend across multiple websites, applications, and even brands. But pattern libraries (sometimes called design systems and style guides) require a knowledgeable and dedicated internal team to maintain and extend them in order for the library to be worth the investment. A recent partnership between Organized Living and Sparkbox has shown just how powerful a pattern library and dedicated team can be.

Intentional Iteration

Teams that recognize the value of a pattern library often have many web properties to maintain. Organized Living definitely fits that mold. They care for their main consumer-facing site, a site for professionals, two different Intranets (for Dealers and Sales teams), eCommerce, and a web app that allows users to customize a storage solution for their needs. With a small web team—and new ideas coming daily for their efforts—it’s a lot of work to create, modify, and maintain all those properties.  

With many different areas to tackle, it’s easy to lose focus, so working iteratively was key. To stay on track, we used Organized Living’s goals and feedback to prioritize the top sites and templates to tackle in our engagements. 

Leveling Up Across Disciplines

Organized Living requested Sparkbox support due to our strong design and user experience knowledge, as well as our experience building pattern libraries. We often discuss how we level up our client’s teams technically, but we aim to do that across disciplines and had great success doing so with the smart and eager Organized Living team.

Through transparency and solid communication, we viewed project updates as an opportunity to teach the Organized Living team. We collaboratively planned using a content audit, new information architecture spreadsheet, and wireframes. And whenever we hit a point where we weren’t sure on a wireframe, the Organized Living team would take our recommendations and write actual page content to confirm our plans before moving to design. We slowly and intentionally leveled up their team by bringing them into the how behind our decisions. And both teams were consistently on the lookout for opportunities to allow the Organized Living team to test out their learning.

We collaboratively planned using a content audit, new information architecture spreadsheet, and wireframes. 

Initial Engagement: Led by Sparkbox

People’s homes are very personal spaces, and the most common space consumers will install Organized Living’s storage solutions is the bedroom. While Organized Living had solid, logical arguments why consumers should choose their products over others, that message should be secondary to how an organized life can impact customers. We needed homeowners and homebuyers to feel comfortable inviting us into their most intimate rooms.

To accomplish that, Organized Living needed to make a careful shift away from focusing on their products and toward the people who would benefit from purchasing their products. The new site would highlight their products through a focus on their customers, their rooms, and what those storage solutions could mean in their lives. The site should feel like sunshine through an open window or a perfectly cozy blanket on a cold day—warm, homey, intentionally minimal, and ”just what you need.” We embraced that intentionality first in the new information architecture, which drastically reduced the number of product pages—from 74 down to 8.

The previous site had 74 pages dedicated to highlighting the features of their product lines (including lists of actual products) and multiple potential calls to action. Our proposed architecture featured 5 pages centered around rooms and lifestyles, with hints of the products. Actual product details were housed on three supporting pages that were deprioritized to the footer within the architecture.

Design Approach

In addition to our information architecture being simplified, we conveyed the message of “an organized life gives you peace of mind” through aesthetic design. We felt strongly that the site needed to be heavily lifestyle-photo based, showing people in various rooms using Organized Living products. We worked with photos that contained heavy doses of natural light washing over the people and products, reinforcing the idea that an organized life makes life better.

The addition of the modern serif typeface, Hercules, to the existing brand font, Proxima Nova, provided some personality and gave the site a high-end lifestyle brand feel. Descriptor text was arranged in an orderly way, stacking into columns on larger screens and using clear entry points for readers.

We used columns of content to organize text and provided clear numerical entry points to call out important information. We used Hercules, a refined serif typeface, for headlines to create a high-end feel.

Most of the content modules on the room pages were designed to take the full width of the browser, making it easy for the Organized Living team to create additional pages and add as much or as little content as needed.

Knowing how effective repetition can be, we moved from multiple disparate calls to action to one, consistent “Get Started” call to action used consistently at key points throughout the site. Get Started acted as a central, consolidated area for all the different actions a user should take.

The Get Started page acted as a central point for different audiences to take action and featured the common “Dealer Search” action at the top and quick ways to access lower-priority actions as well.

With such a drastic shift in tone and content, we proved our wireframe planning with actual, newly created content from the Organized Living team.

The room pages—along with the entire site—needed to convey the message of “an organized life gives you peace of mind.”

In addition to more customer-focused pages, the text and photos of those pages were also meant to be more focused on customers and to hone in on the emotional side of storage solutions—how an organized space means so much more than just a nice closet—and the Organized Living team did a great job taking our lead and finding successful imagery and content to support that vision.

The text and photos were meant to be customer-focused and to hone in on the emotional side of storage solutions—how an organized space means so much more than just a nice closet.

Elements can morph during design efforts, and new elements can be created that replace earlier work, so we regularly checked that all new patterns were critical and not duplicative before beginning development. Our goal was to make sure we leveraged existing patterns as much as possible to provide the biggest value. We then set out to bring those designs to life in the browser.

Sparkbox primarily led the development effort in the first phase while Organized Living led testing. Later, the Organized Living team jumped into development with bug fixes and, toward the end, took over the development completely. It was a super smooth, intentional transition thanks to close communication and prioritization between our teams.

Second Engagement: Led by Organized Living

After seeing how the Sparkbox team worked and our transparent rationale behind decisions, the Organized Living team took the reins in the second engagement for their Intranets and professionals websites. For the Intranets, Micheal Hickerson at Organized Living created wireframes for all the key template pages, and our teams identified reusable patterns together. Sparkbox critiqued the wireframes and provided new design for the few instances where we came across new patterns. The Organized Living team mostly planned the professionals website by themselves using what they had learned from all the previous work and reusing elements from the pattern library.

Capitalizing on the Pattern Library

We had a strong partner in Organized Living, and they were excited to make the most of the pattern library. As Ryan Cromwell said in an RWD Podcast about the redesign, "It’s one of the best implementations of a pattern library that we’ve seen." I’ll let our key contact, Micheal Hickerson explain how their CMS decision and execution naturally extended the pattern library:

“At about the same time that we were planning the implementation, the CMS that we use—Sitefinity—released a new open source MVC frontend framework called ‘Project Feather.’ We saw this as an opportunity to build a system of widgets within Sitefinity that matched up with the components of the new pattern library, giving content editors the ability to create pages using any combination of design elements. Because both the pattern library and Sitefinity are modular, we were able to iterate quickly.

Patterns from the pattern library (left) are easily ported into the modular content management system (right) for an easy drag-and-drop editing experience to piece together—and edit—modular pages.

"As a result, our marketing team was able to plan new pages during development and then build them easily once the required CMS components were in place. We were even able to significantly increase scope mid project and still meet a tight timeline based on the pattern library and CMS framework. We had originally planned to launch the consumer-facing pages first, then follow up with our pages for professionals a few months later. The new design was so compelling, however, that we decided to launch both phases at the same time. With the wireframes and pattern library in place, our marketing and development teams could work in parallel to meet the more ambitious scope.

"We also discovered that the pattern library made our development process more efficient. Our team could first perfect the design and user experience for new website features statically and then focus on the backend implementation. In several cases, the process of updating the pattern library revealed new functionality that we needed to program—early enough that we could easily adapt our development plans. There were also moments when we realized that a ‘new’ feature was actually just a small tweak to an existing pattern library component.

"It’s one of the best implementations of a pattern library that we’ve seen." - Ryan Cromwell

The pattern library has become a standard part of our development process. Since launching our redesigned website, we’ve expanded the pattern library to include our Intranets, as well as created a second, smaller pattern library for our email templates. I’m looking forward to the day when we have pattern libraries for all our web assets.”

Results

Disparate user types posed an early challenge in the project, notably end consumers versus professionals. While everyone felt the site was primarily for consumers, one professional could net Organized Living hundreds (or thousands) of customers, so it’s important to take care of them as well. We pushed to focus on the end consumers (homeowners and homebuyers) as a means of attracting those users, as well as the professionals who service them. The results speak for themselves.

  1. More professionals contacted Organized Living in the first 72 hours after relaunch than contacted them in the entire previous year.

  2. The average online order amount has increased 71%.

  3. The Organized Living team added an additional professionals site to their initial launch plan mid-project and still launched on time and within budget.

  4. Ongoing development has been smoother and more effective.

More professionals contacted Organized Living in the first 72 hours after relaunch than contacted them in the entire previous year.

The average online order amount has increased 71% since the site was relaunched.

Organized Living has continued to extend their pattern library. In addition, Sparkbox recently was asked to add and modify patterns. We were able to do so efficiently and under budget thanks to how solid the pattern library has remained during the continued efforts of the Organized Living team.

Building Success

When you combine smart, flexible teams with solid plans and modular frameworks, powerful solutions are born. Organized Living embraced the flexibility of a pattern library and married it with a powerful, modular CMS. And by learning together, the Organized Living team is able to effectively plan and execute pattern library extensions to build a successful future.