The Aristotle Project documents a design system I created in 2017. The 3-part series explains the major steps taken towards the completion of the project and rationale associated with each step.
Part 1 – Distributed Design Strategy (here) discusses the scope and how it was defined through Experience Workshops.
Part 2 – End-to-End Brand Experience focuses on how I brought the Product Design Strategy together with a post-merger/acquisition rebranding, for an end-to-end brand experience.
Part 3 – Living Documentation discusses through examples, the process of defining patterns, creation of the sticker sheet, Adobe Creative Cloud design assets, the Craft Library, and publishing the specifications to a WordPress site as a guide for both designers and developers.
Design Strategy
Aristotle - Distributed Design System – Part 1
When someone talks about their "pride and joy" or a piece of work they executed on with everything they had, this one is the Grand PooBah of my career and this one I call Aristotle. Before I go into detail, I feel a huge round of applause for the people involved is in order. So hats off to HEATSoftware's; Bernd Ewert, Greg Clancy, Ralph Garcia, Arlen Beylerian and the entire HEATsoftware organization.
What is Distributed Design
Distributed Design is the concept I practice in evolving the design strategy by distributing ownership at an early stage. By collecting internal stakeholder feedback in a highly collaborative environment facilitates internal alignment and assumptions that can be tracked, tested and measured against external stakeholder feedback. Distributing ownership helps to remove subjectivity from driving design, preventing sudden shifts in direction for a focused design life-cycle.Creating a common understanding from the beginning is important in order to gain the support needed for the time it takes to document the strategy, test and collect qualitative data that informs the strategy for design. The first step I took in this process for Aristotle was hosting a Brand Experience workshop with all the key stakeholders.
Brand Experience Workshop
Facilitating a Brand Experience Workshop provided me with an understanding of how stakeholders perceive visual cues and how they wanted the product to be perceived by users and customers. Having the conversation as a group creates synergy through a common understanding which helps move the design process forward more efficiently. When everyone is aligned, decision makers know where the direction is coming from, and why.
In the Brand Experience Workshop, I facilitated the conversation, while another took notes. The notes are a collection of words that came up during the conversation and grouped into themes. Those themes become high-level concepts that drive a unique design direction. I've always referred to them as "Drivers", as it turns out, Cooper Design refers to them as Word Clouds. Regardless, they serve the same general purpose of mapping design to data of how stakeholders want our users and customers to perceive our product. Below is a picture of the wall I hung images on to lead the conversation, and to the right are the Drivers.
Mood Boards
The next step was to bring a little more context to the process. Using mood boards furthers the discussion by presenting ways graphical treatments can support a design direction and aligns my understanding of their perception of visual cue. I use the mood boards to validate my assumptions in abstraction, rather than UI mockups, in order to keep the conversation focused. What one might consider to be elegant and minimal, others might consider to be dull and boring.
I used two mood boards to represent each concept, or Driver. One with imagery unrelated to the product, and the other of UI trends and treatments. As a result of the presentation, two directions were selected to move forward with next steps in establishing the Design Direction with mockups. Below are the mood boards I presented. Each board has the Drivers in the center, surrounded by imagery, in order to keep the audience in context of the concept the imagery supports.
Primary UI Mockups
Styles were derived directly from the mood boards, and applied to mock layouts, in order to demonstrate how the selected Drivers could be applied, in a tangible context. Since the product was at an early phase, I took some common page layouts associated with similar types of products, and applied the treatments. Based on the UI re-skin, the audience was fully on board with the Trend-setter direction, which allowed me to work independently, factoring all their feedback into my design decisions, and focus on developing a Style Guide and Pattern Library.
A/B Testing
At this point, the only data collected was internal, which is enough to move forward based on perception, business objectives, drivers, and company values, but no user/buyer validation. A comprehensive A/B Test was conducted and the Trend-setter direction was selected.
