Lessons in Scalable Product Design

Consistency in design is paramount to delivering a good user experience. Two key reasons for implementing the principle of consistency are to reduce learning and eliminate confusion for the end user. We can all agree it matters for the end user, but it also matters when you work with a team of web designers or engineers all working on the same product.

At POWr, a company that focuses on building apps, the problem of scalable and consistent design became apparent early on when our app library quickly grew to over 50 different apps. The problem started internally, with designs turning out differently depending on the engineer who worked on them. Without standardized design or documentation, engineers and designers looked at the product subjectively. This led to fragmented design and a lack of consistency that extended beyond the apps themselves, but also to the website, email design, user dashboards, and more.

It was clear that we needed a ‘source of truth’, or a design process, since offering a consistent product design and user experience is crucial for building a successful app business. Aside from maintaining consistency, we found that engineers were frequently rebuilding the same things, but in different ways. This perpetuated differences in design and affected productivity. With a small team and many plugins it’s important to make sure that each individual is using their time effectively and not repeating themself. Which brings me onto the code base. Like wine, it’s best when DRY! All joking aside, what we really mean by that is Don’t Repeat Yourself. Keeping the code base clean and avoiding repetition is part of the process and should not be overlooked.

We had our goals, but achieving them was another challenge. Here are three things we learned about creating a scalable design process:

1. Be an expert on your brand

The first step is knowing who you are as a brand and how you want to visually represent your brand. This isn’t something that can be decided by a few people in isolation. Get representatives from each department together and define your brand through some simple exercises. You need to know what the company values and how to present these values, the tone in which to communicate them, and what your brand’s personality is. Working out how this translates to design is the next step.

Next, take a critical look at your product interfaces. When you do this, you might find that there are different hues in colors, different button styles, border radiuses, shadows, and more! These inconsistencies harm your brand recognition and your user experience. You need to define the visual language that aligns with your brand’s personality, from shapes, icons, typography and colors. Once this is defined you can also identify where you can be more effective in your design and engineering processes.

2. Determine where you can optimize efficiency

This part can be time-consuming but you’ll reap the rewards down the line. Invest time in identifying the components that are essential in your product design and user experience, and what you’re reusing or rebuilding most often. For this step it’s important to talk to your engineers and developers! When you’ve found the elements that are reused throughout your site or product and you’ll want to make these components as independent as possible. This means that they can be placed anywhere, in any situation and behave as expected. If you’re reusing the same components, this will also reduce the time you spend QA testing.

If you’re using a CSS preprocessor like SASS or LESS, make properties like colors, border-radiuses, typography, etc. into variables or mixins. This will make your codebase more maintainable, as these variables can be reused. If any changes or updates need to happen, such as a color change, you only need to update that one variable instead of updating the hex code everywhere that it’s applied. This means writing less code by using styles and components that are already designed and spending less time on front end code.

Taking these steps will make your team much more productive and cut out many tedious tasks and repetition, and you’ll see better consistency in all the engineering team’s output.

3. Develop a comprehensive style guide

We’ve touched on keeping the code base more maintainable, but in order to ensure this sticks over time you need to write rules on usage. If you don’t, you’ll find that not everybody thinks in the same way and it will affect your code, product, brand recognition and user experience.

Step one is to standardize naming conventions for elements and components. Choose a naming methodology, such as BEM, SMACSS or OOCSS. You could even use a combination of all of them depending on what works best for your business. Whatever you decide, be sure to stick to it.

Second, define guidelines for how components are to be used. Do you know whether you prefer a dropdown or a radio button, when to use modals, where to put a notification, when to use a toggle? This will remove ambiguity and allow for the design to be looked at objectively.

Third, keep these components modular. At POWr we ran into conflicting CSS time and time again. Keeping our components modular helped keep our CSS clean and organized.

A design system will keep your user experience optimal and your engineering team on-track…

A design system allows you to keep your design and experience consistent, which paves the way for a more seamless user experience. Internally, it increases productivity for your design and engineering and development teams by giving them easy-to-follow guidelines and reusable components to move faster with new designs or builds. Essentially, it provides the puzzle pieces needed to build the puzzle.

There is no need to reinvent the wheel every time you add something to your product and/or website. Since we made these changes at POWr, the result has been visible in the design of our entire plugin library. This led to a cleaner code base, more productive designers and engineers, and a more agile product development process. If there’s one thing to take away it’s to invest time in creating a design process and guidelines. Trust us, it’s worth it.

Emilie Murphy, Product Marketing

Kelsey Raczac, UX Designer & Engineer

This guest post was written by Emilie Murphy & Kelsey Raczac. Emilie manages Product Marketing at POWr and Kelsey is an UX Designer and Engineer at POWr. Headquartered in San Francisco, POWr’s mission is to provide customizable, easy-to-use and affordable solutions to help small businesses grow. With over 50 website plugins available that are customizable, mobile-responsive and work on any platform, the possibilities are endless for your site!