The Whole Is Greater Than The Sum Of Its Parts.

We knew that Strategic DX included a collection of uniquely branded digital products each with their own identities and user bases."

Identity design

The Challenge

At the close of 2018, one of our longtime clients approached us to design a website presence for them that would encompass their entire software suite. Strategic DX is a software company that produces a series of applications and SaaS products tailor-made for the automotive insurance industry.

We knew that Strategic DX included a collection of uniquely branded digital products each with their own identities and user bases. Our goal was to create a home base for all of the company's products to live and be indexed. We knew the challenge was less about visual design and more about information (and generally speaking - that is almost always the case).

A modular user interface design

The Grid

We encapsulated the design with a grid using the modular layout to present the individual elements from the suite of Strategic DX products. Grid-based design theory is well documented on the web and popular for a variety of reasons including responsiveness and rapid deployment. But for the Strategic DX site, we were less concerned with the grid as it pertained to the development of the project and more interested in how it presented a path to the meaningful display of our project's content.

The Bauhaus Grid

A Historial Glance

The practicality and structured format of the grid was investigated and celebrated in the Bauhaus art movement in the 1920s at the Weimar school. Similar design rules regarding form and position were conceived by Max Wertheimer and his Gestalt psychology in the same period of the early 20th Century at The New School (Gestalt design principles are present naturally within a grid-based design). In short, a grid design can accommodate all manner of shape, color, image, and type. For these reasons, the grid represents a useful template for web design - creating mass access to a set of proven and thoughtful design theories packaged neatly in a literal box.

Those of us who remember interaction design in the early aughts are already well versed in the concept of the grid, having had to leverage table-based design to create visual information on the web. For the Strategic DX homepage, the grid was the perfect format for the project.

Focus on Function

We housed and advertised the disparate products unified under the Strategic DX brand in the grid layout, creating a content hierarchy spanning the top of the page to the bottom. Grouped items in a grid denote similarity and help users rank the importance and value of visual content - intrinsically. This is important. "Similarity" is one of the basic Gestalt tenants we mentioned above (if you've actually been following along).

Choice

Hick's Law dictates that the more choice a user has to make, the longer they delay action. Taking this behavior into consideration we grouped and compartmentalized key aspects of the client's software where necessary - but remained respectful of the unique components on the homepage. The result is a homepage designed in a structured grid of calls to action, reducing the unnecessary and touring the suite of software.

The grid design layout

Motion

Subtle vector animations, video components, and content fades were added to gently introduce content as users scroll the independent sections of the Strategic DX site. These design choices helped us maintain our focus on organization but added some visual interest for visitors of the site.

Animated progress steppers

Component reveal animations on scroll

More page views/lauouts

Launch

The NADA event 2019

We launched the Strategic DX website last month just in time for our client's visit to NADA 2019 (the automotive industry's largest marketplace of products and technologies).

Recognition

Recognition from the CSS Design Awards