Trainual | 2020 - 2022
$2.5M > $10.5M | 3.33x
ARR  2020 - 2022 | yoy growth
2.5k  > 6.3K+
account growth
6
systems established
3
role transitions
Achievements & Impact
Explosive growth
Trainual ranked No 255 on Inc. 5000 2022 annual List for 2,113% 3-Year growth rate at $10mm ARR and 6.3k active accounts
Award winning product design
Achieved multiple G2 awards year over year, including best usability, top 100 software products and top 50 small business products
Product-led growth
Implemented product-led growth strategy focusing on activation, engagement and retention through AAARRR funnel
Strategic pivot
Drove product strategy transformation including building new features and pricing model, contributing to $27mm Series B
Lead & coach
Alongside design lead, scaled design team from 2 to 6 Product Squads while leading & coaching design system and growth squads
End-to-end R&D
Executed multiple product-led initiatives to enhance usability and product differentiation
Design System Foundations
Led development of saguaro design system, implementing component standards and driving cross-functional adoption
highlights
Highlight images are optimized for Desktop
2020-2022
Trainual
Saguaro Design System
Like its namesake desert plant, the Saguaro Design System demonstrates remarkable resilience and adaptability in complex development environments. This comprehensive system implementation has streamlined product development, improved consistency, and enhanced cross-team collaboration, resulting in ~50% faster design iterations and ~30% quicker development cycles - proving as enduring and flexible as the iconic cactus it's named after.
Impact
Challenge
Execution
Product evolution
Evangelism
Design files
Foundations
Palette system
Open source docs
Reflection

Reactions

"This is the best internal design documentation I've ever seen. Especially the color perception section, freaking amazing." - Jared G. | Sr. Engineer
"Already making converting designs to dark mode 4x faster and 4x less brain power" - Tyler R. | PD
“The design system you built at Trainual is light years ahead you have no idea. - Tyler R. | Sr. PD

Results

  1. Dramatic Performance Gains: ~50% faster design iterations, ~30% quicker development time, ~90% component reuse rate, resulting in significant cost savings and improved team efficiency
  2. Game-Changing Benefits: Streamlined development process, consistent design patterns, improved team collaboration, leading to enhanced product quality and faster time-to-market
  3. Outstanding User Satisfaction: Overwhelmingly positive feedback from both designers and developers on usability and documentation, with reported 4x improvement in dark mode implementation speed

Backdrop

Our rapidly growing organization struggled with a fragmented design ecosystem that created three major challenges: inconsistent user experiences across products, inefficient development cycles that wasted engineering resources, and accumulating design debt that became increasingly difficult to manage.

Development teams were spending up to ~40% of their time wrestling with UI implementation details and fixing design-related bugs instead of building new features. This technical overhead severely impacted our ability to ship products quickly and maintain quality.

Most critically, the lack of a unified design system meant we couldn't deliver the cohesive, professional brand experience our enterprise customers expected, putting us at a competitive disadvantage in the B2B SaaS market.
‍

Challenges

  1. Inherited Project Crisis: Took over a critical redesign initiative that was 6 months behind schedule from an external contractor, requiring immediate intervention and strategic realignment
  2. Critical Organizational Barrier: Complex organizational dynamics with varying levels of design maturity across teams
  3. Strategic Quality Imperative: Balancing speed of delivery with quality and systematic approach
  4. Core Technical Bottleneck: Technical knowledge gaps and varying expertise levels within development teams‍
  5. Fundamental Design Complexity: Need for scalable, consistent design patterns while maintaining flexibility

Execution

  1. Architecture Innovation: Revolutionized the design infrastructure by implementing an advanced component system using Figma's new variant and prop capabilities
  2. Documentation Excellence: Established a comprehensive knowledge base through Zeroheight and Storybook UI, providing robust documentation and hands-on team mentorship
  3. System Architecture: Crafted an enterprise-grade UI component system featuring sophisticated color hierarchies, typography frameworks, and responsive layout principles
  4. Team Development & Leadership: Orchestrated immersive training programs and design reviews, elevating the entire product and design organization's expertise in system architecture‍
  5. Organizational Scale Impact: Successfully built and scaled a dedicated Design Systems team, driving exponential value across internal teams while fostering strong cross-functional alignment
  6. ‍Color System Innovation: Engineered an accessible SaSS color system with hierarchical scaling, supporting both light and dark modes while ensuring WCAG compliance and flexible white-labeling capabilities

Accent Mapping

$accent-palette: $neutral-palette;

Palette Mappings

@import '../../palettes/blue/light';
@import '../../palettes/green/light';
@import '../../palettes/grey/light';
@import '../../palettes/magenta/light';
@import '../../palettes/neutral/light';
@import '../../palettes/ocre/light';
@import '../../palettes/orange/light';
@import '../../palettes/purple/light';
@import '../../palettes/red/light';
@import '../../palettes/teal/light';
@import '../../palettes/violet/light';

Palettes

$neutral-light: (

    00: #FFFFFF,
    05: #F9F9F9,
    10: #F1F1F1,
    15: #E3E3E3,
    20: #D5D5D5,
    25: #C6C6C6,
    30: #AAAAAA,
    40: #8E8E8E,
    50: #717171,
    60: #555555,
    70: #393939,
    80: #1C1C1C,
    90: #121212,
    transparent-1: rgba( 0, 0, 0, 0.05),
    transparent-2: rgba( 0, 0, 0, 0.1),
    transparent-3: rgba( 0, 0, 0, 0.25),
    transparent-4: rgba( 0, 0, 0, 0.1),
);

Themes

