Paper Design System

Establishing voice, tone, foundational elements and components for a comprehensive lease management application.

Objective

Establish the foundational voice, tone, and core components for Visual Lease's first formalized design system to ensure consistency across lease management applications.

My Role

Define Voice and Tone

Foundation Exploration

Design Direction

Component Design

Team

4 Product Designers

1 Developers

Cross Collaboration

Product Design

Engineering Team

Tools

Figma

Figjam

The Challenge

For years, Visual Lease lacked any formalized design system, resulting in inconsistent user experiences, duplicated design efforts, and technical debt across multiple product teams.

Inconsistent Patterns

Inconsistent usage of icons, text, and colors across all applications created confusion and poor user experiences.

Siloed Teams

Teams worked independently without shared guidelines, creating disjointed communication and conflicting directions.

Duplicated Components

Every new project created new component libraries, leading to wasted effort and inconsistent experiences.

Pressure for Speed

Constant pressure for solutions without proper discovery and research led to rushed, inconsistent implementations.

Defining Our Voice

Tone Through Common Interaction

After defining the Visual Lease platform’s audience, our team explored desired tone, energy, and style through a common-interaction exercise to align on how we want to communicate with users.

Brand Personality Traits and Values

Our team conducted exercises to explore and refine the language that defines Visual Lease's design direction. This allowed us to align key terms with our vision, which gave us the final descriptors that would guide all design decisions.

40+

Words Explored

Discussed and refined over 40 descriptive words to define our design direction.

5

Team Members

Collaborative effort across the entire design team for alignment.

3

Final Descriptors

Welcoming, Polished, and Timeless became our guiding principles.

Welcoming

INVITING AND APPROACHABLE

We are inviting and approachable. We want everyone to feel both comfortable and valued. We understand that complex does not mean exclusionary; we strive to provide a sense of familiarity so that everyone feels respected and supported.

Polished

COMPREHENSIVE AND REFINED

We are comprehensive and thorough, yet refined. We believe that meticulousness and an abundance of detail can and should coexist with simplicity and conciseness. We achieve this by being organized and thoughtful.

Timeless

CLASSIC AND ENDURING

We are classic and enduring. We don't give into trends. Our value comes from being relevant and reliable for generations. We're consistently impressive, offering a bit of sophistication that is impervious to time.

Foundations Exploration

The team started exploring foundation elements to support our a design direction while maintaining accessibility standards throughout the process. We explored look and feel alongside team voting sessions on preferred directions.

Typography

Accessibility Tested

WCAG AA Compliant

Multi-weight Support

We evaluated multiple typeface options to establish a typographic hierarchy that balances readability, accessibility, and brand expression. Each option was tested across different contexts and use cases.

Typography

48%

52%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark value

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D5

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D6

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Selected Font

Color Pallet

Accessibility Tested

WCAG AA Compliant

Colorblind Simulation Tested

Our color exploration focused on creating harmonious palettes that support both functional and emotional design needs. Each palette was tested for contrast ratios and accessibility compliance across all tonal variations.

 

Our main challenge was making the primary color teal WCAG AA compliant without losing the trustworthy, professional character that made it central to our brand. We solved the problem by developing a systematic approach to darken mid-tone shades (30-50) while preserving the teal character.

Failed Accessibility Requirements

20

30

40

50

60

70

80

WCAG AA Compliant Solution

20

30

40

50

60

70

80

Semantic Colors: Easier Wins

While teal was our biggest challenge, we refined the color palette for success, warning, and error states.

Success and Positive Feedback

More natural compliance

Errors and Destructive Actions

Minor refinement

Warning and Important Notices

Shifted from orange

Iconography

Accessibility Tested

Scalable SVG format

Proper alt text for screen readers

We evaluated multiple icon libraries to find the right balance of consistency, comprehensiveness, and visual appeal. Each library was assessed for scalability, accessibility features, and alignment with our design principles.

Iconography

Lucide

836 icons consistant stroke width

  • 2px stroke
  • 24px grid
  • Open source
  • Doesn’t fit brand personality

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Remix

2469 icons comprehensive coverage

Selected Font

  • Dual style
  • Large library
  • Business friendly
  • System icons

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Material Outlined

750 icons clean minimal style

  • Outlined stroke
  • 24px base size
  • Consistent weight
  • Smaller library

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Design Direction

 

After our collaborative exploration phase, we each voted on the direction we liked best based on how well it embodied our three core values: Welcoming, Polished, and Timeless. The winning direction became the foundation for our component development and I started working on an initial set of components to build.

Evaluation Criteria

  • Alignment with Welcoming, Polished, Timeless values
  • Accessibility and contrast requirements
  • Scalability across different component types
  • Technical feasibility for implementation

Component Creation Process

Creating Asana Tickets

We organized the UI kit build by creating detailed Asana tickets for each component, including clear acceptance criteria. Every component was reviewed, refined, and documented to maintain consistency and quality.

My Component Contributions

Text Fields

Designed a comprehensive text field system that could handle various input types common in lease management workflows. The fields needed to be both welcoming for new users and polished enough for complex data entry tasks.

 

Key Considerations

  • Clear visual hierarchy and labeling
  • Consistent error and validation states
  • Support for various data types (currency, dates, text)
  • Accessibility compliance for screen readers

