In 2016 AgilePoint launched AgilePoint NX v6.0, and for the next few years, the separate teams created their own unique styles without having any documentation and guides. The product got a lot of inconsistencies. When I join to the company in 2019, I started defining how to improve the end-to-end design process to increase the usability and consistency of the current product.
After discussing with cross-platform teams and stakeholders, we decided to redesign the AgilePoint NX platform. As a starting point, I initiated and led the creation of the first Design system that also helped build better collaboration and communication between teams.
UI/UX Designer
Myself / Joohyun Park (Graphic Designer) / Nishant Shrivastava (Head of Product Development) / Subramanya Sharma (Project Manager)
Sketch, InVision, Figma, Accessibleweb.com (WCAG Checker)
5 months
I started exploring all the use cases of the standard UI elements like typography, buttons, colors, checkboxes, radio buttons, tabs, drop-downs, etc., in the current product to understand the inconsistencies better. After that, I conducted a competitive analysis for common components used in other design systems. Then I developed design options and reviewed them with stakeholders. After a few rounds of iterations, I finalized the design and documentation. Lastly, the India engineering team and I synced for handoff and implementation.
We decided that this was an excellent time to refresh the color palette since one of the main problems to solve was to ensure the colors passed the accessibility contrast test so that “EVERYONE” would have a better experience. Also, we wanted to help guide the user to important elements on the screens by new refreshed colors that provide a bit of pop that feels lively. I defined AgilePoint Blue as a primary color because it builds trust, a feeling of loyalty, reliability, and responsibility.
.svg)
All typography used in our platform appears inconsistent in terms of style, typefaces, hierarchy, and line spacing. By analyzing and understanding AgilePoint's typographical needs, which include a die-hard focus on legibility, efficiency, and localization, I have chosen the "Roboto" font family and predefined the weight, sizes, and line spacing.
.svg)
One of the main problems was that the user didn't get feedback on the interactive button (no hover, no pressed states, etc..), which led to confusion. I defined a total of 4 button states to improve user interaction. I also divided recent buttons into the Round, Outline, Text, and Authentication categories to decrease visual variances that are not necessary.
.svg)
One part of our product contains an activity library section that includes about 50+ categories, and each of them has Utility icons that identify labels. In total, there were about 450 of them. They weren't consistent regarding varying shapes, styles, and designs.
After a discussion with a team, we decided to redesign all of them. To ensure that we will have consistency in the future, I initiated the creation of Icon anatomy since the total number of icons is increasing from time to time.
.svg)
As part of the Design System, I initiated creating illustrations with the hope of bringing more visual language and personality to the product and delight and emotional connection with our customers. I defined three types of illustrations as "Setup/Informative," "Empty," and "Spot":
They help guide the user to the following action and often represent a single concept. Each image serves the purpose of conveying a message.
These illustrations hope to delight and better the user experience on empty state pages.
They are simple shapes and do not require interpretation. Also, they do not rely on emotions.
.svg)
As a part of the Design System, I have created reusable UI components like checkboxes, radio buttons, notification messages, drop-downs, etc., to provide intuitive and consistent user experiences. Hence "Everything looks and works the same way.”
.svg)
We increased efficiency through a structured process (design thinking) applied to the Design System and improved the collaboration between cross-functional teams.
Our product got consistent aesthetics and functionality, creating a better overall user experience, and improving learnability, brand awareness, and error reduction for our customers. As a result, we got positive feedback from our customers.
This was a great experience for me. I’m glad that I got the chance to explore the inner workings of a simple design system, and I’m excited to take this to the next level.
I learned that consistency is fundamental because it creates an experience that users can rely upon every time they interact with the product. It also helps them create a sense of structure and understand more about your product, idea or message which can lead to the significant impact on a product success.
