Establishing a Visual Language for Enterprise Software

Enterprise-Level Design Produced by a Start-up Sized Team

Mark Malek
SAS Product Design
Published in
5 min readAug 26, 2019

--

A well-designed consumer-level application is focused on the individual client’s needs. In contrast, an enterprise-level application is created for hundreds or even thousands of users who not only need to perform individual tasks but also collaborate with a variety of teams. The individuals using these applications produce solutions for the organization as a whole and not for one particular individual or client. The ease-of-use of these applications directly affects the user’s ability to perform their assigned tasks. As these applications often require the ability to sustain large amounts of data as well as perform an infinite number of functions, the interface can quickly become convoluted and overwhelming. If aesthetics are not prioritized along with functionality when designing for these applications, any given user’s job performance is ultimately at risk of deteriorating.

While our business-level solutions are powerful and feature-rich, little to no focus was given to aesthetics or user testing in order to meet our ambitious deadlines. For many years, the design team at SAS was small and simply not able to accommodate the number of solutions produced by our development teams. When products that accommodated our aesthetics launched, they were well-received. As a result, our team began to grow and gain traction throughout SAS, which helped even more products achieve the same look-and-feel. Somewhere along the way, we realized that we could evolve our world of data into a world of intelligence.

The Design team at SAS believes that the union of research-based and user-tested software — with a beautiful and consistent visual language — is at the forefront of a cultural shift in design thinking for enterprise application design. We believe that by encouraging stakeholders to focus on their users through usability and design, they enable themselves to deliver beautiful, yet powerful applications to users of all abilities.

We advocate for users. We push boundaries. We reveal intelligence.

While redesigning our visual language to accommodate hundreds of products is a challenge in and of itself, many unexpected complications revealed themselves as we continued to push forward. Our deliverables needed the flexibility to work for solutions built in different languages and platforms. Visual discrepancies and disrupted user journeys between products had become commonplace. Most importantly, buy-in was needed from all parties in any given development team to produce the best interface possible. Sometimes the communication needed to accomplish this has come at the price of a delayed release date.

We knew that for us to reach the widest audience possible with the least amount of miscommunication, SAS needed a centralized resource for our visual language. Outnumbered, but determined, our small team of 8 designers made a giant leap and published a Visual Style Guide that was made public to our 13,000 internal employees. The effort was the first of its kind at SAS and is now used across the design, product management, and development teams. We now influence the design, structure, and implementation of our entire product suite.

An Enterprise-Level Audit

Our very first step to creating a visual style guide was simply cataloging what was already in use amongst our existing products. We gathered as many high-fidelity mock-ups from designers and screenshots of existing builds as we could to be sure we looked at past intentions as well as final implementations. We printed every single page, began to identify any common patterns, both visually and functionally. We grouped them together where applicable and hung them up on the wall. This gave us the holistic view we needed to start establishing the essential elements for a comprehensive visual design language.

Examples of some of the screens our team found during our interface audit.

At this point, we were able to give ourselves a very intense design critique as a team. We discussed and debated every little detail until we were able to pinpoint which pieces were working across solutions and what we could do to improve them. These details could be anything from how many image tiles we should have on a landing page to the intensity and spread of a drop shadow of a pop-over, to the exact spacing and alignment of buttons along the footer of a dialog. We all had reasons for choosing the styles we did for any given product, but we really wanted to figure out what styles were already working the best for the organization as a whole. We weren’t seeking a redesign, but instead enhance the existing foundation.

Across our products, we examined very different styles in use.

The elements we decided to keep, such as colors, shadows, padding, alignment, states, and text sizes, helped lay the groundwork for overarching guidelines. These seemingly small details are the most critical when creating a software design system.

We examined the styles which made up these differences and used the most successful ones.

Our Own Advocates

To successfully implement a brand new visual language, we would not only need specific guidelines but also the support of our entire visual design team. We all needed to become advocates for the system to ensure the execution of our styles made it to every product.

Since each designer was assigned to a different application at SAS, everyone brought exciting ideas and concepts to the table. The collaboration gave us a sense of ownership and pride of the visual language we created together, and also the motivation to keep iterating and improving every day.

Opinions are my own.

--

--

Mark Malek
SAS Product Design

Senior Product Designer @ SAS Institute. I’m passionate about solving enterprise sized problems by combining collaboration and beautiful design.