Badges

Created a badge system for displaying lease statuses, priority levels, and other categorical information. The badges needed to be instantly recognizable while maintaining our polished aesthetic and ensuring accessibility.

 

Design Requirements

  • Clear visual distinction between statuses
  • Color-blind friendly color combinations
  • Consistent sizing and typography treatment
  • Scalable across different contexts

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Default

Small

Grey

Green

Yellow

Red

Tags

Developed an interactive tag system for categorizing and filtering lease properties. Tags needed to be both addable and removable, with clear affordances for interaction while maintaining our timeless design principles.

 

Interaction States

  • Default, hover, and active states
  • Removable tags with clear close affordances
  • Group selection and batch operations
  • Keyboard navigation support

Project Transition

After completing the foundational work on voice and tone definition, exploring design directions, and creating my assigned components, the project was handed off to another team member for continuation and completion of the design system while I focused on other initiatives.

 

What I Delivered

  • Core brand descriptors with definitions
  • Foundation elements like colors, font, spacing, and icons
  • Complete text field component system
  • Badge system with multiple variants and states
  • Interactive tag component with removal functionality

Project Outcomes

27%

Development Speed Improvement

32%

Reduction in Design Insistences

23%

Increase in User Satisfaction Ratings

Takeaways

Collaborative Definition

Working as a team to define voice and tone ensured buy-in and created a shared understanding of design principles.

Foundation First

Starting with core components like text fields and badges, and labels established patterns that could be extended to more complex elements.

Accessibility by Design

Building accessibility considerations into every component from the beginning ensured compliance and inclusive design.

Paper Design System

Establishing voice, tone, foundational elements and components for a comprehensive lease management application.

Objective

Establish the foundational voice, tone, and core components for Visual Lease's first formalized design system to ensure consistency across lease management applications.

My Role

Define Voice and Tone

Foundation Exploration

Design Direction Component Design

Team

4 Product Designers

1 Developers

Cross Collaboration

Product Design

Engineering Team

Tools

Figma

Figjam

The Challenge

For years, Visual Lease lacked any formalized design system, resulting in inconsistent user experiences, duplicated design efforts, and technical debt across multiple product teams.

Inconsistent Patterns

Inconsistent usage of icons, text, and colors across all applications created confusion and poor user experiences.

Duplicated Components

Every new project created new component libraries, leading to wasted effort and inconsistent experiences.

Siloed Teams

Teams worked independently without shared guidelines, creating disjointed communication and conflicting directions.

Pressure for Speed

Constant pressure for solutions without proper discovery and research led to rushed, inconsistent implementations.

Defining Our Voice

Tone Through Common Interaction

After defining the Visual Lease platform’s audience, our team explored desired tone, energy, and style through a common-interaction exercise to align on how we want to communicate with users.

Brand Personality Traits and Values

Our team conducted exercises to explore and refine the language that defines Visual Lease's design direction. This allowed us to align key terms with our vision, which gave us the final descriptors that would guide all design decisions.

40+

Words Explored

Discussed and refined over 40 descriptive words to define our design direction.

5

Team Members

Collaborative effort across the entire design team for alignment.

3

Final Descriptors

Welcoming, Polished, and Timeless became our guiding principles.

Welcoming

INVITING AND APPROACHABLE

We are inviting and approachable. We want everyone to feel both comfortable and valued. We understand that complex does not mean exclusionary; we strive to provide a sense of familiarity so that everyone feels respected and supported.

Polished

COMPREHENSIVE AND REFINED

We are comprehensive and thorough, yet refined. We believe that meticulousness and an abundance of detail can and should coexist with simplicity and conciseness. We achieve this by being organized and thoughtful.

Timeless

CLASSIC AND ENDURING

We are classic and enduring. We don't give into trends. Our value comes from being relevant and reliable for generations. We're consistently impressive, offering a bit of sophistication that is impervious to time.

Foundations Exploration

The team started exploring foundation elements to support our a design direction while maintaining accessibility standards throughout the process. We explored look and feel alongside team voting sessions on preferred directions.

Typography

Accessibility Tested

WCAG AA Compliant

Multi-weight Support

We evaluated multiple typeface options to establish a typographic hierarchy that balances readability, accessibility, and brand expression. Each option was tested across different contexts and use cases.

Typography

48%

52%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark value

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D5

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D6

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Selected Font

Color Pallet

Accessibility Tested

WCAG AA Compliant

Colorblind Simulation Tested

Our color exploration focused on creating harmonious palettes that support both functional and emotional design needs. Each palette was tested for contrast ratios and accessibility compliance across all tonal variations.

 

Our main challenge was making the primary color teal WCAG AA compliant without losing the trustworthy, professional character that made it central to our brand. We solved the problem by developing a systematic approach to darken mid-tone shades (30-50) while preserving the teal character.

Failed Accessibility Requirements

20

30

40

50

60

70

80

WCAG AA Compliant Solution

20

30

40

50

60

70

80

Semantic Colors: Easier Wins

While teal was our biggest challenge, we refined the color palette for success, warning, and error states.

Success and Positive Feedback

More natural compliance

Errors and Destructive Actions

Minor refinement

Warning and Important Notices

Shifted from orange

Iconography

Accessibility Tested

Scalable SVG format

Proper alt text for screen readers

