01
Figma
Interface design, components, and the foundations of every design system I build.
UX/UI Designer and Artist — El Mirage, AZ
hi, i'mniels I'm A UXUI Designer
I design bold, accessible interfaces and government-grade design systems — and make art that pushes them further.
Who I am
About me - Who I Am
I'm Niels C. Nielsen Jr., a UX/UI designer based in El Mirage, Arizona. I design interfaces and design systems for the government space — most recently with USWDS and Figma as the foundation — and I'm also an artist, which shapes how I handle color, form, and motion.
0+
Years of UX/UI experience
- UX Research
- UI Design
- Design Systems
- USWDS
- Information Architecture
- User Flows
- Wireframing
- Prototyping
- Interaction Design
- Responsive Design
- Accessibility (508 / WCAG)
- Usability Testing
- Component Libraries
- Design Tokens
- Documentation
- Developer Handoff
- Stakeholder Workshops
- Illustration
- Digital Art
- Motion
- Visual Identity
- AI-Assisted Design
Toolkit
Tools I use
The software behind the work — from first sketch and illustration to motion, documented components, and shipped design systems.
02
Figma Make
Prompt-to-prototype for fast, working concepts that stakeholders can click through.
03
Storybook
Living component documentation that keeps design and engineering aligned.
04
Sketch
Vector-based UI design and symbol libraries for precise, repeatable layouts.
05
Adobe Illustrator
Vector illustration, icons, and brand marks drawn with precise curves.
06
Adobe Photoshop
Digital painting, photo compositing, and texture work for artwork and interface visuals.
07
Adobe After Effects
Motion graphics and animated prototypes that bring interface ideas to life.
08
GSAP
GreenSock animation for smooth, scroll-driven interactions on the web.
09
Adobe XD
Wireframes, prototypes, and design specs for fast interface exploration and handoff.
10
AI Design Agents
Figma Make, Google Stitch, v0, Lovable, Claude, Midjourney and more working beside me from idea to prototype.
Skills
Systems thinker. Maker of things.
Government-grade UX on one side, an artist's eye on the other. Both show up in every pixel.
UX/UI in government
-
01
UX Research
Understanding real users, their tasks, and the barriers between them and a public service.
-
02
Information Architecture
Structuring complex content and flows so people find what they need without guessing.
-
03
Wireframes and Prototyping
From low-fidelity sketches to clickable prototypes that stakeholders can test early.
-
04
USWDS Design Systems
Component libraries, typography, and spacing standards built in Figma on the U.S. Web Design System.
-
05
Accessibility
Contrast, focus states, and semantics designed in from the first frame, not patched in later.
-
06
Documentation
Living guidelines and Storybook components that keep design and engineering in sync.
The artist
-
01
Illustration
Hand-built vector and sketch work with a bold, graphic point of view.
-
02
Digital Art
Painting, texture, and compositing that bring depth and mood to a concept.
-
03
Motion and Animation
Timing and rhythm in After Effects and GSAP that make interfaces feel alive.
-
04
Visual Identity
Marks, color, and type pulled together into a look people remember.
The full toolbox
Every tool in the modern UX/UI stack.
From research to shipped design systems, and now AI design agents working beside me. The right tool for each stage of the job.
01
Interface design
- Figma
- Sketch
- Adobe XD
- Penpot
- Framer
- Axure RP
- Webflow
- Affinity Designer
- Canva
02
AI design agents
- Figma Make
- Figma AI
- Claude
- ChatGPT
- Gemini
- Google Stitch
- v0 by Vercel
- Lovable
- Bolt
- Replit Agent
- Cursor
- Uizard
- Visily
- Relume
- Galileo AI
- Magic Patterns
- UX Pilot
- Framer AI
- Webflow AI
- Wix Studio AI
- Subframe
- Banani
- Builder.io
- Polymet
- Onlook
- Creatie
- Midjourney
- Adobe Firefly
- DALL·E
- Stable Diffusion
- Leonardo AI
- Ideogram
- Runway
- Khroma
- Attention Insight
03
Prototyping
- Figma Prototyping
- ProtoPie
- Principle
- Origami Studio
- Marvel
- InVision
- Bubble
04
Research and testing
- Maze
- UserTesting
- Lyssna
- Optimal Workshop
- Lookback
- Dovetail
- Hotjar
- Microsoft Clarity
- UserZoom
- Useberry
05
Design systems and handoff
- USWDS
- Storybook
- Figma Dev Mode
- Tokens Studio
- Style Dictionary
- Zeroheight
- Supernova
- Zeplin
- Chromatic
06
Accessibility
- Stark
- axe DevTools
- WAVE
- Color Contrast Analyser
- VoiceOver
- NVDA
- JAWS
07
Collaboration and workflow
- FigJam
- Miro
- Mural
- Whimsical
- Lucidchart
- Notion
- Jira
- Confluence
- Slack
- Loom
08
Motion and visual craft
- After Effects
- Rive
- Lottie
- GSAP
- Spline
- Illustrator
- Photoshop
- Procreate
- Blender
Signature process
Prompt
Get started
Get started
AI draftAfter my craft
AI workflow
AI speeds me up. Craft decides.
I use AI design agents as fast collaborators for exploration, and I keep every decision about structure, accessibility, and taste in my own hands.
-
01
Frame the problem
Research, user needs, and constraints come from me. A clear brief is what makes AI output useful.
-
02
Explore with agents
AI design agents generate layouts, variants, and copy directions in minutes, so I can compare many ideas early.
-
03
Refine by hand
I pick a direction, then rebuild it in Figma with real hierarchy, spacing, and system components.
-
04
Verify and ship
Contrast, focus states, and USWDS standards are checked by a human before anything goes out.
The process, animated
From AI prompt to polished UI
Watch one screen travel the whole route: a prompt to an AI agent, a rough draft, a lo-fi wireframe I rework by hand, a polished interface, and the final checks.
AI design agent
Variant A
Variant B
Variant C
Your guide · Step 1 of 6
Start here. Watch the brief being typed: the audience, the goal, and the constraints. Then press Next.
Illustrative example of my process. It pauses on hover; use the arrows or click a step.
Before and after
From rough AI draft to finished design
Illustrative example of the process. Drag the slider to compare.
Generic hierarchy, weak contrast, no system.
Clear hierarchy, accessible contrast, tokens and components.
Dashboard
Dashboard
Artwork
The artist's side.
Painting, digital art, and illustration. The same eye for color and form that shapes my interfaces.
Scroll to glide through the gallery. Click any piece to view it larger.
Selected work
Projects in focus.
A closer look at past engagements: who it was for, what I did, the tools behind it, and what it delivered.
01 / 04
01Project 01
Month Year (placeholder)
Client name (placeholder)
Placeholder project. Replace the client, date, images and details with your real work.
Tools used
- Figma
- Storybook
- Illustrator
Scope of work
- Scope item one (placeholder)
- Scope item two (placeholder)
- Scope item three (placeholder)
Final results
Describe the final outcome and measurable results here (placeholder).
01 / 04
02Project 02
Month Year (placeholder)
Client name (placeholder)
Placeholder project. Replace the client, date, images and details with your real work.
Tools used
- Figma
- Photoshop
- After Effects
Scope of work
- Scope item one (placeholder)
- Scope item two (placeholder)
- Scope item three (placeholder)
Final results
Describe the final outcome and measurable results here (placeholder).
01 / 04
03Project 03
10/2027
Client name (placeholder)
Placeholder project. Replace the client, date, images and details with your real work.
Tools used
- Sketch
- Figma Make
- GSAP
Scope of work
- Scope item one (placeholder)
- Scope item two (placeholder)
- Scope item three (placeholder)
Final results
Describe the final outcome and measurable results here (placeholder).
Use case
Government design system
A high-level design system for the government sector, built in Figma and grounded in the U.S. Web Design System (USWDS) — typography, spacing, and components that agencies can trust.
Client
Alpha Omega
Role
UX/UI Designer
Outcome
5 years on the project
Typography
Aa
The quick brown fox jumps over the lazy dog.
USWDS pairs open-source typefaces for clear, readable government interfaces.
- Public Sans
- Source Sans Pro
- Merriweather
- Roboto Mono
Spacing
Layout runs on a consistent 8px-based spacing scale, so every component lines up.
-
8px
-
16px
-
24px
-
32px
-
48px
-
64px
Components
A shared library of accessible, reusable interface parts, modeled on the USWDS component list.
- Accordion
- Alert
- Banner
- Breadcrumb
- Button
- Button group
- Card
- Checkbox
- Combo box
- Date picker
- File input
- Footer
- Header
- Modal
- Pagination
- Radio buttons
- Search
- Side navigation
- Step indicator
- Summary box
- Table
- Tag
- Text input
- Tooltip
How the system fits together
1
Foundations in Figma
Typography, color, and spacing captured as shared styles and variables.
2
Components
USWDS components rebuilt with variants, states, and accessibility notes.
3
Storybook
Coded examples documented so design and engineering stay in sync.
4
Guidance
Usage rules and patterns teams can adopt without guesswork.
Use case — in depth
How I used USWDS to design for government
Scroll to walk through how the U.S. Web Design System became the backbone for patterns, components, and standards across multiple federal websites.
Design patterns
Patterns for every government journey
I used USWDS guidance to document repeatable UX patterns so every federal team solves the same problem the same way.
- Form and multi-step flows built on USWDS patterns
- Page layouts, navigation, and content hierarchy templates
- Accessible error, validation, and confirmation behavior
Component designs
A Figma library built from USWDS components
Each USWDS component was rebuilt in Figma with variants, states, and usage notes so designers can assemble screens with confidence.
- Variants and states for buttons, inputs, tables, and alerts
- Auto layout and variables tied to USWDS tokens
- Accessibility notes documented on every component
Design standards
Standards teams can actually follow
Typography, color, and the 8px spacing scale were captured as clear standards, replacing one-off decisions with shared rules.
- Type scale and font pairing rules from USWDS
- Spacing, grid, and padding standards
- Color contrast and accessibility requirements
Federal rollout
One system across multiple federal websites
The same foundations, components, and guidance were applied across several federal sites, keeping the experience consistent for the public.
- Shared library reused across agency websites
- Design and engineering kept in sync through documentation
- Guidance teams adopt without guesswork
03 / Live websites and historical projects
The breadth behind the craft.
Clickable destinations referenced in my earlier resume or recent project work. These are not guaranteed to show the original designs; newer teams may have changed the live websites.
Federal and public services
- SAMHSA.gov
- Arizona Public Service
- Technical Assistance Center
- Alpha Omega
- CDC.gov
- SeKONhistoric employer
Retail, commerce and lifestyle
Agency, platforms and additional historical sites
- Grupo Gallegos / GALLEGOS United
- Blabwirehistorical
- Hass Avocado Board
- 1WorldSyncarchived sample
- 1WorldSync
- ZapTravelhistorical
- Lexus
Note: links point to current company sites, which may differ from the original work. Some archived pages may no longer be available.
01 / Profile & current work
Design with intention. Systems built to scale.
Senior UX/UI and product design professional with 15 years of experience, specializing in government digital services, accessible interaction patterns, and design systems that bridge design and engineering. Combines strong visual craft with hands-on front-end knowledge, responsive behavior, and complex information architecture.
Professional experience
Alpha Omega
UX/UI DesignerJun 2026 – Present
- Design federal digital interfaces, including TA Center directory discovery, page architecture, and search/filter interaction patterns.
- Design Figma component states for guided search, multi-select filtering, event/webinar cards, and accessible 360–1400px layouts.
- Translate requirements into low- and high-fidelity concepts, responsive specifications, and documented interaction states.
SeKON LLC / SAMHSA + CDC
Lead UX/UI Designer2022–2024
- Led UX/UI design for SAMHSA and CDC digital experiences, developing responsive patterns aligned with USWDS and Section 508 / WCAG requirements.
- Produced reusable Figma components, design-system patterns, and developer handoff guidance for Drupal-based federal websites.
- Developed wireframes, accessible interactions, and desktop-to-mobile content experiences in collaboration with federal stakeholders and engineers.
Paradigm / Arizona Public Service
Lead UX/UI Designer2019–2020
- Designed responsive customer-facing interfaces for APS.com, including reusable content patterns and energy-estimation tools.
- Delivered detailed UX/UI specifications and front-end design guidance to distributed engineering teams.
Cool Events LLC
Lead UI/UX Designer · Contract2019–2020
- Designed Salesforce Lightning-based interfaces and coordinated implementation of multiple branded event experiences.
- Interface Design
- Design Systems
- Prototyping
- Accessibility
- Documentation
Full work history, education, and references live on my resume site.
Figma
Figma Make
Storybook
Sketch
USWDS
UX/UI
Accessibility
Built to be usable by everyone.
Accessibility is part of my craft, not an afterthought. Here is what this site does, and the real contrast numbers behind its colors.
Color contrast, checked live
8/8
These ratios are calculated in your browser from the site's actual colors. WCAG AA needs 4.5:1 for body text; AAA needs 7:1.
- Body text on page background14.86:1AAA pass
- Body text on card background13.57:1AAA pass
- Lime accent on page background16.56:1AAA pass
- Button text on lime16.56:1AAA pass
- Dark text on white sections19.56:1AAA pass
- Secondary text (70% opacity)7.54:1AAA pass
- Tertiary text (55% opacity)5.01:1AA pass
- Muted gray on page background6.73:1AA pass
This is an automated check of text colors only. It does not replace a full manual audit with a screen reader and keyboard testing.
-
Skip link
Press Tab on load to jump straight to the main content.
-
Visible focus
Every link and button shows a clear lime focus ring for keyboard users.
-
Clear structure
Header, navigation, main, and footer landmarks with labeled sections.
-
Reduced motion
Smooth scrolling, the custom cursor, and most animation turn off if your device asks for less motion.
-
Image descriptions
Meaningful images carry alt text; decorative ones are hidden from screen readers.
-
Labeled forms
The contact form has visible labels, required fields, and announced errors.
Contact
Let's build something clear.
Open to UX/UI, design-system, and art engagements. Send a message and tell me what you're working on.
El Mirage, Arizona