1@use 'sass:map';
2
3// Light Mode 🌞 //
4
5// State 🌞
6// critical UI states
7$state-info: map-get($blue-palette, 20);
8$state-error: map-get($red-palette, 20);
9$state-caution: map-get($orange-palette, 20);
10$state-favorite: map-get($ocre-palette, 20);
11$state-success: map-get($green-palette, 20);
12$state-info-background: map-get($teal-palette, 00);
13$state-caution-background: map-get($orange-palette, 00);
14$state-error-background: map-get($red-palette, 00);
15$state-success-background: map-get($green-palette, 00);
16$state-info-hover: map-get($blue-palette, 40);
17$state-error-hover: map-get($red-palette, 40);
18$state-caution-hover: map-get($orange-palette, 40);
19$state-success-hover: map-get($green-palette, 40);
20
21// Foundation 🌞
22// backgrounds, modals, elevated surfaces, icon backgrounds, menu items
23$foundation-base-1: map-get($neutral-palette, 05);
24$foundation-base-2: map-get($neutral-palette, 10);
25$foundation-surface-1: map-get($neutral-palette, 00);
26$foundation-surface-2: map-get($neutral-palette, 90);
27$foundation-surface-3: map-get($accent-palette, 30);
28$foundation-hover: map-get($neutral-palette, 05);
29
30// Icon 🌞
31$icon-1: map-get($neutral-palette, 30);
32$icon-2: map-get($neutral-palette, 60);
33$icon-overdue: $state-error;
34$icon-active: $state-success;
35
36// text 🌞
37// text colors that are not color-themed
38$text-placeholder: map-get($neutral-palette, 40);
39$text-default: map-get($neutral-palette, 60);
40$text-surface: map-get($neutral-palette, 00);
41$text-hover: map-get($neutral-palette, 70);
42$text-active: map-get($neutral-palette, 80);
43$text-active-vibrant: map-get($teal-palette, 20);
44$text-hover-vibrant: map-get($teal-palette, 30);
45$text-pressed: map-get($neutral-palette, 80);
46$text-disabled: map-get($neutral-palette, 30);
47
48// Border 🌞
49// default elements such as text inputs
50// $border-surface-1/2 is use in conjunction with $foundation-surface-1/2 to form containers like modals and cards
51$border-surface-1: map-get($neutral-palette, 10);
52$border-surface-2: map-get($neutral-palette, 15);
53$border-surface-3: map-get($accent-palette, 30);
54$border-default: map-get($neutral-palette, 40);
55$border-hover: map-get($neutral-palette, 60);
56$border-active: $state-info;
57$border-disabled: map-get($neutral-palette, 25);
58
59// accent primary 🌞
60// primary button fills
61$accent-primary-default: map-get($accent-palette, 30);
62$accent-primary-hover: map-get($accent-palette, 50);
63$accent-primary-pressed: map-get($accent-palette, 60);
64$accent-primary-disabled: map-get($neutral-palette, 15);
65
66// accent secondary 🌞
67// secondary buttons fills
68$accent-secondary-default: $foundation-surface-1;
69$accent-secondary-hover: map-get($accent-palette, 00);
70$accent-secondary-pressed: map-get($accent-palette, 05);
71$accent-secondary-disabled: map-get($neutral-palette, 15);
72
73// accent border 🌞
74$accent-border-default: map-get($accent-palette, 20);
75$accent-border-hover: map-get($accent-palette, 30);
76$accent-border-disabled: map-get($neutral-palette, 25);
77
78// accent text 🌞
79$accent-text-placeholder: map-get($accent-palette, 15);
80$accent-text-default: map-get($accent-palette, 30);
81$accent-text-hover: map-get($accent-palette, 40);
82$accent-text-active: map-get($accent-palette, 70);
83$accent-text-pressed: map-get($accent-palette, 70);
84$accent-text-disabled: map-get($neutral-palette, 30);
85
86// accent toggle 🌞
87$accent-toggle-off: map-get($neutral-palette, 00); // toggle switch
88$accent-toggle-on: map-get($accent-palette, 00); // toggle switch
89$accent-toggle-default: map-get($accent-palette, 05); // toggle switch bg
90$accent-toggle-hover: map-get($accent-palette, 10); // toggle switch bg
91$accent-toggle-active: map-get($accent-palette, 30); // toggle switch bg
92$accent-toggle-active-hover: map-get($accent-palette, 20); // toggle switch
93$accent-toggle-disabled: map-get($neutral-palette, 20); // toggle switch bg
94
95// Badge 🌞
96$trainual-purple: map-get($violet-palette, 30);
97$badge-error: $state-error;
98$badge-caution: $state-caution;
99$badge-success: $state-success;
100$badge-info: $state-info;
101$badge-general: map-get($neutral-palette, 50);
102
103// CHARTS AND GRAPHS
104// Chart onw 🌞
105$chart-one-00: map-get($blue-palette, 00);
106$chart-one-05: map-get($blue-palette, 05);
107$chart-one-10: map-get($blue-palette, 10);
108$chart-one-15: map-get($blue-palette, 15);
109$chart-one-20: map-get($blue-palette, 20);
110$chart-one-30: map-get($blue-palette, 30);
111$chart-one-40: map-get($blue-palette, 40);
112$chart-one-50: map-get($blue-palette, 50);
113$chart-one-60: map-get($blue-palette, 60);
114$chart-one-70: map-get($blue-palette, 70);
115$chart-one-80: map-get($blue-palette, 80);
116$chart-one-90: map-get($blue-palette, 90);
117
118// Chart two 🌞
119$chart-two-00: map-get($green-palette, 00);
120$chart-two-05: map-get($green-palette, 05);
121$chart-two-10: map-get($green-palette, 10);
122$chart-two-15: map-get($green-palette, 15);
123$chart-two-20: map-get($green-palette, 20);
124$chart-two-30: map-get($green-palette, 30);
125$chart-two-40: map-get($green-palette, 40);
126$chart-two-50: map-get($green-palette, 50);
127$chart-two-60: map-get($green-palette, 60);
128$chart-two-70: map-get($green-palette, 70);
129$chart-two-80: map-get($green-palette, 80);
130$chart-two-90: map-get($green-palette, 90);
131
132// Chart three 🌞
133$chart-three-00: map-get($orange-palette, 00);
134$chart-three-05: map-get($orange-palette, 05);
135$chart-three-10: map-get($orange-palette, 10);
136$chart-three-15: map-get($orange-palette, 15);
137$chart-three-20: map-get($orange-palette, 20);
138$chart-three-30: map-get($orange-palette, 30);
139$chart-three-40: map-get($orange-palette, 40);
140$chart-three-50: map-get($orange-palette, 50);
141$chart-three-60: map-get($orange-palette, 60);
142$chart-three-70: map-get($orange-palette, 70);
143$chart-three-80: map-get($orange-palette, 80);
144$chart-three-90: map-get($orange-palette, 90);
145
146// chart four 🌞
147$chart-four-00: map-get($red-palette, 00);
148$chart-four-05: map-get($red-palette, 05);
149$chart-four-10: map-get($red-palette, 10);
150$chart-four-15: map-get($red-palette, 15);
151$chart-four-20: map-get($red-palette, 20);
152$chart-four-30: map-get($red-palette, 30);
153$chart-four-40: map-get($red-palette, 40);
154$chart-four-50: map-get($red-palette, 50);
155$chart-four-60: map-get($red-palette, 60);
156$chart-four-70: map-get($red-palette, 70);
157$chart-four-80: map-get($red-palette, 80);
158$chart-four-90: map-get($red-palette, 90);
159
160// drop shadow color only 🌞
161$shadow-color-top-xsmall: map-get($neutral-palette, transparent-3);
162$shadow-color-top-small: map-get($neutral-palette, transparent-1);
163$shadow-color-top-medium: map-get($neutral-palette, transparent-2);
164$shadow-color-top-large: map-get($neutral-palette, transparent-2);
165
166$shadow-color-center-small: map-get($neutral-palette, transparent-1);
167$shadow-color-center-medium: map-get($neutral-palette, transparent-2);
168$shadow-color-center-large: map-get($neutral-palette, transparent-2);
169
170$shadow-color-special-wysiwyg: map-get($neutral-palette, transparent-3);
171$shadow-color-special-data-table: map-get($neutral-palette, transparent-4);
172
173// drop shadows 🌞 // SaSS doesn't like these but we want to be able to include the color with the box shadow size
174
175$shadow-top-xsmall: 0 1px 3px map-get($neutral-palette, transparent-3);
176$shadow-top-small: 0 5px 10px map-get($neutral-palette, transparent-1);
177$shadow-top-medium: 0 5px 15px map-get($neutral-palette, transparent-2);
178$shadow-top-large: 0 5px 40px map-get($neutral-palette, transparent-2);
179
180$shadow-center-small: 0 0 10px map-get($neutral-palette, transparent-1);
181$shadow-center-medium: 0 0 15px map-get($neutral-palette, transparent-2);
182$shadow-center-large: 0 0 40px map-get($neutral-palette, transparent-2);
183
184$shadow-special-wysiwyg: 0 2px 4px map-get($neutral-palette, transparent-3);
185$shadow-special-data-table: 0 5px 10px map-get($neutral-palette, transparent-4);
186
187$logo-bkg-color: #ffffff;
188
189$black-transparent-068: map-get($neutral-palette, transparent-1);

UI Mapping

