It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end.
Designing a product with the intention of being “white labelled” means that you are creating a software for a client to incorporate into their existing (visual language) system. Every now and then design consultants are hired by another consultant to work on a third party’s existing system. This what you call a super white label. Here, you not only have to consider your client’s needs, but your client’s client’s needs, too. It can be easy to start designing with everyone’s goals in mind and eventually lose focus, leaving no one satisfied in the end. These are some basic tips I’ve found that to help start and manage a white labelled project.
3 Types of White Labelling:
Before jumping right into the design, understanding the three different types of white labelling is critical, so that you can understand the product’s needs and manage your client’s expectations.
Co-branding is typically the easiest and most lightweight white labelling. Often all that is involved is adding an extra logo into a previously existing design. This option is the one that is clearly not an internal product (for the end client) but a product that works with another company.
This screenshot is showing an example of co-branding. Design Within Reach has added their logo to the existing Gmail interface.
2. Fully Customizable
This kind of product, in theory, will completely camouflage itself into the existing visual design of the end-client’s products.
When designing a white labelled product like this, you would need to make sure that the end client has an internal design team that can supervise visual design decisions. Without an internal design team, you’ll end up with a Frankenstein-like software that has been pieced together with mismatched body parts. You also run the risk of running into an “uncanny valley” like result; when a product almost seamlessly fits into another software system but certain qualities are divergent making the final result feel untrustworthy.
This is an example of http://www.grahamwithersclothing.com/ that uses a fully customized template from Squarespace as a platform to sell their handcrafted ties.
3. Controlled Variables
This kind of white labelling tends to be the most successful. It gives the end client enough freedom to customize the product (making it look integrated with a previously existing brand or system) but not too many variables that the client would be able to muck it up. The goal of this type of white labelling is to create something adaptable to reflect certain qualities of the client company, but not completely blend in with all of their visual design.
iTunes is a good example of a white labelled product where there are multiple variables that can be altered (background color, text color, and banner image).
Tips for White Labelling when using controlled variables:
1. Keep it simple
This may be the most obvious but is a good starting point. Make sure when you are creating a visual interface that you aren’t making anything too stylized (in any direction). Try to follow current industry trends to create something that will mesh well with a variety of companies.
2. Limit the customization
Don’t let there be too many elements for the end customer to change. You want it to look like it’s an internal system but leaving too much of the design up to them can make the product look muddy and unclear. At Cooper, we usually stick to letting the end client company choose a main color, possibly a secondary color or texture, input their logo, and other small variants like icon styles and spacing.
3. Stick to neutral typefaces
Choose one typeface and run with it. Sometimes it’s tempting to let the end user choose a typeface from many options, but when you are using a ‘controlled variable white label’ you need to keep some consistency throughout the UI. When you are choosing a typeface to use, don’t pick anything stylized like a slab serif or a condensed style. Choosing a typeface with many type styles and weights is useful so that it can be applied in many different situations.
Choose something neutral like Open Sans, Clan Pro, Source Sans or Proxima Nova. Choosing a native typeface used by Apple (currently Helvetica Neue) or Windows (currently Segoe UI) could also prove useful if you believe the end users would be using one or the other.
4. Use one main color and derive shades and tints of that color
Choose one color (ideally the primary brand color) and have a system that can derive shades of their color. This can go a lot further than one might think. It can be applied to headers, navigation, titles, cards, and more. By using shades and tints, you can extend their color palette to items that may be more secondary like banners, navigation text, captions, highlights, timestamps, etc. The primary color and secondary shades can be used in conjunction with items like charts, graphs, or timelines. However, if the product you are working with has many data visualizations, you will probably want to choose those colors yourself and not let them be customized
Adding in the option of having the interface be light or dark can be useful when working on more demanding projects like ones that need to scrupulously conform to an array of end-client companies. If needed a secondary color could also be an option to customize but would only be recommended if you know the end client has a design staff that could make wise decisions about color choices. Photos and textures can also help push the end client’s brand.
5. Finally, always remember that you aren’t designing
(Per usual, if you work at a consultancy) what you’re creating isn’t about what you like or prefer visually, it’s not even about your company’s visual style. It’s about making an adaptable product that can mask itself into many different end client’s systems.
In the end, there isn’t one path that leads to the utopia of white labelled products, but these tips should get you on the right path to creating a delightfully tailored product.
Resources for White Labelling
- Dynamically change the text color based on its background with Sass: http://zerosixthree.se/dynamically-change-text-color-with-sass/
- A great website for choosing color tints: http://jackiebalzer.com/color
- Material Design Handbook (resource for current industry trend): http://www.google.com/design/spec/material-design/introduction.html