Lessons learned from designing a white-label product
Over the past fifteen months I have been leading the design on a white-label product. Here I reflect on the lessons I have learned from this process.
Colour takes on greater meaning
My first observation was the feeling of restriction. This was the first white-label product I had designed and I started in a fashion similar to previous projects. After user research, process mapping and low-fidelity mocks were all complete, I began the hi-fi design stage in the same way as any other. I had confidence in the visual hierarchy so I began to use colour to convey meaning. Once I had certainty in the final product visual design, I obtained client brand assets and began to fuse their brand into our product. It was at this point I noticed colour conflict. A product colour I had selected to help assist and depict interaction was too similar to the clients brand primary colour, the only difference being on the saturation scale. Here I faced a conundrum. Our client will not change their brand colour and I wouldn’t expect them to do so, nor would I even pose that question, yet the product colour I had selected was the most appropriate and recognised especially in western culture. At this point I began to reassess all use of colour within our product.
I decided to map all product screens onto a nearby whiteboard. I specifically chose three versions, two of which were full colour containing the primary colour of our client’s brand, the final product map was a monochrome vanilla view of our product. This process enabled me to judge the effectiveness of design aspects other than colour; white space, typeface and type weight, alignment, position and balance. This exercise proved to be enlightening. Not only could I determine if additional colour within UI was useful, I discovered the importance of other design principles which play a greater significance within our product than the use of colour.
Taking my design thinking a little further “high-level” I printed a subset of the user journey screens and tested each primary colour; red, blue and green acting as a client brand colour. Here I discovered that basic web/UI colour meaning and colour association may cause confusion to our users when interacting with our product. In the western world, red largely represents warning/danger/destructive interaction and green represents success. How would users respond to a product that used red to indicate primary actions such as ‘save’ or ‘continue’? Would they question functionality, would we slow down their thinking time, would it increase cognitive stress? These questions were being raised and they were all good questions.
I subsequently decided to strip all colour away from our product UI. I made the decision that we would incorporate client brand colour for primary actions only and any additional colour outside of our client’s assets would only be used if design elements such as typeface, alignment and white space were not successful in describing user interaction.
Producing a white-label product that requires a primary client brand colour also exposes the need to understand the difference between foreground and background colour. This leads me into my next discovery… contrast.
Contrast
Our product UI consists of two button types; primary and secondary. The primary button visual uses the client primary brand colour for the background with white text acting as the foreground. For each new client, I assess the colour ratio in accordance to WCAG and make small adjustments if required. Our secondary button reverses this setup using the client primary brand colour for the foreground text with white acting as the button background. The secondary button did not contain a border.
During user testing I discovered that the content absorption rate and interaction rates reduced for one or two clients with a vibrant, high luminosity primary colour when interacting with the secondary button type. I began to research this topic and learned that approximately 50% of us have astigmatism (myself included) and consequently this effects the behaviour of our iris when being exposed to different light levels. Text more accurately reflect this when comparing the differences between white text on a black background compared to black text used on a white background.
A background element has a greater mass than a foreground element. White backgrounds cause the iris to close, reducing the volume of light it receives. The closing of the iris, reduces the “deformed” lens (the cause of astigmatism), therefore bringing a sense of focus to the characters. With this knowledge in mind, I made the decision to replace the client brand primary colour with dark text for all secondary buttons and to increase the affordance of the button element, I introduced a grey border which was omitted from the original design.
UI flexibility is important
In past projects, I considered user interface flexibility and scalability, often trying to predict future changes and how I might incorporate these into the design. Similarly, to colour, this was a process I underestimated when creating UI for a white-label product.
Initially I positioned the client logo centrally within the application header. It was placed centrally as the application header also consists of two other interaction elements, one of which is traditionally and expectedly positioned top right. The other element is an element specific to our platform and one that once introduced to the user, not only “makes sense” being placed top left but the UI explains that the element will be positioned here, providing the user knowledge and expectation. As our application adopts vertical alignment for all content and components, this was the final reason to position the logo centrally.
I considered the surrounding white space and height of the application header to allow for brand guidance that specifics minimum logo sizes.
However, our first client requested that in accordance with their brand guidance, their logo must be positioned top left, at all times. F##k.
Unfortunately for myself and our team, this information arrived later than we would have liked as we had already begun the project build. Heading back to the whiteboard I produced mocks that positioned the logo top left, centrally, top right and at the bottom - noting consequences and opportunities with each position. I also explored what impact horizontal logos may have over square or landscape orientated logos.
After discussing the variety of options with one of our front-end developers, I studied all other UI brand elements and reconsidered how changing their positioning would impact on our product’s UI components.
This undertaking widened my mind-set and thought process for user interface flexibility and scalability. Not only is it important to consider how the wider UI may grow and respond to time changes, devices changes and future product requests, I’ve now learned to consider all UI components that construct a page, their relationship to one another and to consider what impact any small positional change will have on the entire UI.
This leads me onto my last point; clients can be fussy.
Clients can be fussy (this is a good thing)
I’m thankful to this white-label product as each new piece of information and knowledge I possess is a result of working with numerous clients and their brand assets. Working with clients provides the opportunity for designers to not only learn how to work with client brand assets but it provides the opportunity to learn WHY the brand looks the way it does and what measures are required to keep it looking this way. It opens your eyes to consistency, visual patterns, other teams thought process and in some cases the history of the brand. The more successful the white-label product, the greater the opportunity to learn about more clients.
Working with clients opens your designer mind. As a result of this product I now make greater design considerations at all stages of the design cycle. I now try to solve answers to questions I would previously not have even asked, I consider all aspects of a design, constantly asking questions “is this critical to the user experience?”, “will this be successful for Client A in addition to Client B?”, “what impact does it have if this element is moved, is there a new opportunity?”.
Knowledge is also reciprocal. Working with clients on a white-label product gives you the chance to ask them ‘why’. Asking a client ‘why’ is the best question a designer can ask as it opens the door to solutions. It prevents receiving client instruction that removes the opportunity for the designer to solve the problem (which is always frustrating) but it also gives the client the chance to think and learn about their request and their user’s problem. This creates collaboration, a greater respect for each party and ultimately a greater product for the end-user.
Leading the design of the white-label product has been an exciting challenge and one that will continue to advance my knowledge of clients, design and user experience in the future. Below I’ve briefly summarised my findings from undertaking the challenge of a white-label product:
- Design in monochrome to create content order
- Ensure visual hierarchy is evident without the need of colour
- Design multiple versions of the vanilla product using different primary colours to represent client visual
- Only use additional colour as an enhancement
- Question the use of additional colour at all times
- Keep contrast ratios high
- Don’t presume elements will always remain in a fixed location
- Move brand elements to obscure positions to realise impact, consequence and opportunity
- Ask your client ‘why’. Don’t take their solution
