John Lawrence Hansen
I combine UX/UI, visual design, and web development to build digital tools people use, teams maintain, and search and AI systems understand.
A good design experience generates good developer experiences — and good creator experiences create good user experiences.
My Passion
The main areas I operate in.
I use a combination of art, design, and development to solve problems. Solutions to problems are my concern; I'm dogmatic about not being dogmatic.
Web Design & Development
I design and build user-focused websites that balance aesthetics and function for a lasting impact.
UX/UI Design
I design intuitive interfaces that enhance user experiences, engagement, and satisfaction.
Visual Design
I design compelling and impactful visuals that drive engagement and tell a story.
Brand Design
I craft unique brand identities that connect essence with users.
Design Systems
I construct and maintain design systems to ensure consistency, scalability, and efficiency across digital products while enhancing the experience of designers, developers and ultimately users.
Selectred Work
Work I've selected to share.
A small collection of projects and collaborations.
Gwen Stefani
Multi-platform design and development for Gwen Stefani's ‘This Is What the Truth Feels Like’ tour — one visual system, adapted live across app, microsite, and print on a short deployment window.
AMC x Mobii
Microsites, in-app content, and reusable templates connecting TV audiences to AMC through the Mobii white-label platform — built for a national campaign's pace, not a typical project timeline.
Univision x Mobii
A two-year engagement designing and building the interactive-TV bridge between Univision broadcasts and the Mobii app — where the constraint was always speed.
UNIS
Bridging a design team's components and a front-end team's code — building the living documentation that let both sides move fast without losing consistency.
01 / 03
My Process
How I typically work.
I adjust my time spent in each area of my process accordingly.
1
Research
Identify and define: gather; analyze; determine.
2
Clarify
Specify users and understand: categorize; empathize; compile.
3
Conceptualize
Concept and generate ideas: sketch; refine; flow.
4
Create
Design and develop: frame; paint; build.
5
Iterate
Observe and absorb: deploy; monitor; repeat with intent.
6
Communicate
Organize and document: strategize; solidify; guide.
FEATURED ARTICLES
Notes and thoughts.
Writing on design, web systems, accessibility, technology, and the practical ideas that emerge while building.
Web development
The FAQ page is where the honesty lives
A personal reflection on why the FAQ page might be the most honest piece of writing on a site, and what that demands from the person answering it.
Webflow
Designing responsive HTML tables for Webflow rich text
A practical look at turning one-off Webflow tables into a maintainable system using semantic HTML, content-led variants, shared CSS, and a clear relationship between Figma, Webflow, and CMS publishing.
AI and operations
Designing a cozy AI-native companion: building Cabbits
A cozy, AI-native virtual companion world where children learn logic and reasoning alongside their evolving Cabbit friend in a handcrafted claymorphic valley for the 5-Day AI Agents: Intensive Vibe Coding Course With Google
AI and operations
What if interface components could correct themselves?
A thinking session on self-correcting interface components: systems that observe their performance, test constrained improvements, and adapt without compromising accessibility, consistency, or human judgment.
Webflow
Turning article sections into individual entry points
A lightweight JavaScript approach that turns Webflow article headings into direct links, allowing individual sections to be shared as distinct entry points.
about me
I love to create.
I enjoy drawing, playing classical guitar, gaming, and reading. I always try to keep a rapidograph and chopsticks close at hand. I'm often running, talking to plants, cooking, or listening to classical music (usually Baroque), retrowave, or punk rock.
My lyceum for 1 days, 1 hours, 1 minutes and 1 seconds.
Contact Me
Have a project or problem to solve?
Use the form and I'll get back to you shortly.