Building and scaling SkillCycle's design system
Led end-to-end platform redesign and design system, improving usability and increasing design-to-development efficiency by 50%
SkillCycle, formerly GoCoach, began as a coaching platform but expanded into a comprehensive performance and development ecosystem.
This shift introduced new personas, including managers and mentors, alongside its original user base, increasing complexity across workflows and experiences. At the same time, a recent rebrand had not yet been reflected in-product, resulting in a fragmented and inconsistent experience. The opportunity was to unify the platform and create a scalable foundation for continued growth.
My Role
PLATFORMS: DESKTOP WEB, RESPONSIVE
As the sole designer, I built the system from the ground up, collaborating with Marketing, Product, and Engineering to define reusable components and patterns. The design system became the foundation for the platform’s UI/UX, enabling both the redesign and efficient rollout of future features.
THE PROBLEM
How might we redesign our platform to reflect the new brand and build a scalable foundation for growth?
SkillCycle had recently undergone a major rebrand, but the product hadn’t caught up. Years of feature-by-feature development led to fragmented visuals, inconsistent flows, and duplicated components, with no design system to unify the experience. This created inefficiencies for engineers and confusion for users. As the platform expanded beyond coaching into a broader performance and development ecosystem, it needed a cohesive structure, a consistent visual identity, and a scalable system to support growth. The challenge was to bring the new brand to life in-product while establishing the foundation to sustain it.
MY APPROACH
I wanted to understand both product gaps and user perception from multiple angles
To understand where things were breaking down, I looked at the experience from multiple angles: usability, system structure, and user perception. I conducted a heuristic evaluation to assess interaction patterns, created a component inventory to understand system inconsistencies, and gathered user input through a client survey and internal workshop.
DISCOVERY & AUDIT
How usable is the experience?
I conducted a heuristic evaluation of the platform’s navigation, layout consistency, and interaction patterns based on Nielsen’s 10 usability heuristics. Annotating screenshots helped me highlight pain points and prioritize a list of areas to streamline the experience and address in the redesign. For example, from the navigation, I saw inconsistencies in navigation, labeling, and how actions and information were surfaced.
Brand-to-Digital Gap Analysis
I reviewed the updated brand guidelines against the existing product UI. The new identity had strong visual direction, but it had been created for marketing first. Fonts, colors, and imagery didn’t always translate cleanly into a product context. By mapping the two side by side, I could show where things aligned and where we’d need to adapt the brand for digital use.
UI & Component Inventory
When we began, there was no design system in place — every feature had previously been designed and built independently. This gave us the opportunity to start fresh. As we designed the new platform, I created foundational components like buttons, inputs, and navigation patterns, making sure they aligned with the refreshed brand. Instead of trying to retrofit old elements, we built the inventory progressively, adding each new component into a shared Figma library as it was defined. This approach allowed the design system to evolve in parallel with the platform, ensuring consistency from the start and creating a reusable foundation for future work.
DISCOVERY & AUDIT
Engagement Survey
I conducted a client engagement survey to better understand how our platform was perceived and where it could improve. The goal was to capture real feedback from users and clients about their overall experience: what felt valuable, what caused friction, and how the platform reflected (or didn’t yet reflect) our new brand direction.
The responses reinforced several of our early findings: clients valued the personalized coaching experience but often struggled to find key information or understand their progress. Many expressed a desire for a more cohesive, modern interface that felt supportive and motivating. These insights helped validate our direction, confirming that the design system and platform redesign needed to focus on clarity, visibility of progress, and a sense of support throughout the user journey.
DISCOVERY & AUDIT
Emotional Design Workshop
Alongside the visual and UX audits, I facilitated a company-wide emotional design workshop. The goal was to define how we wanted users to feel when engaging with the platform, and use that as a lens for future design decisions. Through breakout groups, teams identified emotional traits like feeling supported, confident, motivated, and seen. From there, we translated these into product principles like “Our product should simplify information so users feel clarity and accomplishment,” or “Our product should celebrate milestones to make progress rewarding.”
This exercise gave us a shared emotional north star that informed everything from interaction patterns to language and feature prioritization. It helped ensure the platform wasn’t just functional, but also emotionally resonant — making it something people would want to return to again and again.
Key findings pointed to the platform lacking high-level structure
Fragmented experience
Users struggled to build a consistent mental model due to inconsistent patterns across workflows the platform.
No scalable solution
Components and interactions were created ad hoc, slowing down both design and development
Brand ≠ Product
While the company evolved its brand, the product experience did not reflect those changes, creating a disconnect in perception.
THE SOLUTION
Building a scalable design system
BRAND IMPLEMENTATION
Translating the brand into product and documenting the foundations
The refreshed brand identity captured the company’s new direction, but it was originally created for marketing. My job was to bring that energy into the product. I adapted typography, colors, and imagery so they worked seamlessly in a digital environment without losing the character of the brand. To make sure these brand adaptations were easy to apply, I documented everything directly in Figma and our design system wiki. Tokens, usage rules, and accessibility guidance were all centralized in one place, giving designers and engineers a shared source of truth.
DESIGN SYSTEM
Crafting a comprehensive color system
The updated palette gave us a fresh foundation. To make it work across a complex platform, I organized colors into functional roles (primary, secondary, success, error) and tested them for accessibility. The result was a system that stayed true to the brand while ensuring clarity and inclusivity across the UI.
DESIGN SYSTEM
Establishing a typographic hierarchy
The brand introduced expressive typefaces that looked great in marketing but weren’t practical for dense product interfaces. I created a typography scale that paired the brand’s display style with a more legible UI typeface, defining consistent styles for headings, subheadings, and body text. This gave the product a clear hierarchy that was both functional and on-brand.
DESIGN SYSTEM
Unifying icons and imagery
Rather than building a custom icon system or relying heavily on imagery, we standardized on Material UI icons. They provided a scalable, accessible, and well-documented library that fit seamlessly with the product’s needs. I integrated them directly into the design system, applying consistent sizing, spacing, and color rules so they aligned with the brand. This gave the platform a clear and unified visual language without adding unnecessary complexity.
DESIGN SYSTEM
Defining tokens and variables
To create a scalable and consistent foundation, I defined a system of design tokens and variables across color, typography, spacing, and elevation. These tokens translated the new brand into reusable primitives that could be applied consistently across the product.
By standardizing these values, we reduced visual inconsistencies, simplified design decisions, and enabled engineers to implement UI more efficiently. This foundation also made it easier to evolve the system over time without refactoring individual components.
DESIGN SYSTEM
Adding motion and interactions
To make the brand feel alive inside the product, I designed interaction patterns like hover states, loaders, and error messages. These small moments not only made the platform feel polished, but also improved usability by giving users clear, consistent feedback.
DESIGN SYSTEM
Advocating for accessibility
As part of building a scalable design system, I integrated accessibility standards directly into tokens and components to ensure consistency across the platform. This included defining accessible color pairings, typographic scales, focus states, and interaction patterns aligned with WCAG 2.1 AA guidelines. By embedding accessibility into the system, we reduced the need for one-off fixes and enabled teams to design and build more inclusive experiences efficiently.
DESIGN SYSTEM
Building out the component library
Building on the foundation of tokens and variables, I expanded the system into a comprehensive set of reusable components, including buttons, inputs, modals, and snackbars. Each component was designed with consistent states (default, hover, active, disabled) and clear interaction patterns to ensure predictability across the product. This allowed teams to move faster with greater consistency, reducing redundant design and engineering work while improving the overall user experience.
Users reported having a more consistent experience across platform.
+50%
Design-to-development efficiency
~10%
Reduction in support tickets
REFLECTION
What I learned as a designer
Scaling design through collaboration
This project marked a turning point in how I work. I learned how to move beyond designing interfaces to designing systems, creating reusable patterns, documentation, and alignment across teams. It deepened my understanding of collaboration, strategy, and the impact of a well-built design system can have on both people and product.
Embracing emotional design
The emotional design workshop reshaped how I think about user experience. It reminded that design isn't about clarity or efficiency, but about how people feel when they use a product. Since then, I've been more intentional about weaving emotion and personality into even the most functional experiences.
Thinking beyond screens
Building the platform and design system in parallel pushed me to connect brand strategy, product usability, and engineer scalability and to see how each decision shaped the overall experience. I grew more confident operating at the interaction of brand, product, and process, balancing craft with long-term impact.
