White-Labelling UX & Implementation

What is white-labelling?

A white-label product is something that is designed to be re-branded, usually multiple times over. You know how Facebook, Twitter and LinkedIn let you upload a profile image, background photo, and even a logo? That’s kind of like white-labelling — you’re “re-branding” an existing product to yourself. But the strictest definition is when the product is entirely re-branding, with no old brand remnants remaining.

Varying Degrees

While Twitter, for example, lets you upload certain brand elements, you cannot remove Twitter’s logo, so Twitter isn’t strictly a white-label application. But let’s look at the opposite side of the spectrum: Wordpress. A fresh WordPress installation does not have any significant WordPress branding because it’s designed from the ground-up to be “re-branded”. A classic example of a true white-label application is Big Cartel — a build-your-own commerce store, where you completely control the branding.

Core Concepts

Scope: A defined scope tells us where to start, and where to stop.

Abstract Thinking: White-label applications play by a different set of rules. To navigate them effectively, you have to think outside the box.

User Experience: There are various ways of implementing the white-label process and experience. We’ll take a look at a few common methods.

Scope

How to define scope

Your scope will depend on what you want to accomplish, and what resources your have at-hand such as time, people and skills. I can’t tell you where to draw the line — but I can tell you that drawing the line somewhere is very important.

My suggested approach is to start making brutal curations early-on. Start with a giant list of all your nice-to-have’s and must-have’s, and then start asking the hard questions. Is this absolutely essential for our MVP? I won’t lie — this is going to hurt. But this practice is essential to creating the right jumping-off point.

What NOT to include

Don’t confuse the scope of your entire application with the scope of your white-labelling feature. They’re not the same thing. Treat white-labelling just like any other feature in your application. Plan it and drop it into your workflow just like you would any other feature. Keep it tight.

It might feel as if white-labelling is something special. It’s not. Sure — it might be a ‘core’ feature. It might be an essential MVP feature. But so is processing a transaction or enabling the user to navigate your website. Resist the urge to focus on it simply because it’s different.

Example

While white-labelling AlbumExposure, we were tempted to roll the image watermark feature into the white-label feature because they were so interlinked. “But this is the client’s brand!?” We argued. No, it’s not. This is part of security, not branding. We de-scoped watermarking from our white-label feature.

Abstract Thinking

As designers (of any focus), we naturally approach design problems with a designer’s mind; full of facts, best practices, aesthetic preferences, current design trends, knowledge of software, etc. But when designing white-label apps, most of that has to get thrown out the window. Why? Because many brands. Abstraction is how to do this.

Think outside the box

Successful white-labelling requires an unusually open mind because the circumstances are equally unusual. The simplest place to start is to go back to the basics: The best practices of branding, usability, accessibility, maintenance and interaction. Designing an iOS app? Your first port-of-call should be the basic SDK-supplied interactions and screen layouts. Why? Because people know them. That’s a basic.

But it’s not all about simplification, either; an SDK can’t always cover every base. That’s especially true when white-labelling because you’re designing something to change on-purpose. There isn’t an SDK for dynamically-changing button colors, or a toolkit for automatically retaining good readability regardless of text color. To successfully white-label, sometimes you have to get creative and invent your own solutions.

Brand guidelines

99% of the time it’s simply impossible to perfectly uphold the rules of every brand guideline who’s company might use your application… let’s get that out of the way real quick. So now what?

Aim for the 99%. This means going back to trends, common-practices and standards. For example: Most brand guides require logo placement at the top of a page, but less common is saying it always has to be left-aligned. Lots of brands center or right-align their logos…

That’s why, when white-labelling AlbumExposure, I put that option in the hands of the user. Your logo is going to be at the top, but how do you want it be aligned? At the same time, I removed the option for controlling vertical alignment. Aim for the 99%, and don’t worry about the 1%.

Example

When white-labelling AlbumExposure, we implemented an algorithm to convert the luminance of the user’s chosen background color into a scale of 1 to 10, based upon an 80/20 rule of how the human eye interprets luminance. We then used that scale to apply a CSS class (either .dark or .light) as a design-variance model for text, buttons and other UI elements.

This enabled us to simplify a control-pattern that was re-usable and robust — even if we changed the overall application design later on. This is also relevant to scope; we ideated a simple solution to avoid maintenance overhead while retaining positive usability.

User Experience

