SkillCycle

Redesigning SkillCycle's platform after a company rebrand

ROLE

Lead Product Designer

DURATION

Jan 2023 - Dec 2024

PROJECT

Web Application

TOOLS

Figma

OVERVIEW

In January 2023, SkillCycle (formerly GoCoach) underwent a full rebrand to better reflect its evolving business model. This shift prompted a redesign of the SaaS platform and the creation of a comprehensive design system to ensure brand consistency, improve accessibility, and streamline design and development.

As the sole designer, I built the system from the ground up, collaborating with the marketing, product, and engineering teams 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 CHALLENGE

How might we redesign our SaaS platform to reflect the new brand while improving customer retention and acquisition?

The company had outgrown its existing platform in both branding and functionality. Initially designed solely as a coaching platform, the company sought to transform it into a comprehensive performance management solution—one that seamlessly integrated coaching with broader performance management capabilities.

DISCOVERY & AUDIT

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.

DISCOVERY & AUDIT

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

Heuristic Evaluation

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.

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 — for example, “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.

DISCOVERY & AUDIT

Engagement Survey

To better understand how our platform was perceived and where it could improve, we conducted a client engagement survey. 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 — aligning closely with the emotional traits we had defined in our workshop.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.

BRAND IMPLEMENTATION

Translating the brand into product

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.

BRAND IMPLEMENTATION

Building a 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.

BRAND IMPLEMENTATION

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.

Adding Motion and Interaction

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.

BRAND IMPLEMENTATION

Add 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.

BRAND IMPLEMENTATION

Documenting the Foundations

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.

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.