Web design & FramerMelodyArc

Evolving MelodyArc’s website as the product story changed

Three generations of positioning, information architecture, visual storytelling, motion, and Framer implementation for an evolving B2B service platform.

Role: UX Design Lead
Duration: July 2023–present
Team: Cross-functional
Scope: Strategy, visual design, motion & Framer

MelodyArc website illustration connecting enterprise systems, AI, knowledge, code, human review, and process outcomes — The current website turns a complex orchestration model into a legible visual system.

Challenge

MelodyArc’s public story changed as the company’s product and positioning developed. Each website needed to make a technically complex B2B service understandable without flattening the role of data, AI, rules, and people.

The work was not a single reskin. Each generation required a renewed hierarchy, narrative, visual language, and Framer implementation that could carry the next version of the company’s story.

Evidence

Three shipped websites provide a visible record of that evolution. The archived Framer builds remain available alongside the current site.

01Support operationsVisit version one ↗ 02AI operatorsVisit version two ↗ 03Enterprise orchestrationVisit current site ↗

Decisions

Reframe before restyling. Each iteration begins with what the company needs its audience to understand, then aligns page order, language, and visuals around that job.
Show systems, not generic AI imagery. Workflow diagrams, interface fragments, and connected nodes make the service model more concrete.
Build a reusable visual grammar. Indigo linework, interface modules, restrained depth, and motion recur across sections so new ideas still feel related.
Design and build in the same loop. Implementing the sites in Framer made responsive behavior, motion, and editorial pacing part of the design process.

Version one: support operations

The first site positioned MelodyArc around support operations on one AI-powered platform. Its job was to introduce the service model and connect operational pain points with a unified workflow.

First MelodyArc website with support-operations positioning and an AI workflow diagram — Version one established the initial support-operations narrative. Visit the archived site ↗

Version two: AI operators

The second site expanded the narrative around AI operators. A lighter system and more modular storytelling made room for multiple roles, capabilities, and product ideas without turning the page into a feature catalogue.

Second MelodyArc website introducing AI operators with a light indigo visual system — Version two broadened the product narrative around specialized operators. Visit the archived site ↗

Current site: one system, three layers

The current site organizes the product story through Orchestrate → Execute → Record. Each layer uses the same node language, linework, interface fragments, and restrained depth so the visuals can carry technical meaning without becoming a generic AI metaphor.

Workflow diagram connecting enterprise systems to AI, knowledge, code, human review, and process resolution — **Orchestrate:** the operating path from enterprise inputs to a governed resolution.

Website workflow illustration connecting a customer query with AI reasoning, knowledge, policy checks, and human review — **Execute:** AI and human judgment shown within the same operational flow.

Website network graphic mapping interactions, decisions, workflow events, and system signals — **Record:** events and decisions arranged as traceable evidence.

Outcome

The work delivered three distinct Framer websites and a more coherent public language for MelodyArc as its positioning evolved. This case study reports shipped design scope; conversion or business-impact metrics are intentionally not inferred.

Reflection

Working across strategy, visual design, motion, and implementation made each website a useful test of product clarity. When an idea was hard to explain publicly, it often exposed language or hierarchy that also needed attention inside the product.