Case Study 6: Design System
Company: Smartling | Year 2017 | Type: Translation SaaS Platform
Background
Smartling’s Translation SaaS platform was built with multiple technology stacks and design systems as it evolved to meet client demands. This subsequently resulted in having inconsistent UI as different design patterns created cognitive overload and a steep learning curve for both existing and new clients.
To make the platform more intuitive, efforts were initiated to create a unifying component library that can be reused and scaled to existing and newly created sets of functionalities.
Design Problem
UX / Visual Design
• Based on modern and standard web design practices, Smartling’s platform lacked a scalable design system.
• A lack of a responsive grid made different parts of the platform inconsistent with one another.
• Layouts did not adhere to any set templated guideline.
• Inconsistent design patterns resulted in:
• Having varying visual treatments for the same functionality led to confusion, steep learning curves, and did not meet users’ expectations.
• Lack of existing component library did not make development scalable.
• Visual aesthetics did not conform to Smartling’s branding guidelines.
Auditing the System to Find Differences in Visual Design
Before we began to commit to creating the visual design system, we had to run an audit on Smartling’s sitemap because there were multiple design approaches that were being utilized across the system. Once we were able to identify where the design patterns changed and understand which were newer versus older, we can then understand our technical constraints alongside proposing new design elements.
Component Library
Once we were able to connect with the tech team and assess older design ethos we were able to get rid of, we were able to commit to stress tests and subsequently finalize on the designs.
Elements
We took the atomic design approach, breaking down designs on a page from the most basic tangible element to functioning components.
Grid
Colors
Buttons
Form Components
Table Component
Filters
Stress Tests / Final Look and Feel
Once we've solidified the components and the overall direction of the visual UI design, we began to stress test or apply these components on existing pages as well as new features.
CAT Tool
Jobs Page
Workflow Page
