Visual Language Design
As a Product Designer at Nulogy, I was responsible for identifying, analyzing, and communicating user, business and design requirements to all product stakeholders. I lead user research and user testing sessions to inform the creation of project success criteria and the design of workflows, domain models, story maps, sketches, wireframes and prototypes.
As part of the Nulogy Design team I lead the design of Nulogy’s QCloud and GO applications and was one of four designers responsible for the UX and UI design of Nulogy's core application, PackManager. I was also given the opportunity to lead the work creating a unified visual design language that will be applied to Nulogy’s design system.
Objective
The purpose of this project was to create a visual design language that would unify Nulogy’s currently diverging applications into a single Nulogy Platform solution.
This is also an important and required part of Nulogy’s design system as this visual language establishes the standard colours and typeface styles to be used in the future.
Research
Stakeholder Interviews
The first step of this project was to understand the type of persona Nulogy wanted their platform to display. To do this, a platform personality survey was conducted as in person interviews with the main stakeholders in the organization including the CEO, COO, CMO and Director of Product.
The result of these interviews was a Visual Language statement that we could base a new typeface and colour palette on:
Dynamic, reliable and extremely resourceful. Nulogy’s Agile Customization Platform is action oriented and predictable, inspiring trust in all its users.
Our visual design language is recognizable and pervasive without getting in the way, efficiently guiding users through complex interactions and systems whether in the office or on the shop floor.
Typography Research
Typographic research first started by understanding the requirements of a modern web typefaces. We then pitted a selection of web typefaces against each other emphasizing things like our desired x-height, letter differentiation, overall text density while keeping in mind the personality of Nulogy’s platform.
Through this research, we unanimously decided to use IBM’s Plex typeface.
It checked every box in our requirements list and we felt it has the right personality and versatility to be used throughout Nulogy’s platform
The next step was to explore how Plex would be used throughout the platform, playing with things like font size, weight and line height.
Colour palette Research
The next step of the project was intensive research on how UI colour palettes are put together. Everything from web colour theory, how to properly create shades and tint of colours, and how other applications use colour in their design system. Given prior user research conducted, we also made the decision to commit to comply with WCAG AA contrast ratios.
Exploration
Style Tiles
Once the research was completed, I created a style tile wireframe and experimented with different visual treatments of realistic but not finalized UI elements, playing with both colours and typography. Two rounds of exploration and feedback were gone through before arriving at the final style tile.
Round 1:
Round 2:
Final Style Tile
The final style tile was chosen through consultation with all major stakeholders and then refined by everyone involved in the design system team.
The final style tile has the look and feel we were looking for; recognizable and substantial enough to guide users through complex workflows when needed while letting users get work done as efficiently as possible.
Final Colours & Typography
Once the style tile was finalized we were able to refine and finalize the new colour palette and typography to be used in Nulogy’s design system.
Final Typography Styles
The finalized font style create a clear sense of hierarchy within headers and body text. The line heights follow a reasonable proportion ratio while staying true to our 16px baseline grid.
Final Colour Palette
To finalize the colour palette we needed to update Nulogy’s main brand colours as we had found that they were not bright or saturated enough to match our Visual Language statement
The finalized palette revolves around the new “Nulogy blue”. The slightly brighter and more saturated blue allows all other colours in the palette to be vibrant, more dynamic and feel more action oriented. This new blue hue also influences all greys and blacks creating a unified palette.
We divided colours into three different groups based on their intended functions: Text and Interactive, UI and Background, and Contextual Colours. This helped simplify the amount of colours needed as well as clarified how each colour should be used.
Text and Interactive Colours: These colours are meant to be used in text and interactive elements. “Blue” is the main interactive colour and “Dark Blue” is the secondary interactive colour.
UI and Background Colours: These colours are meant to be used as page and element backgrounds, and UI elements such as line spacers, borders and dividers.
Contextual Colours: These colours are meant to be used sparingly in contextual elements such as error, warning and success messages and destructive actions.
Future of the Nulogy Platform
The last step of this project was to create mock-ups of existing application UI’s using a the new colour and typography styles as well as a rough version of a Nulogy platform-wide navigation.
Current QCloud Dashboard & Navigation
Re-imagined navigation with new colour and typography styles
Current GO Historical Order page
Re-imagined navigation with new colour and typography styles
Project Outcome:
Overall the project was received with lots of enthusiasm and excitement throughout the organization. Establishing a new visual language for Nulogy’s platform was not only key for creating a solid and stable design system but was also key in increasing the momentum and positivity behind implementing a unified design system in all different functional teams in the organization.