Apr 02, 2020

by Orchard UX/UI Team

Creating the Orchard Product Design Guide

Here at Orchard, we have a vast collection of products on offer to customers across a variety of platforms and technologies. The user experience and visual look and feel of our products are very close to our hearts enabling us to create the best possible products and experiences for our customers.

So with this in mind, we have undertaken a journey to bring this ambition to fruition. There will be several trips and objectives we will need to create and bring to life along this road but we have already completed the first leg of this journey which is…

The Orchard Product Design Style Guide

So what is The Orchard Product Design Style Guide?

The style guide is a comprehensive “living document” which includes a set of standards, principles and rules that every designer, developer and product owner should follow in order to improve the user experience, look and feel and usability of our products. The guide allows us to have a shared record that documents the intended look and feel of our products. This reduces the risks for inconsistencies that may arise and allows us to produce the best products possible for our customers.

Within the guide, we have documented everything from simple elements such as colours, fonts, text styles and iconography right through to more complex elements and user interface components such as navigation, search and filtering all complemented with code snippets for developers to use as a reference.

The key benefits of having a style guide are:

Consistency – Having rules, patterns and elements all defined in one place gives us the ability to improve the user experience across our product portfolio for all customers. No matter what solution you are using it will feel familiar.

Reusability – Once the elements are defined we can build our products using these building blocks allowing the changes and enhancements not only to be created in one product but across all products over time.

Reference – The style guide becomes the reference point of our product design & development. The place where everyone can look at to clarify things and communicate with each other better. Designers go there to keep UI consistent and to reuse design patterns in new designs. Developers go there to find out how UI elements and patterns are used when working on products.

Research

The starting point for the project was to review all the products in the Orchard family to identify any inconsistencies across the product range over a period of time. Working with our Product Owners and customers we were able to gain insight and identify what needed to be done.

From this research, we identified the key elements and components which would need to be included in the new style guide moving forward ranging from small issues to more complex components. With these requirements defined, we were able to start the design process.

Design

The Orchard product portfolio is based on and around Semantic UI using the concept of building blocks which include individual interface elements and components like buttons, dropdowns, modals and elements that allow us to structure the products we create.

The design tool of choice for us is Sketch which is the leading design tool for creating, wireframing and creating UI design, used by over 100 million designers worldwide it helps us create our products every day.

Designing a style guide requires organisation and structure so it was important that we created the master Sketch file and library correctly to build the guide within it.

Each section of the guide is created using its own layer within the master file so it’s easy to view and update the individual artboards associated with that section. We created all the key sections needed including everything from the basic typography and colours related to the Orchard brand, grid system, key navigation, search, tables, modals, textboxes, filters, inputs right through to more granular elements such as messaging and tags.

Specific elements for each section were created on the artboards before being converted into symbols or components to be easily used across the master file and for export as assets.

For example, buttons were created for every style within the products such as primary, secondary and for every state that may appear such as primary, hover, focus and selected.

Typography, inputs, dropdowns and all other components were created in the same way to give guidance as to every state and piece of interaction that may occur within any element or component.

Publishing The Guide

To publish the guide for use across the business we chose Zeroheight which allows us to export and publish from Sketch to create a “living” design resource which is both easy to update and build upon.

Within the guide on Zeroheight elements can be selected to gain more detail relating to the style and attributes of an element such a hex value for colours, weights or heights for fonts as well as small .css code snippets to use if required.

Zeroheight allows us to quickly sync design and specifications seamlessly keeping the guide up to date at all times providing a perfect platform for everyone in the company to have access to what they need whenever they need it.

Rolling the guide out

With the style guide now in place we will be rolling it out across products in the future, you may have even seen some of the elements introduced into our products already such as in our Mobile products and within Service Charges for example.

This is the start of an exciting journey that we are embarking on and one which will help us to bring consistent and improved User Interfaces and User Experiences across both our current product offerings and new products for all our customers.

Thanks for reading and look out for more posts from the UX Team in the future.