1// Mapping old to new
2
3
4// BASE COLORS
5$foundation-100: #f9f9f9; // NEW VALUE // $foundation-color('base-1')
6$foundation-200: #f5f5f5; // NEW VALUE // $foundation-color('base-2')
7$gray-100: #f1f1f1;      
8$gray-200: #d7d7d7;
9$gray-300: #bebebe;
10$gray-400: #a4a4a4;
11$gray-500: #717171;
12$gray-600: #585858;
13$gray-700: #3e3e3e;
14$gray-800: #252525;
15$gray-900: #262626;
16$blue: #00b3e2;
17$purple: #482d8c;
18$pink: #e83e8c;
19$green: #75c181;
20$teal: #20c997;
21$cyan: #17b5e3;
22$indigo: #6d57a3;
23$red: #eb5757;
24$orange: #f8a13f;
25$yellow: #f2c94c;
26$black: #000;
27$dark-gray: $gray-600;
28$white: #fff;
29$primary: $purple !default;                 // Primary will change when we start leveraging the new theme variables colors
30$primary-light: #8d85c0;                  //
31$primary-25: lighten($primary, 60%);        //
32$primary-50: lighten($primary, 55%);        //
33$primary-100: lighten($primary, 50%);       // 
34$primary-200: lighten($primary, 40%);       //
35$primary-300: lighten($primary, 30%);       //
36$primary-400: lighten($primary, 20%);       //
37$primary-500: lighten($primary, 10%);       //      
38$primary-600: darken($primary, 10%);        //  
39$primary-700: darken($primary, 20%);        //
40$primary-800: darken($primary, 30%);        //
41$primary-outline-hover: $primary-25;        //
42$primary-outline-active: $primary-50; // "Pressed"
43$secondary: $gray-600;
44$success: $green;   // NEW VALUE // $state-color('success')
45$info: $cyan;       // NEW VALUE // $state-color('info')
46$warning: $orange;  // NEW VALUE // $state-color('warning')
47$danger: $red;      // NEW VALUE // $state-color('error')
48$light: $gray-100;
49$dark: $gray-800;
50$black-transparent-01: rgba(0, 0, 0, 0.1);    // NEW VALUE // neutral-lt('transparent-2')
51$black-transparent-015: rgba(0, 0, 0, 0.15);
52$black-transparent-002: rgba(0, 0, 0, 0.2);   // NEW VALUE // neutral-lt('transparent-3')
53$black-transparent-001: rgba(0, 0, 0, 0.01);
54$black-transparent-005: rgba(0, 0, 0, 0.05);  // NEW VALUE  // neutral-lt('transparent-1')
55$black-transparent-068: rgba(1, 0, 1, 0.68);
56// Text Colors
57$text-color: $gray-600;                        // NEW VALUE  // $text-color('default')
58$alt-text-color: $gray-600;                    // NEW VALUE  // $text-color('default')
59$white-text: $white;                           // NEW VALUE  // $text-color('surface')
60$text-color-hover: $primary;                   // This will change when we start leveraging new theme variables colors
61$text-color-active: $primary-600;// "Pressed"  // NEW VALUE  // $text-color('active')
62$text-color-disabled: $gray-200;               // NEW VALUE  // $text-color('disabled')
63$placeholder-color: $gray-400;                 // NEW VALUE  // $text-color('placeholder')
64$disabled-color: $gray-200;                    // NEW VALUE  // $text-color('disabled')
65// Table Colors
66$table-header-background: $foundation-100;     // NEW VALUE // $foundation-color('base-1')
67
68// Controls
69$select-item-color: $gray-700;                      // ???? what is this // // NEW VALUE PROBABLY  // $text-color('default')
70$outline-card-action-active-color: $blackcurrant;   // NEW VALUE  // $text-color('active')
71$outline-card-action-default-color: $dark-gray;     // NEW VALUE  // $text-color('default')
72
73// Icons                                            // this section is seupposed to be icons? the variable names dont seem to match with that
74$icon-navidation-background: $foundation-200;       // NEW VALUE // $foundation-color('base-2')
75$info-accent-color: $cyan;                          // NEW VALUE // $state-color('info')
76
77$user-avatar-border-color: $white;                  // NEW VALUE // $state-color('info')
78
79$current-plan-background-color: $primary;           // ?? what is this //
80$unpublished-badge-color: $gray-100;                // unpublished badges are orange? //
81
82$filter-item-text-color: $gray-700;                 // NEW VALUE PROBABLY  // $text-color('default')
83$filter-item-line-color: $filter-item-text-color;   // NEW VALUE PROBABLY  // $text-color('default')
84
85$secondary-badge-color: $gray-600;                  // ?? what is this //
86
87$activity-item-divider-color: $gray-100;            // NEW VALUE // $border-color('surface-1')
88
89$curriculum-view-selected-color: $gray-600;         // ?? what is this //
90
91$datatable-current-color: $white;                   // ?? what is this // NEW VALUE PROBABLY // $foundation-color('surface-1')
92
93$billing-plan-tracker-text: $black;                 // NEW VALUE // $text-color('active')
94
95$help-block-text-color: $gray-300;                  // NEW VALUE // $text-color('placeholder')
96
97$modal-select-border-color: $gray-300;              // NEW VALUE // $border-color('surface-2')         
98
99$select-search-text-color: $black;                  // NEW VALUE // $text-color('active')
100$select-search-outline-color: $gray-300;            // NEW VALUE // $border-color('surface-2')   
101
102$curriculum-owner-assign-color: $gray-600;          // ?? what is this //
103
104$due-date-overdue-color: $red;                      // NEW VALUE // $icon-color('overdue')
105$due-date-color: $gray-400;                         // NEW VALUE // $icon-color('default')
106// Froala
107$froala-quick-insert-icon-background: $white;       // NEW VALUE // $foundation-color('surface-1')
108$froala-quick-insert-icon-hover: $foundation-100;   // NEW VALUE // $foundation-color('base-1')
109$froala-quick-insert-icon-color: $gray-600;         // NEW VALUE // $icon-color('dark')
110
111$froala-toolbar-default-icon-color: inherit;        
112$froala-toolbar-active-hover-icon-color: $gray-600;                  // NEW VALUE // $icon-color('dark')
113$froala-toolbar-active-hover-background-color: $foundation-100;      // NEW VALUE // $foundation-color('base-1')
114$froala-toolbar-default-background-color: $white;                    // NEW VALUE // $foundation-color('surface-1')
115
116$froala-secondary-toolbar-default-background-color: $foundation-200;     // NEW VALUE // $foundation-color('base-2')
117
118$froala-dropdown-menu-selected-background-color: $gray-100;              // NEW VALUE // $foundation-color('base-1')
119
120$froala-input-text-color: $gray-600;                                 // NEW VALUE // $text-color('default')
121
122// Horizonal Line
123$froala-horizonal-line-color: inherit;
124
125// Browse Images Add Button
126$froala-browse-images-add-button-background-color: inherit;
127$froala-browse-images-add-button-hover-color: $gray-600;                        // NEW VALUE // $text-color('default')
128$froala-browse-images-add-button-hover-background-color: $foundation-100;       // NEW VALUE // $foundation-color('base-1')
129$froala-browse-images-add-button-color: $white;                                 // NEW VALUE // $foundation-color('surface-1')
130
131// Froala Embedly
132$embed-plugin-default-background-color: $white;                // NEW VALUE // $foundation-color('surface-1')
133
134$card-input-color: $gray-600;                                  // ?? what is this // // NEW VALUE PROBABLY // $text-color('default')
135
136$template-preview-card-border-color: $gray-100;                // NEW VALUE // $border-color('surface-1')
137
138$badge-light-text-color: $gray-600;                            // NEW VALUE // $text-color('default')
139
140$selected-card-toggle-color: $white;                           // NEW VALUE // $foundation-color('surface-1')          
141$selected-card-toggle-background: $gray-600;                   // ?? what is this //
142
143$emebedly-3-dot-action-menu-background-color: $white;          // NEW VALUE // $foundation-color('surface-1') 
144$emebedly-3-dot-action-menu-color: $gray-400;                  // NEW VALUE // $icon-color('default')
145$emebedly-3-dot-action-menu-hover-color: $gray-600;            // NEW VALUE // $icon-color('dark')
146
147// Modals
148$modal-title-color: $gray-800;                        // NEW VALUE // $text-color('default')
149$modal-subtitle-color: $gray-600;                     // NEW VALUE // $text-color('default')
150$modal-body-text-color: $gray-600;                    // NEW VALUE // $text-color('default')
151$modal-body-title-color: $modal-title-color;          // NEW VALUE // $text-color('default')
152$modal-btn-undo-color: $gray-600;                     // NEW VALUE // $text-color('default')
153$modal-body-label-color: $gray-800;                   // NEW VALUE // $text-color('active')
154$modal-body-advanced-settings: $cyan;                 // NEW VALUE // $state-color('info')
155$modal-footer-invite-later-color: $gray-600;          // NEW VALUE // $text-color('default')
156
157// Pagination
158$pagination-color: $primary;                          // NEW COLOR // $brand-primary-color('default')
159$pagination-bg: $white;                               // NEW VALUE // $foundation-color('surface-1') 
160$pagination-border-color: $gray-100;                  // NEW VALUE // $foundation-color('base-2') 
161
162$pagination-hover-color: darken($primary, 15%);       // NEW COLOR // $brand-primary-color('hover')
163$pagination-hover-bg: $gray-200;                      // NEW VALUE // $foundation-color('base-2')
164$pagination-hover-border-color: $gray-100;            // NEW VALUE // $border-color('surface-1')
165
166$pagination-active-color: $white;                     // this is text? // NEW VALUE // $text-color('surface')
167$pagination-active-bg: $primary;                      // NEW COLOR // $brand-primary-color('default')
168$pagination-active-border-color: $primary;            // NEW COLOR // $brand-primary-color('default')
169
170$pagination-disabled-color: $gray-200;                // this is text? // NEW VALUE // $text-color('disabled')
171$pagination-disabled-bg: $gray-100;                   // NEW COLOR // $brand-primary-color('disabled')
172$pagination-disabled-border-color: $gray-200;         // NEW VALUE // $border-color('disabled')         
173
174// Curriculum card
175$curriculum-card-emoji-background-color: $foundation-100;           // NEW VALUE // $foundation-color('base-1')
176$curriculum-card-title-color: $black;                               // NEW VALUE // $text-color('default')
177$curriculum-card-description-color: $gray-600;                      // NEW VALUE // $text-color('default')
178$curriculum-card-lock-icon-color: $gray-400;                        // NEW VALUE // $icon-color('default')             
179$curriculum-card-info-icon-color: $gray-400;                        // NEW VALUE // $icon-color('default')
180$curriculum-card-clock-icon-color: $gray-400;                       // NEW VALUE // $icon-color('default')
181$curriculum-card-info-completed-assignment-color: $gray-400;        // NEW VALUE // $icon-color('default')
182$curriculum-card-info-overdue-assignment-color: $red;               // NEW VALUE // $icon-color('overdue')
183$curriculum-card-info-ongoing-assignment-color: $green;             // NEW VALUE // $icon-color('active')
184$curriculum-card-info-tooltip-border-color: $gray-100;              // NEW VALUE // $border-color('surface-1') 
185$curriculum-card-info-tooltip-background-color: $white;             // NEW VALUE // $foundation-color('surface-1')
186$curriculum-card-info-tooltip-text-color: $gray-400;                // NEW VALUE // $text-color('placeholder')
187$curriculum-card-info-tooltip-icons-color: $gray-400;               // NEW VALUE // $icon-color('default')
188$curriculum-card-sortable-curriculum-ghost-border-color: $black;    // NEW VALUE // $foundation-color('surface-2')
189
190// Users Curriculum card
191$users-curriculum-card-info-tooltip-border-color: $gray-100;                     // NEW VALUE // $border-color('surface-1')
192$users-curriculum-card-info-tooltip-background-color: $white;                    // NEW VALUE // $foundation-color('surface-1')
193$users-curriculum-card-info-tooltip-box-shadow-color: $black-transparent-005;    // NEW VALUE // $shadow-top('small')
194$users-curriculum-card-info-tooltip-text-color: $gray-400;                       // NEW VALUE // $icon-color('default')
195$users-curriculum-card-info-tooltip-icons-color: $gray-400;                      // NEW VALUE // $icon-color('default')
196
197// My Desk Curriculum card
198$my-desk-curriculum-card-lock-icon-color: $gray-400;                                    // NEW VALUE // $icon-color('default')
199$my-desk-curriculum-card-info-icon-color: $gray-400;                                    // NEW VALUE // $icon-color('default')
200$my-desk-curriculum-card-info-tooltip-border-color: $gray-100;                          // NEW VALUE // $border-color('surface-1')
201$my-desk-curriculum-card-info-tooltip-background-color: $white;                         // NEW VALUE // $foundation-color('surface-1')
202$my-desk-curriculum-card-info-tooltip-box-shadow-color: $black-transparent-005;         // NEW VALUE // $shadow-top('small')
203$my-desk-curriculum-card-info-tooltip-text-color: $gray-400;                            // NEW VALUE // $text-color('default')
204$my-desk-curriculum-card-info-tooltip-icons-color: $gray-400;                           // NEW VALUE // $icon-color('default')
205
206// Edit Curriculum card
207$edit-curriculum-card-emoji-hover-background-color: $gray-200;                  // NEW VALUE // $foundation-color('base-2')
208$edit-curriculum-card-emoji-border-color: $transparent;                         // ? //
209$edit-curriculum-card-emoji-default-color: $gray-400;                           // NEW VALUE // $icon-color('default')
210$edit-curriculum-card-heading-editable-title-color: $gray-800;                  // is this when you click to edit text? //  NEW VALUE // $text-color('active')
211$edit-curriculum-card-info-editable-text-color: $gray-600;                      // is this when you click to edit text? //  NEW VALUE // $text-color('active')
212$edit-curriculum-card-footer-time-estimate-icon-color: $silver-chalice;         // NEW VALUE // $icon-color('default')
213$edit-curriculum-card-footer-time-estimate-text-color: $silver-chalice;         // NEW VALUE // $icon-color('default')
214$edit-curriculum-card-content-more-roles-color: $silver-chalice;                // NEW VALUE // $text-color('placeholder')
215$edit-curriculum-card-content-link-text-color: $suva-grey;                      // NEW VALUE // $icon-color('default')
216$edit-curriculum-card-element-outline-time-estimate-color: $gray-300;           // NEW VALUE // $text-color('placeholder')
217$edit-curriculum-card-element-cancel-icon-color: $gray-400;                     // NEW VALUE // $icon-color('default')
218$edit-curriculum-card-sortable-item-ghost-color: $transparent;                  // ? //
219$edit-curriculum-card-sortable-item-ghost-border-color: $black;                 // NEW VALUE // $foundation-color('surface-2')
220$edit-curriculum-card-locked-icons-color: $gray-400;                            // NEW VALUE // $icon-color('default')
221
222// Show Curriculum card
223$show-curriculum-card-content-due-date-color: $gray-400;                    // text? // NEW VALUE // $text-color('placeholder')
224$show-curriculum-card-element-outline-icon-color: $gray-400;                // NEW VALUE // $icon-color('default')
225$show-curriculum-card-element-outline-brand-icon-color: $purple;            // ? //
226$show-curriculum-card-element-outline-utilities-color: $gray-400;           // ? //
227$show-curriculum-card-body-time-estimate-icon-color: $silver-chalice;       // NEW VALUE // $icon-color('default')
228$show-curriculum-card-body-time-estimate-text-color: $silver-chalice;       // NEW VALUE // $text-color('default')
229
230// Scrollbar
231$scrollbar-color: $gray-200;                            // NEW VALUE // $border-color('surface-2')
232
233// Old Welcome Wizard
234$old-welcome-wizard-title-color: $bunker;               // NEW VALUE // $text-color('default')
235$old-welcome-wizard-subtitle-color: $bunker;            // NEW VALUE // $text-color('default')
236
237// Welcome Wizard
238$welcome-wizard-title-color: $gray-800;                 // NEW VALUE // $text-color('default')
239$welcome-wizard-subtitle-color: $gray-600;              // NEW VALUE // $text-color('default')
240$welcome-wizard-action-btn-color: $white;               // NEW VALUE // $text-color('surface')
241
242// Empty State
243$empty-state-title-color: $gray-800;                    // NEW VALUE // $text-color('default')                   
244$empty-state-subtitle-color: $gray-800;                 // NEW VALUE // $text-color('default') 
245
246// Welcome Wizard Templates page
247$template-card-gray-200-border-color: $gray-200;        // NEW VALUE // $border-color('surface-1')
248$template-card-gray-400-border-color: $gray-400;        // NEW VALUE // $border-color('surface-2')
249$template-card-purple-border-color: $primary;           // NEW VALUE // $theme-border-color('default')
250
251// Manage Users Modal
252$manage-users-tab-underline-color: $gray-400;           // NEW VALUE // $border-color('default')
253$manage-users-tab-active-underline-color: $gray-700;    // NEW VALUE // $border-color('hover')
254$content-access-dropdown-menu-border-color: $gray-100;  // NEW VALUE // $border-color('surface-2')
255
256//  Welcome Wizard Old Select Goals Step
257$old-select-goals-wizard-content-card-checked-box-shadow-color: $purple;
258$old-select-goals-wizard-content-card-text-before-color: $purple;
259$old-select-goals-wizard-content-card-text-color: $bunker;
260$old-select-goals-wizard-content-card-box-shadow-color: $black-transparent-002;
261$old-select-goals-wizard-content-card-border-color: $silver;
262$old-select-goals-wizard-content-card-check-color: $purple;
263
264//  Welcome Wizard Select Goals Step
265$select-goals-wizard-content-card-border-color: $gray-100;
266$select-goals-wizard-content-card-background-color: $white;
267$select-goals-wizard-content-card-text-title-color: $black;
268$select-goals-wizard-content-card-check-color: $purple;
269$select-goals-wizard-content-card-hover-border-color: $primary;
270$select-goals-wizard-content-card-hover-card-text-description-color: $gray-600;
271$select-goals-wizard-content-card-checked-border-color: $primary;
272$select-goals-wizard-content-card-box-shadow-color: $black-transparent-005;
273$select-goals-wizard-action-wrapper-background-color: $white;
274
275// Welcome Wizard User setup page
276$user-setup-purple-color: $primary;
277$cropit-preview-background-color: $white;
278$image-hover-overlay-color: $gray-800;
279$image-hover-overlay-background-color: rgba(216, 216, 216, 0.7);
280$default-placeholder-color: $nobel-grey;
281$tooltip-icon-color: $gray-400;
282
283//  Welcome Wizard Old Brand Account Step
284$old-brand-account-brand-options-logo-title-color: $medium-spring-green;
285$old-brand-account-brand-options-logo-subtitle-color: $medium-spring-green;
286$old-brand-account-brand-options-logo-cropit-preview-border-color: $medium-spring-green;
287$old-brand-account-brand-options-logo-cropit-image-background-color: $white;
288$old-brand-account-brand-options-logo-cropit-preview-background-color: $white;
289$old-brand-account-brand-options-logo-controls-background-color: $white;
290$old-brand-account-brand-options-logo-controls-rotation-btn-color: $grey;
291$old-brand-account-brand-options-logo-controls-border-color: $white-smoke;
292$old-brand-account-brand-options-color-section-label-color: $bunker;
293$old-brand-account-brand-options-color-section-picker-inner-background-color: $purple;
294$old-brand-account-brand-options-color-section-picker-inner-border-color: $alto;
295$old-brand-account-brand-options-color-section-subtitle-color: $medium-spring-green;
296$old-brand-account-brand-preview-border-color: $silver;
297$old-brand-account-brand-preview-background-color: $solitude;
298$old-brand-account-brand-preview-navbar-background-color: $white;
299$old-brand-account-brand-preview-navbar-actions-avatar-background-color: $silver;
300$old-brand-account-brand-preview-navbar-actions-icon-color: $silver;
301$old-brand-account-brand-preview-sidebar-background-color: $black-transparent-068;
302$old-brand-account-brand-preview-sidebar-option-background-color: $transparent;
303$old-brand-account-brand-preview-sidebar-option-bar-background-color: $medium-spring-green;
304$old-brand-account-brand-preview-sidebar-option-selected-bar-background-color: $gainsboro;
305$old-brand-account-brand-preview-sidebar-option-selected-background-color: $charcoal;
306$old-brand-account-brand-preview-main-content-filters-main-bar-background-color: $black;
307$old-brand-account-brand-preview-main-content-filters-small-bar-background-color: $silver;
308$old-brand-account-brand-preview-main-content-button-border-color: $alto;
309$old-brand-account-brand-preview-main-content-button-background-color: $white;
310$old-brand-account-brand-preview-main-content-button-bar-background-color: $silver;
311$old-brand-account-brand-preview-main-content-card-box-shadow-color: $black-transparent-001;
312$old-brand-account-brand-preview-main-content-upper-card-box-shadow-color: $black-transparent-001;
313$old-brand-account-brand-preview-main-content-upper-card-main-bar-color: $black;
314$old-brand-account-brand-preview-main-content-upper-card-background-color: $white;
315$old-brand-account-brand-preview-main-content-card-row-background-color: $white;
316$old-brand-account-brand-preview-main-content-card-row-box-shadow-color: $black-transparent-001;
317$old-brand-account-brand-preview-main-content-card-row-title-background-color: $black;
318$old-brand-account-brand-preview-main-content-card-row-description-background-color: $silver;
319$old-brand-account-brand-preview-main-content-card-row-content-bar-2-background-color: $black;
320$old-brand-account-brand-preview-main-content-card-row-content-bar-3-background-color: $silver;
321
322//  Welcome Wizard Brand Account Step
323$brand-account-brand-options-logo-title-color: $gray-600;
324$brand-account-brand-options-logo-subtitle-color: $gray-400;
325$brand-account-brand-options-logo-cropit-image-background-color: $white;
326$brand-account-brand-options-logo-cropit-preview-border-color: $medium-spring-green;
327$brand-account-brand-options-logo-cropit-preview-background-color: $white;
328$brand-account-brand-options-logo-controls-background-color: $white;
329$brand-account-brand-options-logo-controls-rotation-btn-color: $grey;
330$brand-account-brand-options-logo-controls-border-color: $white-smoke;
331$brand-account-brand-options-color-section-label-color: $bunker;
332$brand-account-brand-options-color-section-picker-inner-background-color: $purple;
333$brand-account-brand-options-color-section-picker-inner-border-color: $gainsboro;
334$brand-account-brand-options-color-section-subtitle-color: $medium-spring-green;
335$brand-account-brand-preview-background-color: $white;
336$brand-account-brand-preview-border-color: $gray-100;
337$brand-account-brand-preview-box-shadow-color: $black-transparent-005;
338$brand-account-brand-preview-sidebar-background-color: $white;
339$brand-account-brand-preview-sidebar-search-box-background-color: $white;
340$brand-account-brand-preview-sidebar-search-box-border-color: $gainsboro;
341$brand-account-brand-preview-sidebar-search-box-field-background-color: $silver;
342$brand-account-brand-preview-sidebar-option-background-color: $transparent;
343$brand-account-brand-preview-sidebar-option-icon-background-color: $silver;
344$brand-account-brand-preview-sidebar-option-bar-background-color: $silver;
345$brand-account-brand-preview-sidebar-footer-progress-bar-icon-background-color: $silver;
346$brand-account-brand-preview-sidebar-footer-options-bar-icon-background-color: $silver;
347$brand-account-brand-preview-sidebar-footer-options-bar-avatar-background-color: $silver;
348$brand-account-brand-preview-sidebar-footer-info-bar-icon-background-color: $silver;
349$brand-account-brand-preview-sidebar-footer-info-bar-bar-background-color: $orange;
350$brand-account-brand-preview-main-content-background-color: $white;
351$brand-account-brand-preview-main-content-filters-main-bar-background-color: $gray-600;
352$brand-account-brand-preview-main-content-filters-main-tabs-small-bar-background-color: $silver;
353$brand-account-brand-preview-main-content-filters-main-tabs-active-background-color: $gray-600;
354$brand-account-brand-preview-main-content-upper-card-background-color: $white;
355$brand-account-brand-preview-main-content-upper-card-box-shadow-color: $black-transparent-005;
356$brand-account-brand-preview-main-content-upper-card-main-bar-title-color: $gray-600;
357$brand-account-brand-preview-main-content-card-box-shadow-color: $black-transparent-005;
358$brand-account-brand-preview-main-content-card-box-background-color: $white;
359$brand-account-brand-preview-main-content-card-box-title-text-background-color: $gray-600;
360$brand-account-brand-preview-main-content-card-box-title-star-icon-color: $silver;
361$brand-account-brand-preview-main-content-card-box-description-bar-color: $silver;
362$brand-account-brand-preview-main-content-card-box-content-bar-3-color: $gray-600;
363
364//  Welcome Wizard Old Choose Your Setup
365$old-choose-your-setup-card-background-color: $white;
366$old-choose-your-setup-card-border-color: $silver;
367$old-choose-your-setup-card-box-shadow-color: $black-transparent-002;
368$old-choose-your-setup-card-hover-box-shadow-from-color: $black-transparent-015;
369$old-choose-your-setup-card-hover-box-shadow-to-color: $black-transparent-01;
370$old-choose-your-setup-card-text-color: $bunker;
371
372//  Welcome Wizard Choose Your Setup
373$choose-your-setup-card-background-color: $white;
374$choose-your-setup-card-border-color: $gray-100;
375$choose-your-setup-card-box-shadow-color: $black-transparent-005;
376$choose-your-setup-card-hover-box-shadow-from-color: $black-transparent-015;
377$choose-your-setup-card-hover-box-shadow-to-color: $black-transparent-01;
378$choose-your-setup-card-text-color: $bunker;
379$choose-your-setup-content-subtext-color: $bunker;
380$choose-your-setup-modal-header-title-color: $gray-800;
381$choose-your-setup-modal-header-subtitle-color: $gray-600;
382$choose-your-setup-modal-footer-btn-color: $white;
383$choose-your-setup-modal-footer-btn-secondary-border-color: $purple;
384
385//  Welcome Wizard Old Content Creator Step
386$old-content-creator-modal-header-title-color: $gray-800;
387$old-content-creator-modal-header-sub-text-color: $gray-600;
388$old-content-creator-modal-body-ability-icon-color: $cyan;
389$old-content-creator-modal-body-info-text-color: $cyan;
390
391//  Welcome Wizard Content Creator Step
392$content-creator-wizard-content-error-message-color: $red;
393$content-creator-modal-header-title-color: $gray-800;
394$content-creator-modal-header-sub-text-color: $gray-600;
395$content-creator-modal-body-ability-image-color: $gray-600;
396$content-creator-modal-body-ability-text-color: $gray-600;
397$content-creator-modal-body-info-text-icon-color: $cyan;
398$content-creator-modal-body-info-text-color: $cyan;
399$content-creator-content-subtext-color: $bunker;
400
401// Select Content Types Step
402$content-type-card-box-shadow-color: $black-transparent-005;
403$content-type-card-border-color: $silver;
404$content-type-card-text-color: $bunker;
405$content-type-card-check-color: $purple;
406$content-type-card-tagsinput-border-color: $purple;
407$content-type-card-tagsinput-background-color: $purple;
408$content-type-card-tagsinput-text-color: $white;
409
410// Welcome Wizard Delegated Setup User
411$setup-delegated-user-background-color: $white;
412$setup-delegated-user-image-heading-mobile-title-color: $black;
413$setup-delegated-user-image-heading-title-color: $bunker;
414$setup-delegated-user-form-label-color: $gray-800;
415$setup-delegated-user-form-checkbox-label-color: $gray-600;
416
417// Trial Ended Banner
418$trial-ended-background-color: $gray-200; // NEW VALUE // $foundation-color('base-2')
419$trial-ended-text-color: $gray-600;       // NEW VALUE // $text-color('default')
420$trial-ended-link-color: $cyan;           // NEW VALUE // $text-color('active-color')
421
422
423// Select2 Dropdown
424$add-user-icon-background-color: $white;    // NEW VALUE // $foundation-color('surface-1')
425$add-user-icon-color: $gray-200;            // NEW VALUE // $icon-color('default')
426$add-user-icon-border-color: $gray-200;     // NEW VALUE // $border-color('surface-2')
427

