From Fragmented to Flagship.

Client:

Methods · methodsof.com

Scope: 

Full Brand Redesign

Deliverables:

Logo, Color System, Typography, UI, Guidelines

Year:

2026

A premium platform
without a premium brand.

Methods is an interactive leadership learning platform backed by Marshall Goldsmith and the 100 Coaches, one of the most influential networks of executive coaches and business thinkers in the world. The content was elite. The brand was not.

Across five distinct digital layers (marketing, social, website, LMS, and course content) the brand had no cohesion, no system, and no visual identity that matched the caliber of who they were. My job was to fix all of it.

Five Layers Working Against Each Other

Methods operated across five distinct environments and each one was making up the brand as it went. The result was visual fragmentation that undermined trust and diluted the credibility of the platform's world-class instructors.

Marketing & Print

1

No defined visual language for print or advertising materials. Instructor headshots, copy, and layout decisions were made asset-by-asset with no repeatable system. The brand couldn't scale.


Social Media

2

Profile images, post formats, and in-feed content had no shared color, type, or compositional logic. Followers saw a different brand every week — no brand recognition was building.


Website

3


The public-facing site used gold inconsistently, mixed multiple type treatments, and lacked a clear hierarchy. The premium positioning of the content was invisible in the UI.

Lightspeed LMS

4

The back-end learning system had its own visual logic entirely — no connection to the main brand. Students crossing from the website into the platform felt like they'd entered a different product.

Each course was treated as an island. Instructor branding, title cards, and in-video graphics had no shared system. Twenty courses looked like they came from twenty different studios.

5

Course Content


The Mark

A logo system built to flex without breaking. Four configurations: Lettermark, Wordmark, Lockup, and the Wordmark Alternative, each built from the same proportions but suited to a different job. The Lettermark holds up at the size of a favicon or social profile photo, where the full logo would lose all detail. The Wordmark works in tight horizontal spaces like a nav bar. The Lockup is the default for most marketing and print. The Wordmark Alternative exists specifically for moments that need to surface the Marshall Goldsmith and 100 Coaches partnership, giving Methods a way to lean on that credibility without redesigning the lockup every time it comes up.

The Gradient

The gold gradient runs at a fixed 45-degree angle, light gold at the top right, fading to dark gold at the bottom left. Every gradient asset across the brand follows this same direction and color flow, so whether it's the logo, a button, or a divider, the gold always feels like it's coming from the same light source.

One Palette Across Five Environments

The color system had to do two jobs: build a premium public-facing identity, give each course its own visual world, and everything in between. The primary palette is anchored in gold, black, and white with an alternate green. The secondary palette of 27 course colors is primarily built for the course layer but can surface publicly in small ways, like course card accents, to hint at the variety inside the platform.

Primary Colors


Secondary Colors

Each of the 9 hue families has 3 tonal stops, giving every course enough range to build its own voice without drifting from the system. Enough variety to feel distinct, enough structure to feel like it all belongs together.


The mark needed to hold up beyond just the gold gradient. White and black versions exist for backgrounds where the gradient won't read clearly, same proportions, just built to stay legible no matter the surface.

Gold was designed to work across every background. Dark gold on light, light gold on dark, gradient gold on either. Three versions were built to maintain contrast across any context or application.

The details that make a system feel intentional.

Two structural elements anchor the visual language across every touchpoint: the Golden Bar and the Overlay Gradient. Small decisions that compound into a recognizable aesthetic.

The Golden Bar