We evaluated multiple icon libraries to find the right balance of consistency, comprehensiveness, and visual appeal. Each library was assessed for scalability, accessibility features, and alignment with our design principles.

Iconography

Lucide

836 icons consistant stroke width

  • 2px stroke
  • 24px grid
  • Open source
  • Doesn’t fit brand personality

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Remix

2469 icons comprehensive coverage

Selected Font

  • Dual style
  • Large library
  • Business friendly
  • System icons

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Material Outlined

750 icons clean minimal style

  • Outlined stroke
  • 24px base size
  • Consistent weight
  • Smaller library

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Design Direction

 

After our collaborative exploration phase, we each voted on the direction we liked best based on how well it embodied our three core values: Welcoming, Polished, and Timeless. The winning direction became the foundation for our component development and I started working on an initial set of components to build.

Evaluation Criteria

  • Alignment with Welcoming, Polished, Timeless values
  • Accessibility and contrast requirements
  • Scalability across different component types
  • Technical feasibility for implementation

Component Creation Process

Creating Asana Tickets

We organized the UI kit build by creating detailed Asana tickets for each component, including clear acceptance criteria. Every component was reviewed, refined, and documented to maintain consistency and quality.

My Component Contributions

 

Text Fields

Designed a comprehensive text field system that could handle various input types common in lease management workflows. The fields needed to be both welcoming for new users and polished enough for complex data entry tasks.

 

Key Considerations

  • Clear visual hierarchy and labeling
  • Consistent error and validation states
  • Support for various data types (currency, dates, text)
  • Accessibility compliance for screen readers

Badges

Created a badge system for displaying lease statuses, priority levels, and other categorical information. The badges needed to be instantly recognizable while maintaining our polished aesthetic and ensuring accessibility.

 

Design Requirements

  • Clear visual distinction between statuses
  • Color-blind friendly color combinations
  • Consistent sizing and typography treatment
  • Scalable across different contexts

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Default

Small

Grey

Green

Yellow

Red

Tags

Developed an interactive tag system for categorizing and filtering lease properties. Tags needed to be both addable and removable, with clear affordances for interaction while maintaining our timeless design principles.

 

Interaction States

  • Default, hover, and active states
  • Removable tags with clear close affordances
  • Group selection and batch operations
  • Keyboard navigation support

Project Transition

After completing the foundational work on voice and tone definition, exploring design directions, and creating my assigned components, the project was handed off to another team member for continuation and completion of the design system while I focused on other initiatives.

 

What I Delivered

  • Core brand descriptors with definitions
  • Foundation elements like colors, font, spacing, and icons
  • Complete text field component system
  • Badge system with multiple variants and states
  • Interactive tag component with removal functionality

Project Outcomes

27%

Development Speed Improvement

32%

Reduction in Design Insistences

23%

Increase in User Satisfaction Ratings

Takeaways

Collaborative Definition

Working as a team to define voice and tone ensured buy-in and created a shared understanding of design principles.

Foundation First

Starting with core components like text fields and badges, and labels established patterns that could be extended to more complex elements.

Accessibility by Design

Building accessibility considerations into every component from the beginning ensured compliance and inclusive design.

Paper Design System

Establishing voice, tone, foundational elements and components for a comprehensive lease management application.

Objective

Establish the foundational voice, tone, and core components for Visual Lease's first formalized design system to ensure consistency across lease management applications.

My Role

Define Voice and Tone

Foundation Exploration

Design Direction Component Design

Team

4 Product Designers

1 Developers

Cross Collaboration

Product Design

Engineering Team

Tools

Figma

Figjam

The Challenge

For years, Visual Lease lacked any formalized design system, resulting in inconsistent user experiences, duplicated design efforts, and technical debt across multiple product teams.

Inconsistent Patterns

Inconsistent usage of icons, text, and colors across all applications created confusion and poor user experiences.

Duplicated Components

Every new project created new component libraries, leading to wasted effort and inconsistent experiences.

Siloed Teams

Teams worked independently without shared guidelines, creating disjointed communication and conflicting directions.

Pressure for Speed

Constant pressure for solutions without proper discovery and research led to rushed, inconsistent implementations.

Defining Our Voice

Tone Through Common Interaction

After defining the Visual Lease platform’s audience, our team explored desired tone, energy, and style through a common-interaction exercise to align on how we want to communicate with users.

Brand Personality Traits and Values

Our team conducted exercises to explore and refine the language that defines Visual Lease's design direction. This allowed us to align key terms with our vision, which gave us the final descriptors that would guide all design decisions.

40+

Words Explored

Discussed and refined over 40 descriptive words to define our design direction.

5

Team Members

Collaborative effort across the entire design team for alignment.

3

Final Descriptors

Welcoming, Polished, and Timeless became our guiding principles.

Welcoming

INVITING AND APPROACHABLE

We are inviting and approachable. We want everyone to feel both comfortable and valued. We understand that complex does not mean exclusionary; we strive to provide a sense of familiarity so that everyone feels respected and supported.

Polished

COMPREHENSIVE AND REFINED

We are comprehensive and thorough, yet refined. We believe that meticulousness and an abundance of detail can and should coexist with simplicity and conciseness. We achieve this by being organized and thoughtful.

Timeless

CLASSIC AND ENDURING