Open source docs

  1. Storybook
  2. Github
  3. ZeroHeight - Saguaro.Trainual

Wins

  1. Rapid Design Evolution: Exponentially improved design iteration speed, enabling faster product improvements
  2. Maximum Efficiency: Achieved high component reusability across squads, reducing duplicate work
  3. Brand Cohesion: Established consistent design patterns throughout the product, strengthening user experience‍
  4. Seamless Integration: Improved onboarding experience for new team members, accelerating productivity‍
  5. Color System Innovation: Developed an innovative accessible color system that streamlined dark mode implementation and enabled flexible white-labeling while maintaining WCAG compliance

Learnings

  1. Feature Placement Strategy: Critical features must be strategically distributed across tiers to create natural upgrade triggers while maintaining value at each level.
  2. Value Communication: Clear, compelling communication of tier differences is essential for customer understanding and successful conversions.‍
  3. Data-Driven Iterations: Regular analysis of usage patterns and upgrade triggers is crucial for continuous optimization of the pricing model.
2022
Trainual
Driving product vision
Led development of unified product vision integrating desktop, mobile, and AR/VR with AI features, successfully aligning Product, Design, and Engineering teams
Impact
Challenge
Execution
Design sprint
Film week
Sketches
Trainual Visiontype
Reflection

