Work

NameStudio API Demo

COMPANY

Year

2019

Skills

UX Design

Product Design

Tools

Jeremy J. McLean

About Me

My Work

Contact Me

Jeremy J. McLean

After designing NameStudio—a user-friendly domain name generator—we needed to show developers how its powerful machine-learning engine could work for them. The NameStudio API opened that engine to the world, but we needed an interactive demo that would make the technology clear, approachable, and inspiring for developers evaluating integration.

“How do you make a complex backend easy to understand?”

The Challenge

The NameStudio API was powerful but complex. Developers needed to understand how different endpoints worked, what results they'd generate, and how to integrate the technology into their platforms. Raw API documentation wasn't enough—we needed a hands-on, visual way to demonstrate the engine's capabilities in action.

Storyboarding concepts: Before animating, I sketched out simple storyboards to explore how each message could unfold visually — mapping the motion, pacing, and key moments of impact.
Turning words into visuals: Using the approved storyboard direction, I illustrated custom vector graphics that embodied the message — bold, clear, and unmistakably tied to the .com identity.
Building repeating animations: In After Effects, I animated each concept so it could play as a short story that repeats cleanly, keeping the message clear and attention-grabbing on a loop.
Designing for performance: Each GIF was carefully optimized to stay crisp and engaging while meeting strict file-size requirements for digital and social platforms.

Our Goals

Create an interactive demo that clearly shows how each API endpoint functions

Make complex machine-learning logic approachable for developers evaluating integration

Maintain NameStudio's brand identity while serving a technical audience

Support developer onboarding and accelerate partner adoption

screenshot of the NameStudio API demo page

Screenshot of the NAmeStudioAPI demo showing the spin word option

Screenshot of the NAmeStudioAPI demo showing the add Prefix / suffix option

The Approach

Mapping the Endpoints - I broke the API into its key functions—Spin Word, Add Prefix, Add Suffix, and other endpoints—to create a clear mental model of how the system worked.
Clarifying Complexity - I designed a modular interface that grouped results by endpoint, making it easy for developers to compare outputs and understand what each function delivered.
Showing Logic Clearly - I surfaced key backend details—like how keywords were transformed and checked—without overwhelming users with technical jargon.
Keeping it On-Brand - I maintained the NameStudio look and feel, ensuring the demo felt cohesive with the consumer-facing product while serving a developer audience.

Key Contributions

Product Design & UX - I designed the full user interface and interaction model, translating complex API logic into an intuitive visual experience that developers could explore hands-on.
Collaboration with Engineering - I partnered closely with engineering and product teams to ensure the frontend experience accurately reflected the API's backend logic. This alignment helped the demo serve as both a marketing tool and a technical reference.
Supporting Developer Onboarding - The design informed not only the demo but also developer documentation and onboarding materials, helping registrars and partners understand how to integrate NameStudio into their platforms.

The Result

The demo gave developers a hands-on way to explore NameStudio's machine-learning engine, turning raw API data into a clear, interactive experience. It's still used and iterated on today, supporting platforms like Wix and Shopify and accelerating early integrations.

Storyboarding concepts: Before animating, I sketched out simple storyboards to explore how each message could unfold visually — mapping the motion, pacing, and key moments of impact.
Turning words into visuals: Using the approved storyboard direction, I illustrated custom vector graphics that embodied the message — bold, clear, and unmistakably tied to the .com identity.
Building repeating animations: In After Effects, I animated each concept so it could play as a short story that repeats cleanly, keeping the message clear and attention-grabbing on a loop.
Designing for performance: Each GIF was carefully optimized to stay crisp and engaging while meeting strict file-size requirements for digital and social platforms.