We are classic and enduring. We don't give into trends. Our value comes from being relevant and reliable for generations. We're consistently impressive, offering a bit of sophistication that is impervious to time.

Foundations Exploration

The team started exploring foundation elements to support our a design direction while maintaining accessibility standards throughout the process. We explored look and feel alongside team voting sessions on preferred directions.

Typography

Accessibility Tested

WCAG AA Compliant

Multi-weight Support

We evaluated multiple typeface options to establish a typographic hierarchy that balances readability, accessibility, and brand expression. Each option was tested across different contexts and use cases.

Typography

48%

52%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark value

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D5

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D6

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Selected Font

Color Pallet

Accessibility Tested

WCAG AA Compliant

Colorblind Simulation Tested

Our color exploration focused on creating harmonious palettes that support both functional and emotional design needs. Each palette was tested for contrast ratios and accessibility compliance across all tonal variations.

 

Our main challenge was making the primary color teal WCAG AA compliant without losing the trustworthy, professional character that made it central to our brand. We solved the problem by developing a systematic approach to darken mid-tone shades (30-50) while preserving the teal character.

Failed Accessibility Requirements

20

30

40

50

60

70

80

WCAG AA Compliant Solution

20

30

40

50

60

70

80

Semantic Colors: Easier Wins

While teal was our biggest challenge, we refined the color palette for success, warning, and error states.

Success and Positive Feedback

More natural compliance

Errors and Destructive Actions

Minor refinement

Warning and Important Notices

Shifted from orange

Iconography

Accessibility Tested

Scalable SVG format

Proper alt text for screen readers

We evaluated multiple icon libraries to find the right balance of consistency, comprehensiveness, and visual appeal. Each library was assessed for scalability, accessibility features, and alignment with our design principles.

Iconography

Lucide

836 icons consistant stroke width

  • 2px stroke
  • 24px grid
  • Open source
  • Doesn’t fit brand personality

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Remix

2469 icons comprehensive coverage

Selected Font

  • Dual style
  • Large library
  • Business friendly
  • System icons

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Material Outlined

750 icons clean minimal style

  • Outlined stroke
  • 24px base size
  • Consistent weight
  • Smaller library

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Design Direction

 

After our collaborative exploration phase, we each voted on the direction we liked best based on how well it embodied our three core values: Welcoming, Polished, and Timeless. The winning direction became the foundation for our component development and I started working on an initial set of components to build.

Evaluation Criteria

  • Alignment with Welcoming, Polished, Timeless values
  • Accessibility and contrast requirements
  • Scalability across different component types
  • Technical feasibility for implementation

Component Creation Process

Creating Asana Tickets

We organized the UI kit build by creating detailed Asana tickets for each component, including clear acceptance criteria. Every component was reviewed, refined, and documented to maintain consistency and quality.

My Component Contributions

 

Text Fields

Designed a comprehensive text field system that could handle various input types common in lease management workflows. The fields needed to be both welcoming for new users and polished enough for complex data entry tasks.

 

Key Considerations

  • Clear visual hierarchy and labeling
  • Consistent error and validation states
  • Support for various data types (currency, dates, text)
  • Accessibility compliance for screen readers

Badges

Created a badge system for displaying lease statuses, priority levels, and other categorical information. The badges needed to be instantly recognizable while maintaining our polished aesthetic and ensuring accessibility.

 

Design Requirements

  • Clear visual distinction between statuses
  • Color-blind friendly color combinations
  • Consistent sizing and typography treatment
  • Scalable across different contexts

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Default

Small

Grey

Green

Yellow

Red

Tags

Developed an interactive tag system for categorizing and filtering lease properties. Tags needed to be both addable and removable, with clear affordances for interaction while maintaining our timeless design principles.

 

Interaction States

  • Default, hover, and active states
  • Removable tags with clear close affordances
  • Group selection and batch operations
  • Keyboard navigation support

Project Transition

After completing the foundational work on voice and tone definition, exploring design directions, and creating my assigned components, the project was handed off to another team member for continuation and completion of the design system while I focused on other initiatives.

 

What I Delivered

  • Core brand descriptors with definitions
  • Foundation elements like colors, font, spacing, and icons
  • Complete text field component system
  • Badge system with multiple variants and states
  • Interactive tag component with removal functionality

Project Outcomes

27%

Development Speed Improvement

32%

Reduction in Design Insistences

23%

Increase in User Satisfaction Ratings

Takeaways

Collaborative Definition

Working as a team to define voice and tone ensured buy-in and created a shared understanding of design principles.

Foundation First

Starting with core components like text fields and badges, and labels established patterns that could be extended to more complex elements.

Accessibility by Design

Building accessibility considerations into every component from the beginning ensured compliance and inclusive design.

Paper Design System

Establishing voice, tone, foundational elements and components for a comprehensive lease management application.

Objective

Establish the foundational voice, tone, and core components for Visual Lease's first formalized design system to ensure consistency across lease management applications.

My Role

Define Voice and Tone

Foundation Exploration

Design Direction Component Design

Team

4 Product Designers

1 Developers

Cross Collaboration

Product Design

Engineering Team

Tools

Figma

Figjam

The Challenge

For years, Visual Lease lacked any formalized design system, resulting in inconsistent user experiences, duplicated design efforts, and technical debt across multiple product teams.