The function of branding is the steps a user must take in order to implement their brand, or white-label version of the application. The most common methods used are wizards, simple navigation and builder mode, and the choice really comes down to finding the right affordance for your application.

1. Simple Navigation

The simple navigation method is just that; simple. It is seamlessly integrated with the application’s navigation menu — often in a Profile or Settings page and typically uses simple forms.

Example: Simple Navigation

AlbumExposure’s white-labelling controls are all mutually-exclusive and don’t inter-rely on logic. Here are a few screenshots that show our implementation using simple navigation.

Logo, position & bg color

The default branding page in AlbumExposure contains a simple web form with the logo upload, logo horizontal alignment setting, and page background color.

Automated logo size

The CSS file constrains the logo image to a max-width and max-height.

Album Presentation

In our simple navigation model, we supplied controls for how the album images are laid out in a presentation, as well as some global controls for URL and default language.

Communication branding

AlbumExposure supplies control over communication branding, so that automated client emails reflect the company’s brand.

Pros & Cons

The downsides of this approach largely amount to the difficulty of logic-implementation; if the results of Option A have an impact upon the results of Option B, then problems ensue. Additionally, if your white-label implementation has a plethora of options (which probably get into the ‘logic zone’), then your user might be forced to spend an unreasonable amount of time and cognitive load on that single feature.

2. Wizard

The wizard is that step-by-step process we all know and love. It typically constrains related options to paged groups and walks the user through each in a linear process.

I couldn’t find an example for this one, unfortunately. Perhaps the most popular method of walking users through their branding process is a wizard. This means that they enter into an ‘enclosed’ process that is purposefully separated from the rest of the site navigation, for the purpose of focusing the user on the specific process at-hand.

Wizards — though a little dated — remain one of the most effective ways to enable users to complete a specific process without confusion or distraction. One example of a very successful ‘wizard’ is the checkout process at Amazon.com, where the entire site navigation is removed as the user is focussed on payment details, shipping address and method, and final checkout.

Pros & Cons

Wizards excel in keeping a user focused through a prescribed process, but usually at the potential expense of cognitive load caused by the nature of the wizard itself: inaccessibility of established navigation, user’s periodic inability to complete the wizard, and the standard additional load of a new ‘mode’ (to name a few).

The potential risks of a wizard are indeed high, but with high risk comes a high reward. Wizards can often accomplish complex (and logical) tasks far more easily than a form — especially when that form is split into multiple pages. If your branding process requires logic (such as changing a logo size based on various layouts), then the capabilities of a wizard might be the right choice for you.

Many white-label-able applications simply include the white-labelling process in a wizard within the initial account setup process. While this can indeed dramatically increase setup time, the final satisfaction may be worth it. You should measure the value of each white-label feature, curate brutally, and then measure completion times based upon user testing.

3. Builder Mode

The builder mode typically offers an unguided, WYSIWYG preview as options are changed. See the example from Big Cartel.

The builder mode has aspects of a wizard, and aspects of simple navigation, but wraps it up in something that is greater than the sum of its parts. Builder modes typically have a ‘preview’ to show the user what their changes look like in real-time. I call them a ‘mode’ because they are — the layout differs dramatically from the rest of the application (because a very unique process needs to be wrapped in a very unique layout.)

Builder modes usually do not have any process — they dump all available options into a single UI. Because of this, it’s easy to overload the user with too many options in one place. But the power of a WYSIWYG preview might be worth it.

Example: Builder Mode

Big Cartel’s builder mode offers a very comprehensive set of options — perhaps too many. The typical logo, background and font are present, alongside a huge amount of color and layout options, all nested inside a Preview mode whose layout and interactions differ from the rest of the application.

Subdomain in signup

Big Cartel integrates the new user’s custom URL into the signup process.

Builder Mode

Big Cartel offers a very comprehensive builder mode, with several color, font and layout options.

Pros & Cons

Builder Mode excels in avoiding potential UX pitfalls of a Wizard while offering a preview and many options. That’s probably why we’re seeing this method used more and more often. Perhaps the biggest benefit of this method is the Preview; we can show users exactly what their options look like in real-time.

The downsides are few, but significant. Most builder modes are just that — modes. It’s another page layout, set of interactions and experiences than the rest of the application. This inevitably introduces a higher mental load. Digging a little deeper, builder modes are often not seamlessly integrated with content, which can make it difficult to give the user an accurate preview. (However, WordPress does this particularly well with their ‘Customize’ menu.)