Project

Milton Design System

Learnster is a leading SaaS provider, offering an LMS product with advanced branding and automation tools. When I joined the company in 2021, we were a start-up without a structured design system. While Milton had been initiated, the focus had been on establishing a strong brand identity, while quickly developing features to compete with other LMS platforms.

A year in, Learnster experienced a burst of growth. I was one of three designers creating user experiences and saw firsthand how the system gaps impeded our workflows. Without standards in place, teams lost time on rework, which slowed our development cycles. As inconsistencies and bugs grew, it became increasingly difficult for us to scale the product efficiently.

After some conversations, we agreed there was a need for a formalized, scalable design system to align teams around a shared language. The work on Milton began, and over time, my role grew to include managing the continual evolution of the design system.

Client

  • Learnster

Role

  • Design system mgmt
  • UI/UX design
  • Web accessibility

Date

Dec 2023

Tools

  • Figma
  • ClickUp
  • Notion

Design Credits

  • Daniel Eek: CDO
  • Andreas Iagoridcov: Product Designer

Our Challenges

Hidden and visible challenges illustrated in iceberg

Groundwork

Knowing that late-stage repairs tend to come at a higher cost than original development and we had limited bandwidth for fixes, it was critical to prioritize actions strategically based on urgency, value, effort, and risk.

Element Inventory

I started by documenting and categorizing our existing styles and components to get a better overview of our landscape. This made it easier to identify gaps and opportunities, while parallel feedback from teams provided valuable context and perspectives.

Inspiration

As I was new to working with fully customized design systems, I took time navigating a wealth of valuable resources and established systems (e.g., Helsinki, Material Design, and Carbon) to learn about common structures and tokens. This exploration sparked new ideas for our smaller-scale system and deepened my enthusiasm for system design.

Long-Term Goal

Make Milton a scalable and accessible design system that empowers teams to streamline workflows, accelerate innovation, collaborate efficiently, and deliver cohesive, high-quality user experiences.

Short-Term Goal

Establish a minimum viable foundation for Milton that can be scaled by current and future teams.

Strategy

Start Small

  • Use a gradual approach with a focus on high-value improvements to keep team workloads manageable, reduce risk, and facilitate quick wins.
  • Start with what we have. Reduce and fill gaps as needed.
  • Make a rough plan for the future.

Minimal Disturbance

  • Respect and protect existing work while making meaningful improvements.
  • Engage team members without overwhelming them.
  • Prioritize methods that ensure seamless, disturbance-free publishing.

First Key Priorities

  • System structure
  • Foundations: typography, colors, and layout
  • Most used and urgent components: general buttons, inputs + menus, badges, and tables
  • Accessibility improvements
  • Workflows

Structure

How can I ensure the system resources are accessible and simple for quick reference, yet comprehensive enough to cover all use cases?

Working closely with the Chief Design Officer, my first mission was to establish a user-friendly architecture for Milton. This involved organizing elements and creating standards, such as naming conventions, presentation templates, and dedicated spaces for final vs exploratory work.

We needed a better testing environment and a documentation site to house detailed guidelines. While we considered tools like Storybook, we prioritized simplicity at this stage and chose to start with ClickUp, as it was already integrated into our workflows. I organized the structure and set up templates with default sections, such as Anatomy, Accessibility, and Changelog. Although Figma wasn’t ideal for documentation, I made key guidelines available there to ensure easy access for our teams.

Foundations

It was time to work on improvements, starting with foundational elements like color and typography, the building blocks for all components and pages.

Content

As language inconsistencies increasingly impacted customers, I first used the new documentation site to add guidelines for UI text, covering letter casing, date/time formats, and error feedback.

Layout

We lacked some essential layout resources in design (e.g. responsive grids and breakpoints), which paved the way for layout issues and misalignment. Some parts were responsive, others not at all, and not everyone was aware of our spacing standard.

Key Improvements

  • Spacing: Formalized our spacing standard.
  • Breakpoints and grids: Defined breakpoints, responsive grids, layout patterns, and content sizes based on our implemented designs, with low-risk adjustments to correct unexpected behaviors and improve the experience across screen sizes. By switching to a content grid on course pages, we also corrected a critical accessibility issue.

Typography

Typography was one of the most urgent and complex areas to tackle. Text could not be zoomed. In development, we had many custom styles. In design, we faced redundancy with two similar type sets for the web (Learner and Admin views), which made inconsistencies in mirrored views unavoidable.

Key Improvements

  • Consolidation: By cross-referencing all fonts in use and merging the two type sets into one with only minor adjustments to the final styles, we created alignment and simplified our processes, while preserving existing Figma designs.
  • Accessibility: Switching from fixed to relative sizing units was an important step in ensuring that text can scale and reflow when adjusted (e.g., zoomed) by users, which is essential for some with visual impairments.
  • Scalability: Added scale, weight, line height systems to streamline management.

Color Palette

We had many colors defined that aligned well with the brand identity. The issue was legibility. We lacked color combinations with sufficient contrast for text and semantic messages, which affected everything from regular text to badges, toasts, and inputs. The absence of guidelines also made onboarding harder and increased the challenge of preventing inconsistent color usage.

