BIT DEFENDIR
•
UIPATH'S NEW PATH
The cloud-based RPA giant's down-to-earth design system.
CHAPTER
1/5
INTRO
In 2019, UiPath was growing fast. Deloitte recognized it as the 26th fastest growing company on its Fast 500 list, its valuation rose from $110 million to $7 billion in 24 months, and it was even a leader in Gartner’s Magic Quadrant for Robotics Process Automation. By this point, UiPath has solidified a clear leadership position in the RPA industry. However, its massive successes created new problems and challenges.
UiPath may have been growing too fast. With 26 offices around the globe, and a new rebrand on its way, it was clear almost immediately that internal governance was an issue. Teams were scattered and siloed and had no clear approach when it came to content or experience. They knew this and were ready to fix it.
CHAPTER
2/5
UiPath logo redesign
GOAL SETTING
Our team’s goal was to work with UiPath to restructure and redesign their digital approach for consumers and businesses and investors and decision makers. They had just rebranded with a new logo and promise to their audience. They were going to “reboot work” and we were going to give them a web strategy that embodied that through a new experience that shows UiPath enables people to focus on what they care about…even when that’s not RPA software.
CHAPTER
3/5
SYNTHESIS
Through our initial client workshop and interviews with RPA-adjacent audiences, we came out with a few key insights relevant for our design group:
Solving complex business challenges can be an exhausting slog of information and options.
UiPath’s website should provide relief from the slog. This means reducing the number of pages in a prospect journey and using a bite/snack/meal approach to give users the right content at the right time.
RPA and the UiPath website are for everyone.
The website experience should accommodate all users types, prospects, customers, Lines of business, IT decision makers, learners, and investors. Highlight customer success stories to demonstrate how we do business with any audience.
RPA transforming work is exciting. The site should be too.
Build excitement for the brand and the solution through the web experience. The site should have an open, yet structured design and make the most of the bold unique color palette to set it apart from the competition.
RPA is sophisticated…not complicated.
You don’t need jargon and minute details to prove that you have a robust and sophisticated product. Use simple, human language and explain the benefits of UiPath.
CHAPTER
4/5
THE REDESIGN
UiPath has 4 main values that are central to their purpose:
Values are a great place to start when concepting, these words and expressions were precisely chosen to capture the company’s ethos. We worked with all the clues UiPath gave us — values, logo, brand shapes, brand colors — to create our first deliverable: the style tile.
Style tiles initial exploration
Style tiles are a visual representation of the digital experience using typography, color, icons, and texture to shape initial brand direction. They are a way to quickly identify which direction to go or not go, a scattershot of concepts that should provoke a gut reaction within the client.
With each round, we would drill closer and closer to the direction we would create a design library out of, and we gradually started collecting and documenting the elements and components we were using in these comps.
Final style tiles
Through refinements of style tiles and existing pages on their current site, we could narrow in on the weak points of the developing system.
CHAPTER
5/5
A NEW SYSTEM!
Since we were creating the design system for the site, we had to build out templates to act as guides for the rest of their 7700 pages. We picked a sample of 8 different types of pages that were related to conversion or highly trafficked and worked closely with content strategy to build out a proper content flow and structure that aligned with our research findings. The result was a completely transformed collection of pages with a vibrant and open layout.
Sample page for desktop, tablet, and mobile
While fleshing out the designs for the pages, our library of modules was growing. To maintain consistency and ensure a clean hand off to dev, I developed a framework that house the UiPath design system within Abstract and began documenting.
The system was based using Library files as foundational elements consisting of color, typography, iconography, and inputs, then linking those styles to then next level of components, then laddering those styles up to modules. That way, modules could be rearranged and combined with others to fit a multitude of needs as designers built out more pages.
A look at the documentation for the design library
This was also a responsive site so each file in the design library had to account for mobile, tablet, and desktop sizing. We had to be deliberate when it came to documentation and describe use cases, behaviors, and alternate states for all devices, so we established proper naming conventions and set up a file structure in Abstract that would guide and onboard any new designers/devs through the system.
With the additional inclusion of design principles and animation documentation, we delivered a new design system that UiPath can implement globally, fixing issues with internal consistency as well as providing a new experience to UiPath’s future site visitors. •
Abstract File Structure
There were some limitations with the direction we chose in terms of final handoff of documentation. Abstract was a useful tool in terms of file management and version control but lacked in commenting and documentation capabilities. For future engagements, we will look to design system management tools with documentation as a core functionality, tools like Invision DSM, StoryBook, or Zero Height.
©JOE 2021