Building Trellis’ Design System

The Problem

Trellis provides an enteprise software platform that helps manufacturers of cannabis products maximize their operational efficiency while maintaning compliance. Trellis' product team is distributed across two countries and 3 times zones. Over time, this structure created numerous inconsistencies in the product with different developers implementing components in slightly different ways.


Further, Trellis did not put an equal emphasis visual aesthetics and consistency. This decreased its percieved value, which was problematic because it was priced above competitors. The solution was to tackle these problems head on by building out a design system to unify the platform and elevate its visual appeal to match its functional superiority.

System Wide Audit


To begin this initiative I did a comprehensive design audit to identify inconsistencies and pervasive UX/UI problems.


My goal was to understand:

  1. Which components and interaction patterns were most prevalent?
  2. Where did inconsistencies exist?
  3. Were common components as intuitive as they could be?
The audit uncovered that the most used components were reports, buttons to take action, and data tables embedded within modals.

Prioritization Strategy



I sorted each problem by its impact on UX and how much effort would be required to address it. This brought into focus which components held maximum leverage. One such area was the information hierarchy as expressed through type and color.


Researching Design Systems


Despite fantasies of developing something from the ground up, I knew to maximize the chance of a succesfull adoption the system needed to be easy for the dev team to produce and maintain. With this in mind I began looking at existing design platforms that fit our needs and included thorough documentation. After auditioning several options we landed on IBM’s Carbon for its component library and material design for its type scale.

Type Sprint

Audit


To get an idea of the existing hierarchy of fonts, I recorded the all differences. In the end I found 12 sizes used in 5 weights. Since many of these sizes and weights were so close they served the same purpose, I was able consolidate the amount of fonts used to just 7 sizes and 2 weights.




Our guiding philosphy in selecting a font was to be as unobtrusive as possible while maximizing performance and legibility. After auditioning several typefaces on our platform and taking input from the dev team we, System Fonts would serve us best. This renders San Francisco on Macs and Segoe UI on Windows PCs.


Color Sprint

Another key to improving the information heirarchy in the platform was addressing colors. To prioritize my efforts around colors I considered which improvements made the greatest impact on the actual user experience.
The problems I sought to address were:
  1. The overuse of primary buttons which made it unclear which action the user should take next
  2. Buttons which were in a disabled state appeared to be active confusing the user in their flow
  3. Bright colors were used on parts of the interface that were not interactive and stole attention from those that were


Table Sprint

After creating a plan to improve Trellis’ visual hierarchy the next priority was updating our tables. Tables are by far the most used component in our system. There were several problems reported by users I sought to address.


next steps
  1. Navigating tables required a lot of left and right scrolling as many records contained a dozen or more columns
  2. The information displayed was not always relevant to the role of user and no method was given to customize it
  3. Filtering results was implemented in a unintative way which caused users to overlook the feature

  4. next steps

Impact

The impact to Trellis' information heirarchy and updates tables is already being felt.


door

Sales Conversions

The Sales team is reporting closing faster as users previewing the platform recognize it as more modern and warrants the higher costs.

support icon

Support

New users are being on-boarded faster as training times are reduced.

support icon

Collaboration

The product handoff process between design and development is running smooth as styles and typography is standardized.

Next Steps

The impact to Trellis' information heirarchy and updates tables is already being felt.


Improving the information heirarchy and tables of Trellis were the first 2 phases of a gradual role out of the whole system. In time it will grow to include additional components.



next steps

Role: Design Lead
Tools: Sketch


Other projects


trellis_booth

The Trellis conference booth that represented the product at various trade shows.



trellis_workflow

A flowchart to help new clients integrate Trellis into their existing workflow.

LinkedIn Profile Twitter Feed Instagram Feed SoundCloud

Adopted from Jeffrey Peltzman