Automation Anywhere Web Design System 3.0
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.
- Edward Margallo
- Gurpreet Singh
- Hermanpreet Singh
- Principal UI Designer
- Design Systems Architect
- Design Systems Evangelist
- Web Development Team
- In-house Brand/Creative Team
- Product Marketing Managers
- Sub-domain Owners
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
- 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
A design system is crucial for any creative team (design, content or technical) since it becomes the source of truth for building interfaces and experiences. While most importantly it requires adoption and support, the system needs to also cover several essential categories for it to be successful.
Covering the essentials: color, typography, grids, responsiveness and overall system usage.
Layout & Content Blocks
An extensive library containing numerous layout and content blocks for rapid page design in Figma. This section was key for consistency.
Component presentations were not the same in all cases, thus variations were made. In the library, designers can easily switch between the variants.
Each top-level, global component was designed to take into consideration presentation in all common device types and their respective resolutions, in both portrait and landscape modes.
Feedback & Iteration
- 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