Automation Anywhere Web Design System 3.0

Design System User Interface

The main goal of this project was to modernize, and completely revamp the look and feel of not only the company’s corporate website, but all other customer facing subdomains for a consistent brand presence. To do this, I led the build-out and evangelized the adoption of an entirely new design system from the ground up, while managing a team of web experts.

Automation Anywhere Web Design System 3.0

Overview

Credits

  • Edward Margallo
  • Gurpreet Singh
  • Hermanpreet Singh

My Role

  • Principal UI Designer
  • Design Systems Architect
  • Design Systems Evangelist

Collaboration

  • Web Development Team
  • In-house Brand/Creative Team
  • Product Marketing Managers
  • Sub-domain Owners

Project Gallery

Planning & Brainstorming

Research & Analysis

  • Review and audit of previous design system
  • Pinpoint missing components
  • Pinpoint pain points with developers
  • Competitive website analysis
  • Studying other well-known design systems

Defining Requirements

  • Needs base foundations, core UI components and layout blocks
  • Ability to rapid prototype layouts with ease
  • Allows for templatization of key sections and pages
  • Adaptable to all corporate web properties
  • Easily understandable by fellow designers and developers

Kick-off Calls: Key Takeaways

After a competitive analysis, we had several kick-off calls where we discussed the general design and visual langauge that we as an orgnization wanted to embrace. Over the course of these meetings, we looked at brainstorming ideas for a new home page that would essentially become the foundation for defining the initial design system. Besides the obvious, primary point of site-wide consistency, our key takeaways included: 1) A modernization of visual style though miminmalism 2) From a content style guide standpoint, an emphasis on heading typography and presentation, and 3) A more focused, and toned-down, usage of our brand color system (not only through CSS application, but through actual image assets).

Design & Build-Out

Feedback & Iteration

Feedback Gathering

  • Continuous adjustment and audits applied to current components as new content strategy docs and requirements were rolling in
  • Sub-domain owners and key development team members provided feedback on usage and areas of improvement for certain use cases
  • Reporting back to the development team for updates to the design system

Updates & Evolution

  • Net new UI components and content blocks added as needed
  • Sync with senior designers for update reviews and library publishing
  • Continuous improvements to the image style library

Next steps…