Reactions

"Inspire and ralley: Mission Accomplished!" - Shawn J.
"This is so damn cool." - Joe C.
"This is CRAZYYYY COOL! How exciting!" - Marlowe E.
"That is EPIC" - Seiji C.
"THIS IS FIRE!" - Chris R.

Results

  1. Strategic Impact: Successful rollout of comprehensive product vision at Q2 All Hands meeting
  2. Team Engagement: Received overwhelming positive feedback from cross-functional team members
  3. Organizational Unity: Created alignment across Product, Design, and Engineering departments
  4. Future Vision: Established clear direction for future product development and improvements

Backdrop

After successfully pivoting the product strategy while scaling the PD&E org, the product suffered from fragmented and disconnected experiences.

Squads struggled with maintaining consistency, largely due to technical debt and green talent.

To improve this, we needed a clear long-term product vision.

The vision needed to be cross-platform and technically feasible, with room for teams to implement solutions independently.

‍

Challenges

  1. Technical Feasibility: Create a technically feasible cross-platform solution with a 3-5 year timeline horizon
  2. Timeline Management: Deliver a compelling presentation within 6 weeks
  3. Strategic Balance: Balance inspiration with practicality
  4. Technical Limitations: Prototype performance on a web-based tool (Figma)
  5. Quality Assurance: Time to QA & stress test prototypes

