Connecting research and design systems for an improved experience

Written by , | Jan 25, 2018

Over the past few months, I have been challenging myself to create a concrete product design for our clients to use consistently.

While it seemed like an achievable goal, understanding how our clients currently use our storefront can be complicated. We don’t have a typical product. Our B2B commerce product isn’t a dashboard where clients can slap a logo on the header and call it their own. Instead, every business has a different path towards identifying and executing what it wants to sell, who it wants to sell to, and how it wants to sell its products.

After thinking through the endless design angles, the design vision is getting clearer that we can provide a consistent out-of-the-box experience for our storefront while still accommodating for clients with flexible needs. In combining research along with a well plotted design system that’s still in its infancy, we can begin to solve for most of the use cases we encounter.

UX Research

Research to discover who you are designing for

During the first few months of my role at CloudCraze as senior UX designer, we mapped out each of the industries our clients operate in and their buyers to better understand the needs of our customers and their business buyers. On top of this, we wanted to discover how we can adapt our storefront to better suit their needs while answering these questions: Who has the purchasing power? What devices are they using? Are they recurring buyers? How often do they buy?

You get the idea…

We’ve discovered buyer themes within each industry to target when speaking through use cases (e.g., stores, schools, companies, manufacturers, to name a few). By understanding who the buyers are in each vertical, we can begin to design for specific personas. These themes allow us to center around a set of personas per industry to truly understand who is buying within our storefronts. Examples of possible buyers identified include territory store managers for CPG products and IT specialists for software.

We can leverage these personas to define an information architecture (IA) that guides the different types of users to the most intuitive flow for their purchasing needs. In the persona examples above, a territory store manager purchasing for and shipping to five stores needs an in-depth checkout process compared to an IT specialist buying a subscription software. These are the types of interactions we are discovering to make IA recommendations per industry. Through this knowledge of each buyer’s unique needs and journey, we can focus on how to adjust our product per industry, while leaning on a design system to do a lot of the visual heavy lifting.

Visual Design

Create a design system to enable your clients

The next step in the process is implementing a design system to create a consistency within our product. Design systems, to those reading outside of the design community, is a relatively new and popularized phrase gaining a lot of steam. It is the wave of the future and an approach that will make your company more efficient overall. Simply put, by creating a product that has a “go to” set of design standards, your company can leverage these systems to make everyone’s lives slightly more efficient.

Consistency is the key here. The items below are a few necessary steps that we can take to move closer to a reusable and scalable storefront:

·      Using a CSS preprocessor (SASS/LESS) to enable a rapid branding process

·      Creating and implementing iconography throughout the product

·      Developing components that can be used across your product

·      Standardizing a consistent approach to experience and visual design

If you look around at some of the largest companies in the world, they have all implemented a design system. If you are an iOs developer, you know that all apps on the App Store need to meet a set standard for, say, button treatment around colors, fonts, padding, etc. before they can even be released. Apple isn’t the only company to start implementing this approach. Salesforce launched its Lightning Design System with the same mindset that takes a lot of guess work out of design treatments.

As an experience designer that has always paid acute attention to visual aesthetic, I found design systems daunting at first. Visual design was the only true art form left within the digital design community. However, over the past few years, I’ve opened my mind to the idea. There is always a place for visual design, but design systems will help rule out a lot of inconsistencies across an experience. It makes teams more efficient by setting expectations on what each object within a design should look like. This allows teams to focus on discovering an optimized design and layout for an intuitive experience.

With the design system in place, we can iron out a scalable product, while shifting our attention to personalized industry flows and personas. While we are still in the initial phases of this approach, we have a vision in mind that will guide us towards creating and improving a consistent storefront experience. This is a climb that I’m excited to ascend!

Share this Article: