Case Study 2: Enterprise Design System
Lead the modernization of a design system with the creation of its foundation, components, and documentation.
Our team was brought on to continue and course-correct the attempts of another consultancy to lead the modernization of DDS2, the second generation of the Dell Design System.
Projekt202 was fortunate to work with Dell over many years on many different engagements. And every project had a slightly different set of visual and interaction guidelines (this was before people were using the design system name). Which in itself wasn’t a bad thing. But what was bad was that the new guidelines were not applied to the previous applications. This was for many reasons, new and different platforms, different leadership and management (cursed silos!), evolving and experimental technologies, you name it. In addition, many would continue to live on alongside their newer generations of applications, each slightly more different than the previous.
There were a number of challenges on Dell’s design system front. One of the biggest was the number of design systems (plural!) they had. They had been on an acquisition shopping spree for several years and many of these new Dell citizens had taken on superficial updates to their existing design systems as an attempt to blend in with their new host. Usually in the form of a quick type and palette refresh band-aid until a more universal makeover could be initiated.
This resulted in a lot of uncanny-ness across the various applications in Dell’s ecosystem. None were necessarily offensive but they just didn’t quite blend seamlessly with the parent. They were all Dell-ish but not quite Dell. This was particularly jarring as users bouncing between various apps would notice many little inconsistencies which would seem to magnify over time.
In addition to the style makeovers of the acquisitions and the incremental refinements to native Dell UX/UI guidelines, the Dell brand also did not stand still. Each revamp of the brand, no matter how subtle, was not followed quickly enough, if at all, by their software.
There was also the issue of accessibility, All of that legacy software and re-skinned acquisitions were behind the times in terms of accessibility.
One of the side-effects of the parallel lives of these quasi design systems, and legacy applications and acquisitions was that they were Just. Plain. Dated. Not just visually, but technically. Many of the applications were not responsive or able to be localized – remember, Dell is an international player with users all around the world.
Our mandate was to unify the styles and create a modern design system that Dell could propagate across their various software and could continue to evolve in a way that didn’t leave any important applications behind.
One of the essential factors with staying up to date was to get and keep Brand™ involved in the process. This would ensure two important things:
Additionally, Dell’s accessibility team, the Accessibility Center of Excellence (CoE) was also a constant collaborator throughout the engagement, ensuring that our system, components, and documentation met and exceeded the standards and best practices.
We also incorporated “pairing” into our working model. Each Amdocs designer and strategist had a counterpart from Dell. This ensured that we weren’t just prescribing foreign patterns, concepts, and language, but rather that we stay in constant contact with the Dell design team’s culture. We were an outside consultant and didn’t want to force a solution upon them but rather create a system with them and encourage and celebrate their ownership of the Design System. Not just in the corporate sense, but alongside their designers – who would likely be the first people to use and further evangelize it within their organization. This model provided a surprising amount of skill-sharing and everybody leveled-up during the process.
We created dozens of individual components for the system but first we needed to build the foundations. They had already developed a versatile and accessible color palette. The two other important elements of a design system are grids and typography.
We built a flexible and responsive 12-column grid system which easily broke down to 6, 4, and 2-column grids for viewports of different sizes. It could also accommodate a side rail for navigation or any other type of fixed element intended to live outside of the main content area. It also had three levels of density that a designer could choose from for their application and how much breathing room they felt appropriate. Looser, more comfortable grids for consumer-facing sites and apps, and higher density for productivity and data.
Dell had already established Roboto as their standard font for web and application use outside of their proprietary corporate and marketing fonts. We adjusted the display and headlines to create consistent scale through the different sizes. Comfortable, minimum line-height guidelines were defined for reading while still meeting WCAG text spacing standards. We also unified the vertical rhythm by defining vertical spacing between all heading and body sizes.
This engagement began shortly after COVID started and was not just remote but internationally remote. So together with our new Brazilian designer colleagues we designed dozens of components after completing the foundations described above. Here’s two of the more interesting ones.
A fun one that was simple on the surface but had a surprising amount of complexity was the pagination component. You’ve seen these everywhere – beneath tables, lists, carousels, slideshows, etc. But there are a lot of decisions to be made when you introduce responsiveness into the mix. A pagination component under a table on a 1920px wide screen can fit all of its features:
That wide screen also has the room to display descriptive text labels on those buttons and have generous white space between the elements.
But what happens when the walls start closing in? We have to choose when to abbreviate; when to drop button labels; when to cut functionality; how to be economical but not compromise meaning.
We made the component in six different sizes – for extra wide monitors down to 288px for a small phone screen. In addition to the change in width, we also scaled the height. The internal elements stayed the same size but the padding and margins shrunk in order to scale along with the rest of the content on decreasingly smaller screens.
The most complicated component that we built was the advanced datagrid. We designed the datagrid framework alongside another pair of designers working on the simplified datagrid. The simplified datagrid was just that – a basic tabular structure for data with a small feature-set (zebra striping, sticky header, borders, and sorting). The advanced data grid was another animal entirely. Among its features:
This was 2021/22 and building components and patterns of this complexity pushed Figma’s feature limits (not to mention its memory management). There was and still is an art to choosing between building an uber-component with every feature and a set of components with efficient simplicity. We opted for the efficient simplicity model whenever possible and created a set of different types of cells to be combined into rows or columns as well as some patterns and templates with example layouts for designers to start from.
We consulted with another design team outside of DDS (but still within Dell) who was building an application with an advanced datagrid need to help guide us with real-world requirements instead of conceptual design in a vacuum. Their input and feedback were invaluable to the process and helped us create successful and valued components.
These new users and complex component sets necessitated rock solid documentation. We (the designers) took the first pass with the notes and presented them to the other designers, developers, and accessibility team for feedback. Then revisions were made, diagrams and screen captures updated, and then further edits were made by the writers and strategists before presenting to senior management and stakeholders.
Only after their approval would the component be added to the library; the developed component built for various frameworks; prototypes added to Storybook; and the documentation finally published to the public-facing DDS2 site.
Though our engagement reached its conclusion the design system was still not yet complete. But we left them with a solid foundation and an impressive collection of essential and advanced components and design principles. And most importantly, they had a repeatable process for design, development, and documentation. With these tools they would continue designing, building, and publishing components and patterns for their system.
And in the years since, they have just recently released DDS3 – their third version of the Dell Design System. Visually, it’s almost indistinguishable from what we created together – which is a testament to its timeless and modern aesthetic. It is at heart a modernization of the technical foundation taking advantage of the integration between Figma and many development frameworks and libraries that so many enterprise-level design systems rely on.