Execution

  1. Strategic Architecture: Developed detailed current and future sitemap architectures in collaboration with Founders, Product, & Engineering leadership
  2. Creative Direction: Created storyboards and shot planning for product vision video presentation
  3. Design Innovation: Designed new visual language using Glassmorphism approach for unified cross-device experience
  4. Technical Excellence: Built complex hi-fi prototypes in Figma for desktop, mobile, tablet, and AR/VR experiences
  5. Production Leadership: Collaborated with videography team during filming week to capture all interface interactions‍
  6. Experience Design: Developed detailed sketches for key product areas including My Desk, Company Profile, People, and Content creation

Wins

  1. Project Management: I successfully managed the ambitious project and timeline, dedicating several weeks exclusively to this project to ensure success, wearing both Designer and Product Manager hats while keeping executives informed of progress
  2. Personal Growth: This was one of the most enjoyable initiatives I've led, allowing me to leverage my expertise in prototyping, videography, storytelling, vision shaping, and cross-team collaboration.

Learnings

  1. Scope Limitations: Time constraints prevented us from fully exploring Trainual's potential as an AR-integrated ecosystem. The final vision-type video was mostly a snapshot of different feature sets and key experiences we wanted to highlight for the PD&E org.
  2. Timing and Implementation: Despite successfully unifying teams around the vision, proactive planning could have yielded even stronger results. Earlier planing and rollout of the vision, before executing it company-wide, would have prevented several cases of employee burnout and created a smoother organizational pivot.