Inconsistent Patterns

Inconsistent usage of icons, text, and colors across all applications created confusion and poor user experiences.

Duplicated Components

Every new project created new component libraries, leading to wasted effort and inconsistent experiences.

Siloed Teams

Teams worked independently without shared guidelines, creating disjointed communication and conflicting directions.

Pressure for Speed

Constant pressure for solutions without proper discovery and research led to rushed, inconsistent implementations.

Defining Our Voice

Tone Through Common Interaction

After defining the Visual Lease platform’s audience, our team explored desired tone, energy, and style through a common-interaction exercise to align on how we want to communicate with users.

Brand Personality Traits and Values

Our team conducted exercises to explore and refine the language that defines Visual Lease's design direction. This allowed us to align key terms with our vision, which gave us the final descriptors that would guide all design decisions.

40+

Words Explored

Discussed and refined over 40 descriptive words to define our design direction.

5

Team Members

Collaborative effort across the entire design team for alignment.

3

Final Descriptors

Welcoming, Polished, and Timeless became our guiding principles.

Welcoming

INVITING AND APPROACHABLE

We are inviting and approachable. We want everyone to feel both comfortable and valued. We understand that complex does not mean exclusionary; we strive to provide a sense of familiarity so that everyone feels respected and supported.

Polished

COMPREHENSIVE AND REFINED

We are comprehensive and thorough, yet refined. We believe that meticulousness and an abundance of detail can and should coexist with simplicity and conciseness. We achieve this by being organized and thoughtful.

Timeless

CLASSIC AND ENDURING

We are classic and enduring. We don't give into trends. Our value comes from being relevant and reliable for generations. We're consistently impressive, offering a bit of sophistication that is impervious to time.

Foundations Exploration

The team started exploring foundation elements to support our a design direction while maintaining accessibility standards throughout the process. We explored look and feel alongside team voting sessions on preferred directions.

Typography

Accessibility Tested

WCAG AA Compliant

Multi-weight Support

We evaluated multiple typeface options to establish a typographic hierarchy that balances readability, accessibility, and brand expression. Each option was tested across different contexts and use cases.

Typography

48%

52%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark value

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D5

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D6

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Selected Font

Color Pallet

Accessibility Tested

WCAG AA Compliant

Colorblind Simulation Tested

Our color exploration focused on creating harmonious palettes that support both functional and emotional design needs. Each palette was tested for contrast ratios and accessibility compliance across all tonal variations.

 

Our main challenge was making the primary color teal WCAG AA compliant without losing the trustworthy, professional character that made it central to our brand. We solved the problem by developing a systematic approach to darken mid-tone shades (30-50) while preserving the teal character.

Failed Accessibility Requirements

20

30

40

50

60

70

80

WCAG AA Compliant Solution

20

30

40

50

60

70

80

Semantic Colors: Easier Wins

While teal was our biggest challenge, we refined the color palette for success, warning, and error states.

Success and Positive Feedback

More natural compliance

Errors and Destructive Actions

Minor refinement

Warning and Important Notices

Shifted from orange

Iconography

Accessibility Tested

Scalable SVG format

Proper alt text for screen readers

We evaluated multiple icon libraries to find the right balance of consistency, comprehensiveness, and visual appeal. Each library was assessed for scalability, accessibility features, and alignment with our design principles.

Iconography

Lucide

836 icons consistant stroke width

  • 2px stroke
  • 24px grid
  • Open source
  • Doesn’t fit brand personality

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Remix

2469 icons comprehensive coverage

Selected Font

  • Dual style
  • Large library
  • Business friendly
  • System icons

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Material Outlined

750 icons clean minimal style

  • Outlined stroke
  • 24px base size
  • Consistent weight
  • Smaller library

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Design Direction

 

After our collaborative exploration phase, we each voted on the direction we liked best based on how well it embodied our three core values: Welcoming, Polished, and Timeless. The winning direction became the foundation for our component development and I started working on an initial set of components to build.

Evaluation Criteria

  • Alignment with Welcoming, Polished, Timeless values
  • Accessibility and contrast requirements
  • Scalability across different component types
  • Technical feasibility for implementation

Component Creation Process

Creating Asana Tickets

We organized the UI kit build by creating detailed Asana tickets for each component, including clear acceptance criteria. Every component was reviewed, refined, and documented to maintain consistency and quality.

My Component Contributions

 

Text Fields

Designed a comprehensive text field system that could handle various input types common in lease management workflows. The fields needed to be both welcoming for new users and polished enough for complex data entry tasks.

 

Key Considerations

  • Clear visual hierarchy and labeling
  • Consistent error and validation states
  • Support for various data types (currency, dates, text)
  • Accessibility compliance for screen readers

Badges

Created a badge system for displaying lease statuses, priority levels, and other categorical information. The badges needed to be instantly recognizable while maintaining our polished aesthetic and ensuring accessibility.

 

Design Requirements

  • Clear visual distinction between statuses
  • Color-blind friendly color combinations
  • Consistent sizing and typography treatment
  • Scalable across different contexts

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Default

Small

Grey

Green

Yellow

Red

Tags

Developed an interactive tag system for categorizing and filtering lease properties. Tags needed to be both addable and removable, with clear affordances for interaction while maintaining our timeless design principles.

 

