Background

Kaitongo, a legal tech startup, provides innovative solutions for lawyers. When I joined as an intern, I became their first in-house designer after a period of relying on a consultant to design their app. Initially tasked with handling various design projects, I quickly noticed significant inconsistencies in the design and inefficiencies in the process.

These issues were impacting product development speed, consistency, and user experience. Recognizing the potential for improvement, I proposed and led the development of Kaitongo’s first-ever design library—a project that would streamline processes and elevate the overall product experience.

Challenge and Goals

At Kaitongo, I encountered several key challenges that needed to be addressed:

1. Inconsistent UI Elements: Mismatched styles created confusion and gave the product an unfinished look that didn’t resonate with legal professionals.

2. Lack of Component-Based Design: The absence of reusable components slowed development by requiring repetitive work for each feature.

3. Inefficient Collaboration: Without a single source of truth for components, team members often struggled to identify the latest versions, leading to inefficiencies.

4. Impact on User Experience: These issues hurt user satisfaction and limited Kaitongo’s ability to attract and retain clients.

Goals: My primary goal was to create a reusable design library that would:

• Improve visual consistency across the platform.

• Streamline development workflows by introducing standardized components.

• Enhance user experience through cohesive design principles.

My Deliverables

As Kaitongo’s first in-house designer, I spearheaded the creation of our comprehensive design library. This involved balancing ongoing feature development with building a scalable system from scratch. My responsibilities included:

• Conducting thorough design audits and competitor analyses to define our unique design direction, tone, and style.

• Creating and iterating on initial components based on stakeholder and user feedback.

• Collaborating closely with developers to ensure feasibility and consistency in implementation.

• Establishing documentation practices for component anatomy and usage guidelines.

• Overseeing the final review and approval process for all components.

This project challenged me to rapidly develop expertise in both UX/UI design and design systems while delivering measurable improvements to Kaitongo’s design processes and product consistency.

Research

To address these challenges, I conducted ongoing research using multiple methods:

Key Research Methods:

• Self-Directed Learning: Studied established systems like Material Design and Atlassian to understand best practices in simplicity and consistency.

• User Feedback: During product presentations, I identified issues such as poor visual hierarchy and ineffective color usage that impacted usability.

• Design Audit: Analyzed our UI thoroughly, uncovering inconsistencies in visual language and areas for improvement.

• Competitor Analysis: Reviewed legal tech competitors to identify industry-specific patterns we could adapt.

Key Findings: This research revealed the need to improve visual hierarchy, use color more effectively, maintain consistency across elements, and simplify complex legal concepts through intuitive design.

Design

As someone new to UX/UI design systems at the time, I embraced a learn-by-doing approach during this phase. My focus was on aligning our design direction with user expectations while representing Kaitongo’s brand effectively.Key Deliverables:

1. Typography: Optimized type scale, spacing, height, rems, and paragraph height for various densities.

2. Color System: Defined primary, secondary, semantic, and accent colors alongside text emphasis guidelines.

3. Layout: Developed responsive design guidelines with breakpoints for adaptability across devices.

4. Core Components: Designed buttons (Primary, Secondary, Ghost), tabs, list items, global navigation, and cards.

5. Visual Elements: Built an iconography library and created empty state designs.

Implementation

The implementation phase focused on ensuring successful adoption of the new design library:

• Provided ongoing support during implementation by addressing developer questions promptly.

• Ensured accurate translation of designs into code through close collaboration with developers.

• Maintained regular check-ins to resolve any concerns or misalignments during implementation.

– Styling documentation

– Components documentation

This collaborative approach ensured smooth adoption of the new system while maintaining consistency across all components.

Results

The implementation of Kaitongo’s design library delivered measurable improvements:Quantifiable Outcomes:

1. Standardizing UI components reduced development time by over 20%.

2. Improved usability increased user engagement by 25–40%.

3. Enhanced consistency contributed to a 15% boost in user conversion rates.

Key Learnings:

1. Collaboration is Crucial: Regular communication ensured alignment between design and development teams.

2. Prototyping Matters: Early mockups helped secure stakeholder buy-in by illustrating potential outcomes.

3. Adaptability is Key: Working within resource constraints taught me how to be resourceful in fast-paced environments.

These results demonstrated how a well-executed design library can significantly improve both development efficiency and user satisfaction while providing valuable lessons for future initiatives.