2021
Trainual
Product led pricing
Launched three-tier pricing model delivering 150% higher upgrade rates and 41% lower churn. New $49 "Build" plan exceeded adoption goals by 50%, creating clear value paths from startups to enterprise.
Impact
Challenge
Execution
Iteration
Rapid prototyping
Product
Marketing site
Reflection

Reactions

"Showing some major ❤️ to Marcus, Ell, and the whole team for his partnership with all of the new pricing and plan changes..it’s an honor being your teammate and it’s been so fun working with you over the past 2 months! 🚀" - Sarah M. | Director of Sales
"..I am super impressed with everything that's going on right now with collections and the navigation. Every interaction feels awesome - from expanding elements to the pin/unpin functionality…The whole system is coming together beautifully, and I can't wait for the rest of the company to see this. Keep up the fantastic work!" - Taylor S. | VP of Product
"This looks so elfin good" - Andrew B. | Sr. PM

Results

  1. Growth & Conversion Impact: Achieved a remarkable 150% improvement in upgrade rates through strategic feature placement and clear value progression. Customer retention significantly improved with a 41% reduction in price-related churn, demonstrating strong product-market fit.
  2. Market Expansion & Revenue: Successfully expanded market coverage by introducing tailored solutions for each segment from startups to enterprises with accessible entry pricing, enhanced mid-tier features, and enterprise-grade capabilities
  3. Stakeholder Success: Received enthusiastic feedback across all organizational levels, from senior leadership to sales and product teams, validating the strategic approach and product experience.

Backdrop

Our two-tier pricing model created friction by limiting enterprise features while being too expensive for small teams.

Without clear upgrade paths, users struggled to grow with the product, and we couldn't effectively monetize different segments.

To scale our product-led growth strategy, we needed to implement a best-practice three-tier model. This initiative ran in parallel with extensive product improvements across product lines to align with the Business Playbook launch.
‍

Challenges

  1. Game time: We had only two months to build a scalable three-tier plan, launch an entry-level plan to boost activation, introduce content collections, and implement the Business Playbook strategy—with one month reserved for intensive regression testing.
  2. User Base Diversity: Creating pricing tiers that effectively serve everything from individual users to large enterprise teams while maintaining profitability at each level.
  3. Value Proposition: Developing distinct, compelling value propositions for each tier that justify price points and encourage natural upgrades.‍
  4. Technical Implementation: Building a flexible system that supports feature gating, usage tracking, and seamless upgrades while maintaining optimal performance
  5. Product Marketing Alignment: As the Design lead on the overarching efforts, I had to ensure the product marketing redesign aligned with what was in the product across features and pricing.

Execution

  1. Strategic Value System: Implemented a comprehensive value-based progression framework that aligns feature access with user growth patterns and willingness to pay.
  2. Market Segmentation: Developed strategic feature sets for each tier, ensuring appropriate value delivery at every price point.
  3. Optimization Architecture: Created a data collection and analysis framework using Heap Analytics to continuously monitor and improve pricing effectiveness through user behavior insights.

Wins

  1. Entry-Level Success: The new $49 "Build" plan exceeded adoption goals by 50%, proving the market demand for an accessible entry point.
  2. Customer Retention: Dramatic reduction in price-related churn demonstrates better alignment between user needs and pricing tiers.
  3. Cross-Functional Excellence: Strong collaboration between product, sales, and customer experience teams led to comprehensive solution that addresses multiple stakeholder needs.

Learnings

  1. Feature Placement Strategy: Critical features must be strategically distributed across tiers to create natural upgrade triggers while maintaining value at each level.
  2. Value Communication: Clear, compelling communication of tier differences is essential for customer understanding and successful conversions.‍
  3. Data-Driven Iterations: Regular analysis of usage patterns and upgrade triggers is crucial for continuous optimization of the pricing model.
2021
Trainual
My desk 2.0
Transformed an underutilized homepage into a powerful productivity hub featuring an "Up Next" section, Trial checklist, and content metrics, resulting in 20% faster content completion and 79% daily retention.
Impact
Challenge
Execution
Discovery
Iterate & Test
Outcomes
Reflection

Reactions

“New Trainual dashboard is so beautiful. Way more modern look and feel.” - Megan S.
“Just signed up for Trainual and I am sexually aroused by how clean the layout is.” - Fae F.
“Nice GUI on those new features. Slick.” - Russ B. | Principal Engineer
“ People are calling the new My Desk experience “perfect” - Trainual Newsletter

Results

  1. Performance & Productivity: 20% reduction in content completion time, saving nearly an hour per week for teams. This translates to over 50 hours saved annually per user, enabling significant productivity gains across organizations.
  2. Measurable Platform Improvements: 45% faster content assignment workflow, real-time performance tracking with intuitive visualization, and 3x increase in user engagement through streamlined layout
  3. Explosive user adoption: 70% day-one retention growing to 79% after two weeks