Interaction States

  • Default, hover, and active states
  • Removable tags with clear close affordances
  • Group selection and batch operations
  • Keyboard navigation support

Project Transition

After completing the foundational work on voice and tone definition, exploring design directions, and creating my assigned components, the project was handed off to another team member for continuation and completion of the design system while I focused on other initiatives.

 

What I Delivered

  • Core brand descriptors with definitions
  • Foundation elements like colors, font, spacing, and icons
  • Complete text field component system
  • Badge system with multiple variants and states
  • Interactive tag component with removal functionality

Project Outcomes

27%

Development Speed Improvement

32%

Reduction in Design Insistences

23%

Increase in User Satisfaction Ratings

Takeaways

Collaborative Definition

Working as a team to define voice and tone ensured buy-in and created a shared understanding of design principles.

Foundation First

Starting with core components like text fields and badges, and labels established patterns that could be extended to more complex elements.

Accessibility by Design

Building accessibility considerations into every component from the beginning ensured compliance and inclusive design.

Paper Design System

Establishing voice, tone, foundational elements and components for a comprehensive lease management application.

Objective

Establish the foundational voice, tone, and core components for Visual Lease's first formalized design system to ensure consistency across lease management applications.

My Role

Define Voice and Tone

Foundation Exploration

Design Direction Component Design

Team

4 Product Designers

1 Developers

Cross Collaboration

Product Design

Engineering Team

Tools

Figma

Figjam

The Challenge

For years, Visual Lease lacked any formalized design system, resulting in inconsistent user experiences, duplicated design efforts, and technical debt across multiple product teams.

Inconsistent Patterns

Inconsistent usage of icons, text, and colors across all applications created confusion and poor user experiences.

Duplicated Components

Every new project created new component libraries, leading to wasted effort and inconsistent experiences.

Siloed Teams

Teams worked independently without shared guidelines, creating disjointed communication and conflicting directions.

Pressure for Speed

Constant pressure for solutions without proper discovery and research led to rushed, inconsistent implementations.

Defining Our Voice

Tone Through Common Interaction

After defining the Visual Lease platform’s audience, our team explored desired tone, energy, and style through a common-interaction exercise to align on how we want to communicate with users.

Brand Personality Traits and Values

Our team conducted exercises to explore and refine the language that defines Visual Lease's design direction. This allowed us to align key terms with our vision, which gave us the final descriptors that would guide all design decisions.

40+

Words Explored

Discussed and refined over 40 descriptive words to define our design direction.

5

Team Members

Collaborative effort across the entire design team for alignment.

3

Final Descriptors

Welcoming, Polished, and Timeless became our guiding principles.

Welcoming

INVITING AND APPROACHABLE

We are inviting and approachable. We want everyone to feel both comfortable and valued. We understand that complex does not mean exclusionary; we strive to provide a sense of familiarity so that everyone feels respected and supported.

Polished

COMPREHENSIVE AND REFINED

We are comprehensive and thorough, yet refined. We believe that meticulousness and an abundance of detail can and should coexist with simplicity and conciseness. We achieve this by being organized and thoughtful.

Timeless

CLASSIC AND ENDURING

We are classic and enduring. We don't give into trends. Our value comes from being relevant and reliable for generations. We're consistently impressive, offering a bit of sophistication that is impervious to time.

Foundations Exploration

The team started exploring foundation elements to support our a design direction while maintaining accessibility standards throughout the process. We explored look and feel alongside team voting sessions on preferred directions.

Typography

Accessibility Tested

WCAG AA Compliant

Multi-weight Support

We evaluated multiple typeface options to establish a typographic hierarchy that balances readability, accessibility, and brand expression. Each option was tested across different contexts and use cases.

Typography

48%

52%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark value

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D5

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D6

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Selected Font

Color Pallet

Accessibility Tested

WCAG AA Compliant

Colorblind Simulation Tested

Our color exploration focused on creating harmonious palettes that support both functional and emotional design needs. Each palette was tested for contrast ratios and accessibility compliance across all tonal variations.

 

Our main challenge was making the primary color teal WCAG AA compliant without losing the trustworthy, professional character that made it central to our brand. We solved the problem by developing a systematic approach to darken mid-tone shades (30-50) while preserving the teal character.

Failed Accessibility Requirements

20

30

40

50

60

70

80

WCAG AA Compliant Solution

20

30

40

50

60

70

80

Semantic Colors: Easier Wins

While teal was our biggest challenge, we refined the color palette for success, warning, and error states.

Success and Positive Feedback

More natural compliance

Errors and Destructive Actions

Minor refinement

Warning and Important Notices

Shifted from orange

Iconography

Accessibility Tested

Scalable SVG format

Proper alt text for screen readers

We evaluated multiple icon libraries to find the right balance of consistency, comprehensiveness, and visual appeal. Each library was assessed for scalability, accessibility features, and alignment with our design principles.

Iconography

Lucide

836 icons consistant stroke width

  • 2px stroke
  • 24px grid
  • Open source
  • Doesn’t fit brand personality

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Remix

2469 icons comprehensive coverage

Selected Font

  • Dual style
  • Large library
  • Business friendly
  • System icons

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Material Outlined

750 icons clean minimal style

  • Outlined stroke
  • 24px base size
  • Consistent weight
  • Smaller library

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Design Direction

 

