/ Terra Design System: AI-powered Apps for Enterprise Business

Streamlining design: reducing technical debt, aligning teams, and delivering better products with a unified language

Situation:

In building an experience team for a nascent startup building an AI-based platform for enterprise apps, I faced a variety of challenges. Among the challenges: a lack of UX standards and consistent application, issues with iteration speed and progress, development hand-off issues — all resulting in high costs and inefficiency for development downstream. The solutions implementation team was struggling with these inefficiencies as the company grew, leading to significant challenges in maintaining consistent design across various products. The lack of a centralized system for UX patterns resulted in duplicated efforts and wasted time, as designers repeatedly created similar components without a unified approach. As well, platform clients were designing their own patterns without guidelines, contributing more chaos and redundancy. A lack of governance not only increased workload but also led to a disjointed user experience, where similar functionalities were expressed differently across various solutions, causing confusion for users and diminishing the overall effectiveness of the final products.

The Business Challenge:

  • Enable the platform to rapidly deploy apps with reusable components
  • Save money, time, effort in design and development
  • Reduce potential design and technical debt
  • Create mechanisms for collecting tribal knowledge to train the AI
  • Design componentry with a future vision of automated UX in mind

The Audience:

  • Internal and client platform developers
  • Internal and client UX designers

Target industries:

  • Utilities
  • Energy
  • Healthcare
  • Procurement Sector

My Role:

Creative direction, hands-on UX and interaction design

My Approach:

I set out to create and institute a common design system/language to be used across the platform for rapidly designing and deploying AI-powered enterprise apps. In creating a common design language, we would be able to speed up the design process, increase re-usability, and reduce design and development costs, while delivering a more consistent and usable product.

Solution:

As a foundational source of truth, we documented basic and flexible UI standards

Basic UI elements and general usage guidelines were defined to ensure executional consistency. The system was created as intentionally basic and flexible - to be skinned and re-imagined for different client branding and style needs.

Documentation examples of basic UI elements

Create efficiency and cost savings downstream with reusability

A library of common reusable components and repeatable patterns used in our solutions were documented — ranging from simple functionality to advanced multi-part components. With this, we were able to expedite the design process, efficiently reuse components, and effect cost savings downstream.

A sketch library containing common UI patterns was utilized and maintained by the UX team
Tribal knowledge collection and feedback loop

The platform required unique UI patterns for capturing tribal knowledge

A core feature of the app platform was to provide provisions for users creating annotations to collect and activate institutional employee (tribal) knowledge. This data is used to improve and train machine learning models, and provide more accurate correlative and predictive capabilities. This presented a unique and ambiguous challenge in anticipating how and when this might theoretically be used, and what types of information needed to be expressed.

Ideation sketches for tribal knowledge collection and feedback loop

Expeditious techniques and processes were adopted for rapid ideation and exploration

For the unique tribal knowledge capture functionality, rough sketches with a digital drawing tool were used for early explorations and for providing initial creative direction. I was able to quickly flesh out ideas and validate them with leadership early, before executing high fidelity design. At times, these sketches were even used to produce rough interactive prototypes. These techniques continued to be used on a regular basis in working with stakeholders for solution implementations.

A saffron yellow color emerged as a key visual indicator carried through all annotations mechanisms to cue the user that they were in an annotation mode

Inspiration was drawn from social media type mechanisms to create an intuitive familiarity

Annotations were intended to be applied to any element type in our solutions, so many potential use cases had to be considered. Basic text annotations seemed to be a natural starting point, and so we brainstormed on how a user might intuitively express meaning in various ways — exploring text input, entity tagging, correlations, context, data issues, sentiments, etc. Striving to let the user provide information in a simple and familiar way, I drew a lot of inspiration from social media type interactions.

We started first with various ways to annotate text due to project needs

Annotation patterns were designed to be flexible, extendable, and scalable to various more complex interface element types

In addition to textual information, annotating other information types such as tabular, temporal, and spatial information needed to be considered, with an eye toward a future of annotating more dynamic information such as video and image sequences.

Spatial and tabular data annotation patterns required more advanced tooling for these more complex annotations

Reflections & Learnings

Instituting a design system smoothed out UI dev operations

By creating a library of high-quality patterns and guidelines, and a source of truth for our designers and UI developers, we were able to solve design problems in fewer cycles, and expedite efforts downstream by working more efficiently and consistently. The result being a more unified product experience for our end users.

Exploring threaded anotations, sentiments, clusters, and expressing machine-generated annotations