UiPath
AI-powered business automation
UiPath is a leading software company in AI-powered Robotic Process Automation (RPA). Their remarkable growth journey in 2018 witnessed a staggering leap from $1 million to $1 billion in revenue virtually overnight.
Client
UiPath
Industries
AI
Automation
Services
Visual Design
UI/UX Strategy + Design
Design Systems
Measurement Framework
Customer Research
Usability Testing
Content & IA Audits
Agency
Ogilvy
Role
Lead Experience Designer
Date
2018
Objective
The UiPath web experience should match the exhilaration and relief that RPA’s transformative impact brings to the world of work.
Solution
ur team faced some truly daunting challenges: a vast website with thousands of neglected pages; a brand ill-fitted for the digital space; a convoluted product story and irrelevant case studies; confused customers and missed conversion opportunities. The list goes on.
We began by assessing analytics, talking to customers, and conducting audits of the brand identity, content, information architecture, and select competitors.
For our 8 month engagement to be successful, it would need to have immediate impact and be scalable for the future. When all was said and done, we’d deliver a robust, flexible, and expressive design system, a simplified experience strategy, and emotive copy and content guidelines to be applied throughout the site.
Above
In The Jetsons, George’s robot-maid Rosie brought him his coffee so he could work harder at completing his day-to-day tasks.
In UiPath’s world, robots complete your menial tasks so you and a colleague can grab a cup of coffee and discuss what’s possible.
When automation is designed with humans in mind, we can all do the work worth doing.
TOP RIGHT
In 1804 a French inventor named Joseph-Marie Jacquard unveiled what would become the widely adopted “Jacquard Loom.”
It worked by translating patterns from punch cards into commands that determined the lifting and lowering of threads. This significantly boosted the weaving speed for intricate patterns, increasing it by over twentyfold—from one inch to two feet per day.
Strategy
We have two minutes and two pages to make a lasting impression. Every page demands a meaningful journey to the next.
Visitors were spending two and a half minutes on the site at a time, going through about 2 pages. Half left after only seeing one page.
Guiding Principles
As with RPA, the website should be a relief
RPA and the UiPath website are for everyone
RPA transforming work is exciting, the site should be too
RPA is sophisticated... not complicated
Digital Brand
Expression
Brand Persona
If UiPath were a person, who would it be? Brand Personas help those designing and writing to maintain visual and vocal consistency, while avoiding traits that would take the brand in the wrong direction.
Humble but not timid
Listen, learn, and help.
Bold but not aggressive
Challenge, experiment, and explore.
Immersed but not preoccupied
Consider, reflect, and imagine.
Fast but not imprecise
Take action, preempt, and experiment.
Style Tiles
Visual explorations of the digital experience using typography, color, icons, and texture to get client feedback and buy-in early, and nimbly shape the digital direction before requirements and UX considerations come into play.
Humble
Bold
Immersed
Fast
Graphic Language
Melt down old rules and forge better ones
A primary ingredient of the UIPath graphic language is the uniquely shaped brand
Melt down old rules
and forge better ones
A primary ingredient of the UIPath graphic language is the uniquely shaped brand components, which sit precisely atop a dot grid. While the brand guidelines were great for print – in the digital space we found the rules were too strict, and didn't give the guidance needed for a layered, responsive application. As is often the case when translating brands into the digital space, we maintained the soul of the guidelines, but found many opportunities to thoughtfully and meaningfully change its body.
components, which sit precisely atop a dot grid. While the brand guidelines were great for print – in the digital space we found the rules were too strict, and didn't give the guidance needed for a layered, responsive application.
As is often the case when translating brands into the digital space, we maintained the soul of the guidelines, but found many opportunities to thoughtfully and meaningfully change its body.
.svg)
Dot Grid
The original brand guidelines stipulated the dot grid pattern size should correlate with the size of the logo, but fluid browser widths and various breakpoints on the responsive web makes this all but impossible.
Instead, the dot grid pattern and brand components are set on a unique 8px grid.
Brand Components
Elements within z-space
5. Primary Content
Typography, cards, iconography, buttons & interactive elements – set on column grid
4. Brand Components
Components’ extremes align to the center of each grid dot
3. Dot Grid
Variable opacities – set on unique 8px grid
2. Image
Alternate placement between the Dot Grid and Brand Components ( 3.5 )
1. Background
Solid color fields
Color System
Accessibility
meets flexibility
Like most brand guidelines, UiPath’s color system didn’t account for accessibility or versatility. Bright yellow and
sky blue text sat on white and light gray backgrounds. Secondary colors mimicked the Skittles rainbow, with no tints or varieties in value. We’d need an accessible, flexible extension to create an intentional, meaningful color system.
Like most brand guidelines, UiPath’s color system didn’t account for accessibility or versatility. Bright yellow and sky blue text sat on white and light gray backgrounds. Secondary colors mimicked the Skittles rainbow, with no tints or varieties in value. We’d need an accessible, flexible extension to create an intentional, meaningful color system.
ABOVE
Accessibility documentation and color usage
Color System
Color Themes for maximum expression
Color themes provide controlled, consistent variation within the design system, and uniquely express the digital brand to stand out from competitors. The themes are applied to full pages to ensure fool-proof cohesion for anyone using the CMS, no matter their proficiency in design.
Anatomy of a Color Theme
Content and background were delineated with strong contrast to allow for maximum accessibility and informational hierarchy.
The 5 Color Themes
We created five unique color themes to give page creators the ability to vibrantly express the brand, along with the necessary guidance of when to use which, and a general optimal ratio of how often each theme should be used.
The Design System
Responsive Design
Immersion on every device
The experience feels the same across all tablet and mobile devices, without sacrificing speed or quality.
New York, NY
Denver, CO
Bucharest, Romania
2018
New York, NY
Denver, CO
Bucharest, Romania
2018