After our collaborative exploration phase, we each voted on the direction we liked best based on how well it embodied our three core values: Welcoming, Polished, and Timeless. The winning direction became the foundation for our component development and I started working on an initial set of components to build.

Evaluation Criteria

  • Alignment with Welcoming, Polished, Timeless values
  • Accessibility and contrast requirements
  • Scalability across different component types
  • Technical feasibility for implementation

Component Creation Process

Creating Asana Tickets

We organized the UI kit build by creating detailed Asana tickets for each component, including clear acceptance criteria. Every component was reviewed, refined, and documented to maintain consistency and quality.

My Component Contributions

 

Text Fields

Designed a comprehensive text field system that could handle various input types common in lease management workflows. The fields needed to be both welcoming for new users and polished enough for complex data entry tasks.

 

Key Considerations

  • Clear visual hierarchy and labeling
  • Consistent error and validation states
  • Support for various data types (currency, dates, text)
  • Accessibility compliance for screen readers

Badges

Created a badge system for displaying lease statuses, priority levels, and other categorical information. The badges needed to be instantly recognizable while maintaining our polished aesthetic and ensuring accessibility.

 

Design Requirements

  • Clear visual distinction between statuses
  • Color-blind friendly color combinations
  • Consistent sizing and typography treatment
  • Scalable across different contexts

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Default

Small

Grey

Green

Yellow

Red

Tags

Developed an interactive tag system for categorizing and filtering lease properties. Tags needed to be both addable and removable, with clear affordances for interaction while maintaining our timeless design principles.

 

Interaction States

  • Default, hover, and active states
  • Removable tags with clear close affordances
  • Group selection and batch operations
  • Keyboard navigation support

Project Transition

After completing the foundational work on voice and tone definition, exploring design directions, and creating my assigned components, the project was handed off to another team member for continuation and completion of the design system while I focused on other initiatives.

 

What I Delivered

  • Core brand descriptors with definitions
  • Foundation elements like colors, font, spacing, and icons
  • Complete text field component system
  • Badge system with multiple variants and states
  • Interactive tag component with removal functionality

Project Outcomes

27%

Development Speed Improvement

32%

Reduction in Design Insistences

23%

Increase in User Satisfaction Ratings

Takeaways

Collaborative Definition

Working as a team to define voice and tone ensured buy-in and created a shared understanding of design principles.

Foundation First

Starting with core components like text fields and badges, and labels established patterns that could be extended to more complex elements.

Accessibility by Design

Building accessibility considerations into every component from the beginning ensured compliance and inclusive design.

Paper Design System

Establishing voice, tone, foundational elements and components for a comprehensive lease management application.

Objective

Establish the foundational voice, tone, and core components for Visual Lease's first formalized design system to ensure consistency across lease management applications.

My Role

Define Voice and Tone

Foundation Exploration

Design Direction Component Design

Team

4 Product Designers

1 Developers

Cross Collaboration

Product Design

Engineering Team

Tools

Figma

Figjam

The Challenge

For years, Visual Lease lacked any formalized design system, resulting in inconsistent user experiences, duplicated design efforts, and technical debt across multiple product teams.

Inconsistent Patterns

Inconsistent usage of icons, text, and colors across all applications created confusion and poor user experiences.

Duplicated Components

Every new project created new component libraries, leading to wasted effort and inconsistent experiences.

Siloed Teams

Teams worked independently without shared guidelines, creating disjointed communication and conflicting directions.

Pressure for Speed

Constant pressure for solutions without proper discovery and research led to rushed, inconsistent implementations.

Defining Our Voice

Tone Through Common Interaction

After defining the Visual Lease platform’s audience, our team explored desired tone, energy, and style through a common-interaction exercise to align on how we want to communicate with users.

Brand Personality Traits and Values

Our team conducted exercises to explore and refine the language that defines Visual Lease's design direction. This allowed us to align key terms with our vision, which gave us the final descriptors that would guide all design decisions.

40+

Words Explored

Discussed and refined over 40 descriptive words to define our design direction.

5

Team Members

Collaborative effort across the entire design team for alignment.

3

Final Descriptors

Welcoming, Polished, and Timeless became our guiding principles.

Welcoming

INVITING AND APPROACHABLE

We are inviting and approachable. We want everyone to feel both comfortable and valued. We understand that complex does not mean exclusionary; we strive to provide a sense of familiarity so that everyone feels respected and supported.

Polished

COMPREHENSIVE AND REFINED

We are comprehensive and thorough, yet refined. We believe that meticulousness and an abundance of detail can and should coexist with simplicity and conciseness. We achieve this by being organized and thoughtful.

Timeless

CLASSIC AND ENDURING

We are classic and enduring. We don't give into trends. Our value comes from being relevant and reliable for generations. We're consistently impressive, offering a bit of sophistication that is impervious to time.

Foundations Exploration

The team started exploring foundation elements to support our a design direction while maintaining accessibility standards throughout the process. We explored look and feel alongside team voting sessions on preferred directions.

Typography

Accessibility Tested

WCAG AA Compliant

Multi-weight Support

We evaluated multiple typeface options to establish a typographic hierarchy that balances readability, accessibility, and brand expression. Each option was tested across different contexts and use cases.

Typography

48%