Key Improvements

  • Accessibility: Updated the neutral, text, and semantic palettes to ensure that text and status symbols met at least the minimum required contrast ratio: 4.5:1 for normally sized text and 3:1 for graphical elements.
  • Standards: Incorporated background standards and brief usage guidelines to foster consistent creation.

Icons

Icon fixes were not a top priority, and most icons did not need urgent fixes in the build. However, getting them organized by status and category, and providing them with names, keywords, variant groupings, and properties was a low-risk, quick win that helped us reduce time waste and human error.

Components

Given that components were already in use and we had hundreds of design files, it was essential to avoid design breakage while also ensuring that updates could be easily published. With this in mind, I worked with the original components whenever possible and rebuilt those that required more complex updates.

Clean, Build

I like to approach component building atomically, breaking larger components into smaller, reusable pieces to optimize maintenance and load speed.

Checklist

  • Build quality: names, keywords, responsiveness, consistent styling, completeness, and properties+state animations to streamline prototyping.
  • Guidelines: minimum to thorough depending on priority.
  • Variant organization

Buttons and Inputs

Inconsistencies were especially noticeable in buttons and inputs. Existing Figma components needed repairs, while other common types were missing altogether. The team became used to the workaround of creating new, rushed versions in local files, which led to duplicated development efforts and accessibility issues, such as the lack of visual focus.

Key Improvements

  • Bridging gaps: Along with general component cleanup and spacing refinements, I focused on ensuring that designers and developers had everything they needed to create with consistency. This included adding guidelines and missing states and introducing input options and missing components (e.g. tertiary buttons, icon buttons, split buttons, textarea, quantity input, phone input, radio button group, and checkbox group).
  • Accessibility: Enhanced touch targets, standardized visual labels, and added a global focus style to ensure consistency and availability of visual focus on interactive elements for users navigating with a keyboard.

Badges

With the new text and semantic palettes, I was able to finalize the colors across all components and move forward with the prioritized task of creating a unified set of accessible badges.

Data Tables

In our data-focused product, we frequently used tables, but Milton lacked table components and standards. While designs in local files had provided a visual starting point, we urgently needed more detailed specifications to address behavior and accessibility issues impacting our customers’ ability to efficiently complete tasks. At the same time, pressure mounted to quickly introduce new table functionality to meet user requests.

Key Improvements

  • Accessible foundation: Added table components and comprehensive documentation for our most complete table style, while utilizing best practices to fill gaps and make general improvements (e.g., anatomy and touch targets). Close collaboration with our fantastic dev team facilitated quick solutions to urgent behavior issues and ensured smooth implementation of the updated foundation.
  • User experience: To make informed decisions for our future filter functionality and existing sorting, I needed to better understand the current user experience. While we didn’t have access to users, interviewing our customer success team provided valuable insights into common pain points and unmet needs. I developed an action plan to help prioritize our UX improvements. A key objective involved making options easier to find and understand, which I addressed through a low-cost redesign of sorting and bulk actions.
  • New functionality and patterns Provided new table designs informed by the research insights, including advanced filters, simple filters, a view-saving functionality, and a new table version for data-heavy views. Some were introduced as part of a new Reports feature, while others were meant to improve the experience in existing tables. By formalizing the additions as reusable patterns, we ensured greater consistency and accelerated the development of future releases.

Samples of new components added to Milton

Workflows

How can I ensure Milton supports our teams’ needs and is used as intended?

Design systems are only effective if they are adopted, which requires more than well-designed components. Along the way, we used various supporting mechanisms to maintain buy-in, encourage cross-functional collaboration, and integrate the system into our workflows.

  • Feedback loops and iteration
  • Regular discussions and dedicated Slack channels for system updates, Q&A, and feedback
  • Training sessions
  • System marketing to highlight benefits
  • Guidelines in familiar tools
  • Governance
  • Gradual rollout
  • Ongoing maintenance

Accessibility

Macro-to-Micro Lens

Although we began with a narrow scope, accessibility remained a priority at every step. The initial improvements outlined earlier set us on track to meet several key criteria.

Down the road, we received support for larger accessibility initiatives to meet WCAG AA compliance. While previous fixes had not yet been implemented, we needed an in-depth overview of our current state, so I was tasked with conducting an accessibility audit of the Learner section of the platform.

I used a combination of manual and automated testing to evaluate pages and components against WCAG’s success criteria, documenting the results in Notion. The report included detailed explanations and recommendations for resolving identified issues. To make the content more digestible, I concluded with a workshop for the product team.

Reflection

Milton's journey had just begun during my time at Learnster, but I’m proud of the progress we made and grateful for the valuable lessons we learned. It was rewarding to see the results of our hard work along the way. The platform gradually became more consistent, designers and developers felt empowered to work more efficiently, and our time time-to-market kept improving.

There were some bittersweet moments as the project concluded. I had more plans for Milton. The accessibility audit revealed more opportunities to improve accessibility, which I would have loved to incorporate into the system. Also, Figma rolled out a groundbreaking update that included token support. I had already wrapped up the foundations, but those tools would have been so helpful in this project. These experiences underscored how design systems are living resources that require dedicated systems teams with diverse skills to drive their growth.

Another key takeaway was the importance of effective cross-team collaboration. Building unity takes time and effort, but the biggest difference comes from how the team works together. The project showed how better results are achieved when everyone is in the loop and has the opportunity to contribute their expertise.