A horizontal gradient bar running dark gold (#A07F44) to light gold (#D3B271), left to right. Used to separate content sections, underscore key messaging, and signal hierarchy. Appears in marketing, course cards, and print.

The Overlay Gradient

A bottom-up dark gradient is applied over content to create a legible surface for text without masking the subject. Used on instructor headshots, hero images, and course thumbnails.

The Platform

Typography does the heavy lifting in a content-first platform. The system is structured: bold headlines in Proxima Nova command attention, editorial display moments in Merriweather signal credibility, and Helvetica Neue carries body text with zero friction.



The Back End

Inside the LMS

Each course needed to feel like its own world, not a copy-paste of the last one. Color does that work here. Martin Lindstrom's course runs warm reds and burnt orange, built around his pattern and texture system, while another instructor might sit in cool blues or deep greens entirely. The variety gives the illusion of a much bigger platform than it actually is.

There are two layers at play: Methods branding and Course branding. Methods branding is the constant; the logo, type, and layout never change. Course branding is always secondary, riding on top to give each course its own identity without ever overriding the system underneath.

Each coach was assigned a main color from the secondary palette, then paired with other secondary colors to build out their full course environment. That combination is what keeps every course feeling distinct from the next, even though they're all pulling from the same set of 27. Typography had room to move too; each course could pull in its own fonts to push the personality further, without ever breaking from the system holding it all together.

Inside the Course

Each course needed to feel like its own world, not a copy-paste of the last one. Color does that work here. Martin Lindstrom's course runs warm reds and burnt orange, built around his pattern and texture system, while another instructor might sit in cool blues or deep greens entirely. The variety gives the illusion of a much bigger platform than it actually is.

There are two layers at play: Methods branding and Course branding. Methods branding is the constant; the logo, type, and layout never change. Course branding is always secondary, riding on top to give each course its own identity without ever overriding the system underneath.

Achievement System

Methods needed a reward system that made progress feel tangible. I designed a full badge architecture spanning Legacy Badges for instructor-specific milestones, Super Badges for major course completions, and topic badges covering everything from leadership and communication to growth mindset and team building. Every badge was modeled in 3D using Blender, giving them a physical, dimensional feel that made earning one actually feel rewarding instead of just another flat icon.

The badges also had to live inside video. We built UI systems that trigger and display achievements directly in the course player, so progress shows up in real time as someone watches, not just on a separate dashboard after the fact.

"The constant tension in this system was finding the middle ground. Too rigid, and every course feels identical. Too loose, and nothing feels like Methods. Every decision, from the logo lockups to the badge construction to the UI skeletons, was a negotiation between those two failure states."

The UI System

The badges weren't the only thing that needed to live inside video. Every course also needed a consistent set of interactive moments: title cards, reflections, questions, workbook downloads, and completion screens. I built a skeleton system for each, lower thirds, button placement, layout structure, all standardized so editors weren't rebuilding these from scratch every time a new course came in.

The goal was to find the middle ground. Too rigid, and every course feels identical. Too loose and nothing feels like Methods. These templates gave each course room to bring in its own color and typography while keeping the actual interaction points, where to click, what a question screen looks like, and how a completion screen behaves, the same across the entire platform.

We set deliberate constraints so that every course had a foundation to build on, but they were narrow enough to leave room for animation and creative execution within them.

Iconography

A consistent icon language was built to carry the geometric DNA of the lettermark into every UI moment. Each icon takes its construction cues from the "m," the same circles, diamonds, and squares that built the logo, so even small interface elements feel like part of the same family. These run across the website, the LMS, and platform features like Interactivity, Personal Support, Workbooks, and Reports, giving each function its own identifiable mark without breaking from the system.

The same icons carry through the LMS at scale. Certifications, community, and the leaderboard all use the same geometric language on the homepage. At the same time, the training center grid shows it holding up across dozens of instructor banners, each one running its own color underneath a navigation and icon system that never changes.

Old

New

"Leadership is providing inspiration and vision, then developing and empowering others to achieve this vision."

What was built.

Logo System


Four approved configurations: Lettermark, Wordmark, Lockup, and Wordmark Alternative. Spacing rules and misuse guidelines for each.

Brand Elements


The Golden Bar, Overlay Gradient, and 45° gradient direction system. Visual devices that repeat across all layers

Color System


Primary palette of 5 brand colors plus a 27-color secondary palette organized into 9 hue families for course differentiation.

Layer-Specific Rules


Documented guidelines for all five brand environments: what's allowed, what's off-limits, and how each layer relates to the core system.

Typography Hierarchy


Three-typeface system with role definitions: Proxima Nova, Merriweather, Helvetica Neue. Usage rules for each layer.

Brand Guidelines PDF


30-page official brand documentation delivered to the Methods team, ready for internal use, agency handoff, and platform development.