52%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark value

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D1

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D2

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D3

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D4

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D5

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

53%

47%

Weight

Size

Line Height

Example

H1

Regular

36px/2.25rem

44px/2.75rem

Capitalize on low hanging fruit to identify a ballpark

H2

Regular

28px/1.75rem

36px/2.25rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta

H3

Regular

24px/1.5rem

32px/2rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

H4

Regular

20px/1.25rem

28px/1.75rem

Capitalize on low hanging fruit to identify a ballpark value added activity to beta test

P1

Regular

16px/1rem

24px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

P2

Bold

14px/0.875rem

20px/1.25rem

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation.

Typeface D6

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxuz 1234567890 !@#$%^&*()-+.,

Records

ESG

Reporting

Contacts

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Selected Font

Color Pallet

Accessibility Tested

WCAG AA Compliant

Colorblind Simulation Tested

Our color exploration focused on creating harmonious palettes that support both functional and emotional design needs. Each palette was tested for contrast ratios and accessibility compliance across all tonal variations.

 

Our main challenge was making the primary color teal WCAG AA compliant without losing the trustworthy, professional character that made it central to our brand. We solved the problem by developing a systematic approach to darken mid-tone shades (30-50) while preserving the teal character.

Failed Accessibility Requirements

20

30

40

50

60

70

80

WCAG AA Compliant Solution

20

30

40

50

60

70

80

Semantic Colors: Easier Wins

While teal was our biggest challenge, we refined the color palette for success, warning, and error states.

Success and Positive Feedback

More natural compliance

Errors and Destructive Actions

Minor refinement

Warning and Important Notices

Shifted from orange

Iconography

Accessibility Tested

Scalable SVG format

Proper alt text for screen readers

We evaluated multiple icon libraries to find the right balance of consistency, comprehensiveness, and visual appeal. Each library was assessed for scalability, accessibility features, and alignment with our design principles.

Iconography

Lucide

836 icons consistant stroke width

  • 2px stroke
  • 24px grid
  • Open source
  • Doesn’t fit brand personality

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Remix

2469 icons comprehensive coverage

Selected Font

  • Dual style
  • Large library
  • Business friendly
  • System icons

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Material Outlined

750 icons clean minimal style

  • Outlined stroke
  • 24px base size
  • Consistent weight
  • Smaller library

Records

ESG

Reporting

Contacts

Notifications

Support

Sign Out

Asset ID

Status

Record Type

Asset Type

Size

Address

State

Country

Asset Type

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Asset ID 1234

Label

Owned

Residential

900 sq/ft

4 S. Rolling Road

MD

USA

Label

Label

Search

Search Record

Filter Records

Group By

Asset

Date Range

Last 30 Days

Report

Filters

Transwestern Report

Design Direction

 

After our collaborative exploration phase, we each voted on the direction we liked best based on how well it embodied our three core values: Welcoming, Polished, and Timeless. The winning direction became the foundation for our component development and I started working on an initial set of components to build.

Evaluation Criteria

  • Alignment with Welcoming, Polished, Timeless values
  • Accessibility and contrast requirements
  • Scalability across different component types
  • Technical feasibility for implementation

Component Creation Process

Creating Asana Tickets

We organized the UI kit build by creating detailed Asana tickets for each component, including clear acceptance criteria. Every component was reviewed, refined, and documented to maintain consistency and quality.

My Component Contributions

 

Text Fields

Designed a comprehensive text field system that could handle various input types common in lease management workflows. The fields needed to be both welcoming for new users and polished enough for complex data entry tasks.

 

Key Considerations

  • Clear visual hierarchy and labeling
  • Consistent error and validation states
  • Support for various data types (currency, dates, text)
  • Accessibility compliance for screen readers

Badges

Created a badge system for displaying lease statuses, priority levels, and other categorical information. The badges needed to be instantly recognizable while maintaining our polished aesthetic and ensuring accessibility.

 

Design Requirements

  • Clear visual distinction between statuses
  • Color-blind friendly color combinations
  • Consistent sizing and typography treatment
  • Scalable across different contexts

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Default

Small

Grey

Green

Yellow

Red

Tags

Developed an interactive tag system for categorizing and filtering lease properties. Tags needed to be both addable and removable, with clear affordances for interaction while maintaining our timeless design principles.

 

Interaction States

  • Default, hover, and active states
  • Removable tags with clear close affordances
  • Group selection and batch operations
  • Keyboard navigation support

Project Transition

After completing the foundational work on voice and tone definition, exploring design directions, and creating my assigned components, the project was handed off to another team member for continuation and completion of the design system while I focused on other initiatives.

 

What I Delivered

  • Core brand descriptors with definitions
  • Foundation elements like colors, font, spacing, and icons
  • Complete text field component system
  • Badge system with multiple variants and states
  • Interactive tag component with removal functionality

Project Outcomes

27%

Development Speed Improvement

32%

Reduction in Design Insistences

23%

Increase in User Satisfaction Ratings

Takeaways

Collaborative Definition

Working as a team to define voice and tone ensured buy-in and created a shared understanding of design principles.

Foundation First

Starting with core components like text fields and badges, and labels established patterns that could be extended to more complex elements.

Accessibility by Design

Building accessibility considerations into every component from the beginning ensured compliance and inclusive design.