Backdrop

Prior to this initiative, we had no dedicated dashboard experience, which created significant challenges for both administrators and users. Our research revealed that managers needed better tools for monitoring and guiding their teams, particularly for asynchronous communication.

Through extensive customer interviews and analysis, we identified that users were missing essential features for tracking message delivery, engagement, and team performance. This research guided our ground-up development of a comprehensive dashboard foundation.

To tackle these issues, we completely redesigned the dashboard with a focus on team visibility, streamlined communication, and actionable metrics, ultimately creating a beautiful, engaging, and efficient home base for our users.
‍

Challenges

  1. Technical Constraints: Legacy system architecture limiting advanced dashboard customization and widget flexibility
  2. Design Balance: Diverse stakeholder expectations requiring careful balance between simplicity and functionality
  3. Engagement Crisis: Critical need to improve user engagement from baseline 15-25% to drive platform adoption‍
  4. User Complexity: The array of problems to solve across general users and Admin level users

Execution

  1. Research & Validation: Conducted extensive user interviews and prototype testing to validate dashboard design decisions
  2. User-Centric Design: Developed intuitive card-based layout with clear visual hierarchy
  3. Technical Architecture: Built modular widget framework enabling independent feature deployment and drag-and-drop customization
  4. Data & Navigation: Implemented interactive progress visualization and persistent quick-access menu
  5. ‍Smooth Onboarding: Created comprehensive admin setup checklist with Appcues integration

Wins

  1. Outstanding User Adoption: Achieved 70% day-one retention, scaling to 79% after two weeks, demonstrating strong product-market fit
  2. Dramatic Efficiency Gains: Delivered 20% faster content completion, saving teams nearly an hour weekly and 50+ hours annually per user
  3. Enhanced Team Dynamics: Created an engaging performance tracking system that drives transparent accountability while fostering collaboration

Learnings

  1. Metadata Foundation: Need to improve our metadata structure to surface more meaningful and actionable insights for users
  2. Technical Foundation: Critical to address content architecture technical debt to enable ideal experience customers want
  3. Cross-Platform Strategy: Essential to optimize mobile experience to ensure consistent productivity across all devices
2020
Trainual
Quick Embeds
Users faced a complex and time-consuming process for embedding external content in their documentation. To address this, we created a streamlined solution that simplifies content integration and preserves formatting, helping teams work more efficiently - ultimately reducing churn by 70% for users of this feature.
Impact
Challenge
Analysis
Current reality
Jam & Test
Quick Pivot
Metrics
Reflection

Reactions

“Can we also celebrate Content Blocks?? (The blue lightning bolt.) Just noticed it today! They got that one out fast!! - Mallory S.
“What!!!! I didn’t expect that to come so quickly. The team at Trainual work fast! I am too excited for words..” - Samantha B.

Results

  1. Game-Changing Results: Dramatically reduced churn from 4.5% to 1.3% for feature users, representing a 71% improvement in retention
  2. Explosive Growth: Achieved strong adoption with 23% feature uptake, exceptional 88% task completion rate, and rapid growth to 1,200+ active users within first 90 days
  3. Strategic Impact: Delivered substantial 70% churn reduction across 15% of total user base, demonstrating significant impact on customer retention at scale

Backdrop

Users faced a significant challenge with content integration - the existing process was cumbersome, requiring frequent context switching between platforms and resulting in lost formatting. This inefficient workflow frustrated users and contributed to higher churn rates.

We developed a streamlined embedding solution leveraging third-party integrations to support hundreds of content providers, enabling users to embed everything from spreadsheets to videos without leaving their workflow.

This dramatically improved and simplified the content creation process and eliminated the need for constant platform switching.
‍

Challenges

  1. Productivity Impact: Complex content integration process requiring extensive manual reformatting, leading to reduced productivity
  2. Workflow Disruption: Frequent context switching between platforms disrupting user focus and workflow efficiency
  3. Technical Limitation: Technical constraints of WYSIWYG editor limiting implementation options and design flexibility

Wins

  1. Outstanding User Adoption: Achieved 70% day-one retention, scaling to 79% after two weeks, demonstrating strong product-market fit
  2. Dramatic Efficiency Gains: Delivered 20% faster content completion, saving teams nearly an hour weekly and 50+ hours annually per user
  3. Enhanced Team Dynamics: Created an engaging performance tracking system that drives transparent accountability while fostering collaboration

Learnings

  1. Metadata Foundation: Need to improve our metadata structure to surface more meaningful and actionable insights for users
  2. Technical Foundation: Critical to address content architecture technical debt to enable ideal experience customers want
  3. Cross-Platform Strategy: Essential to optimize mobile experience to ensure consistent productivity across all devices
2020
Trainual
Trainual + Slack
A seamless Slack integration that revolutionized documentation workflows by enabling teams to search and create content directly within Slack, resulting in ~30% faster documentation creation and ~2x increase in knowledge capture.
Impact
Challenge
Execution
Slack UI Kit
Reflection

Results

  1. Performance Boost: ~30% faster documentation creation through reduced platform switching
  2. Workflow Efficiency: Instant documentation search and real-time content creation within Slack
  3. Knowledge Impact: ~2x increase in knowledge capture with ~50% reduction in context switching

Backdrop

Teams faced significant productivity losses due to constant switching between Slack and documentation tools, with 40-50% of valuable conversations going undocumented.

Beyond addressing these workflow inefficiencies, we saw an opportunity to increase product stickiness and brand awareness by integrating directly into teams' daily communication platform.

By creating a seamless Slack integration, we could both solve a critical user pain point and establish our product as an essential part of teams' everyday workflows, while expanding our marketing reach through increased visibility in the Slack ecosystem.
‍

Challenges

  1. Context switching cost: Platform switching led to 40-50% of valuable conversations being lost or forgotten
  2. Development Constraints: Aggressive 4-week timeline required careful feature prioritization
  3. Technical concerns: Rapid development cycle created maintenance and scalability concerns

Execution

  1. Development Framework: Implemented Slack's Block Kit for rapid, efficient development and deployment
  2. Performance Optimization: Built lightning-fast search functionality with consistent 0.5s response time
  3. Knowledge Management: Created sophisticated real-time content capture and organization capabilities with slack workflows

Wins

  1. Integration Success: Successfully bridged communication-documentation gap by seamlessly connecting Slack and documentation workflows
  2. Knowledge Impact: Achieved ~2x increase in knowledge capture through automated conversation documentation
  3. Productivity Boost: Enhanced team productivity through streamlined workflow integration, reducing context switching by ~50%

Learnings

  1. Technical Debt: Accelerated development timeline resulted in architectural compromises that require future optimization and refactoring
  2. Adoption Challenges: Rapid rollout limited our ability to properly educate and onboard users to the new features
  3. Resource Allocation: Insufficient time for comprehensive user training and awareness campaigns led to lower initial feature discovery rates
more experience
Emerging market leader of waste management software solutions enabling haulers to streamline operations, optimize efficiency, and maximize profitability through integrated business management tools.
See more
Hualerhero.com
HAULER HERO
Leading SaaS platform for business documentation and training that streamlines onboarding, reduces redundancy, and enables scalable growth through improved operational efficiency.
B2b SaaS | Enterprise Martech
Integrate.com
See more
Integrate
See more
HomeArtDesignAbout
The latest articles in your inbox.
Excellent 🤌 😎
Oh no. Try again? 😕
ZacElletson ©