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.
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.
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.
Accessibility is treated as a late-stage checklist in most teams. That's architecturally backwards. Semantic structure is the foundation, not the finish coat.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Every UX decision either respects or exploits the user cognitive limitations. This is an active choice every designer makes every day.
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.
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 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.
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.
The familiar myth
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
Talk it through. Build it live. Prove it works. Then polish.
01 / WOW!
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
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
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
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.
Two projects, two different design problems. These case studies will document the constraints, decisions, and iterations behind each one.
MCCS · E-commerce wireframe
A low-fidelity working wireframe for MyMCX. The case study will document its structure, interaction paths, and design decisions.
Case study in progressOarfish Marine · Product website
A static marketing site for Oarfish Marine. The case study will document the visual system, product storytelling, and build decisions.
Case study in progressExhaustive teardowns of web mechanics, semantic integrity, and interaction patterns: the small decisions that shape how an interface works.
01 / Macro patterns
02 / Component mechanics
03 / Visual systems
04 / Form architecture
Notes on the decisions behind the interface: how people think, how systems behave, and where design meets engineering.
May 20, 2026
Learn how UX Engineers bridge the gap between design and code, translating creative visions into performant, accessible user interfaces.
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.
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.
This portfolio is also a working test bench: color systems, persistent preferences, article narration, and interface details that can be examined in context.
Six color families. Separate light and dark treatments. Shared tokens keep the whole interface in conversation.
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.
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.