MCCS · E-commerce wireframe
MCCS MyMCX
A low-fidelity working wireframe for MyMCX. The case study will document its structure, interaction paths, and design decisions.
Case study in progressSenior UX Engineer
You just fly-by-wireframe.
Writing
The Invisible Interface: Why the Best UX Goes Unnoticed
Great design isn't seen - it's felt. When an interface demands attention, it has already failed. Here's how I think about building experiences that get out of the user's way.
Latency Is a UX Problem, Not a Backend Problem
Every engineering team I've ever worked with treats performance as infrastructure. It isn't. Every millisecond of delay is a design decision with measurable consequences on human cognition.
Semantic HTML Is Not Optional - It's Structural Integrity
Accessibility is treated as a late-stage checklist in most teams. That's architecturally backwards. Semantic structure is the foundation, not the finish coat.
Building Mental Models, Not Just Interfaces
Users don't experience your UI - they build a mental model of it. The quality of that model determines everything about how confidently and successfully they navigate your product.
The Hidden Cost of Component Sprawl
Every component library I've inherited has the same disease: fifty variations of a button. This is a design debt that accrues silently until it breaks the consistency of the entire product.
Motion With Purpose: Animation as Communication
Animation is not decoration. Every movement in an interface carries meaning - or noise. Understanding the difference is the dividing line between interfaces that feel alive and interfaces that feel anxious.
The Form Is a Conversation, Not an Interrogation
Most forms are designed from the database's perspective. They ask for everything the system needs, in the order the schema demands it. This is backwards.
Dark Mode Is Not Just Colors - It's a Separate Visual Language
Most dark mode implementations are color inversions. Real dark mode is a considered parallel design that respects how human vision behaves in low-light conditions.
State Management Is a UX Decision
How your application manages state determines how it feels to use. This is not an engineering abstraction - it is a direct line to user experience quality.
Measuring UX Beyond NPS: Metrics That Actually Matter
NPS tells you if users like your product. It tells you almost nothing about why, or what to fix. Here's how I build measurement frameworks that produce actionable signal.
The Typography of Trust
Typography is the voice of an interface. Before a user reads a single word, the choice of typeface, weight, and spacing has already communicated something about the product identity and credibility.
Designing for Error: Why Failure States Are Your Most Important UX Moment
Error states are where most products abandon their users. They are also the highest-leverage opportunity in the entire experience to build or destroy trust.
The Ethics of UX: Dark Patterns and the Designer's Responsibility
Every UX decision either respects or exploits the user cognitive limitations. This is an active choice every designer makes every day.
Responsive Is Not Enough - Designing for Context, Not Screen Size
Responsive design adapts a layout to a viewport. It does nothing for the context in which that viewport is being used. Context-aware design is the next frontier.
Information Architecture Is Invisible - Until It Fails
When navigation is perfectly designed, users never think about it. They simply find what they're looking for. The art is in that disappearing act.
The Handoff Problem: Why Design-to-Development Is Still Broken
The design-to-development handoff is where more UX quality is lost than at any other stage of the product lifecycle. Fixing it requires structural changes, not better tooling.
The Psychology of Empty States
Empty states are the most overlooked moment in product design. They are also when first impressions are formed and activation behavior is determined.
Hello, I'm Charles Frelund. I help teams turn complex systems into clear, human-centered products by building in conversation, testing assumptions, and following the evidence.
01 — My Philosophy: Fly-By-Wireframing
The familiar myth
“Cheaper, faster, better—pick two.”
That trade-off comes with a hidden tax: dead time. Static mockups get debated in endless meetings. Work waits in sequential handoffs. Then untested ideas hit production and trigger painful rework.
Fly-By-Wireframing changes the order. We build interactive, behavioral blueprints directly in live browser code. Once the behavior is proven, visual design can elevate the foundation instead of decorating an educated guess.
The process
From big idea to real product
Talk it through. Build it live. Prove it works. Then polish.
-
01 / WOW!
Wireframe Over Words
A big vision lands and everyone goes, “WOW!” Before the room disappears into specs and speculation, open the browser and prototype the idea live.
The test: If you can argue about it for ten minutes, you can test it in five.
-
02 / TBD
Talk. Build. Decide.
At the start, most feature details are To Be Determined. Talk through the logic, build it in live code, and decide together based on how it actually feels.
The rule: Don’t leave TBD in a spec doc. Resolve it live in the browser.
-
03 / MVB
Minimum Viable Behavior
The result is a working answer to the important question: does this do what we thought it should, could, or would do? Test the interaction and flow before visual polish.
The principle: Function before finish. Prove how it works before deciding how it looks.
-
04 / MVP
Minimum Viable Product, in Sprint 1
Because the MVB is already live browser code, shipping doesn’t mean starting over. Visual design wraps the validated behavior to deliver a polished, production-ready MVP in Sprint 1.
The reminder: Never decorate confusion. Build your MVP on a proven MVB.
02 — My Philosophy in Practice
Two projects, two different design problems. These case studies will document the constraints, decisions, and iterations behind each one.
Oarfish Marine · Product website
Oarfish Marine
A static marketing site for Oarfish Marine. The case study will document the visual system, product storytelling, and build decisions.
Case study in progress03 — The Exposés
Exhaustive teardowns of web mechanics, semantic integrity, and interaction patterns: the small decisions that shape how an interface works.
Three mechanics, examined closely
01 / Macro patterns
The Hero Spectrum
Layout · hierarchy · failure modesDeep dive in development
02 / Component mechanics
Buttons vs. Links
HTML · keyboard · accessibilityDeep dive in development
03 / Visual systems
Iconography in Micro-Interactions
ARIA · hit targets · visual balanceDeep dive in development
04 / Form architecture
Form Flow Architecture
Forms · cognitive load · recoveryDeep dive in development
04 — Writing & Thoughts
Notes on the decisions behind the interface: how people think, how systems behave, and where design meets engineering.
User Experience Engineering: Origins, Organizational Impact, and the Interface Evolution
May 20, 2026
Learn how UX Engineers bridge the gap between design and code, translating creative visions into performant, accessible user interfaces.
The Invisible Interface: Why the Best UX Goes Unnoticed
Mar 1, 2026
Great design isn't seen — it's felt. When an interface demands attention, it has already failed. Here's how I think about building experiences that get out of the user's way.
Latency Is a UX Problem, Not a Backend Problem
Feb 18, 2026
Every engineering team I've ever worked with treats performance as infrastructure. It isn't. Every millisecond of delay is a design decision with measurable consequences on human cognition.
05 — Sandbox / Site Mechanics
This portfolio is also a working test bench: color systems, persistent preferences, article narration, and interface details that can be examined in context.
A palette with a point of view
Six color families. Separate light and dark treatments. Shared tokens keep the whole interface in conversation.
More than a color switch
Read-aloud narration, a searchable article archive, and theme preferences carried between pages are part of the same experiment: make interface behavior visible, useful, and testable.
06 — Background & CV
Designing where people and systems meet.
I work across UX engineering and full-stack development, bringing behavioral insight, interaction design, and implementation into the same conversation.
A downloadable CV is not published here yet. For inquiries and collaboration, head to contact.