Skip to main content
niels nielsen design studionndesign.co
Connect with meAvailable for remote FT / PT workniels@nielsn.com480-271-2795

UX/UI Designer and Artist — El Mirage, AZ

Niels Nielsen, UX/UI designer and artist in El Mirage, Arizona

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

Tool interface // Select a module

System online

Readout

Interface design

Figma

Collaborative design tool for wireframes, high-fidelity screens, prototypes and component libraries. It is the home of my design systems, including USWDS-based libraries for government work.

Hover or tap a tool to see how it fits my work

From the guitar to Disney and Pixar to Lockheed Martin, my path has always been about making things people feel and use.

Hi, I'm Niels C. Nielsen Jr., a UX/UI designer and artist based in El Mirage, Arizona. I design accessible interfaces and design systems for government and commercial teams, and I build what I design. Every project gets the same mix of an artist's eye, a coder's practicality, and a musician's sense of timing.

0+

Years of UX/UI experience

My journey

  1. 01

    The session guitarist

    It started with a guitar. Working as a session guitarist taught me to listen first, find the groove, and serve the song. I still bring that to every design.

  2. 02

    The animator

    From sound I moved to motion, working as an animator for Disney and Pixar, where timing, story, and craft decide whether something feels alive.

  3. 03

    The builder

    At Lockheed Martin I worked as a web developer and UI designer, which is where I learned to code the interfaces I design with HTML, CSS, SCSS, Bootstrap, Angular, and React.

  4. 04

    The designer today

    Today I bring it all together: accessible UX/UI, mobile experiences, and design systems across platforms like Salesforce, PeopleSoft, and Adobe AEM, plus illustration and art on the side.

Design skills

  • UX/UI Design
  • Mobile UX/UI Design
  • Graphic Design
  • Illustration
  • Design Systems
  • Accessibility (508 / WCAG)

Code and platforms

  • Front-End Coding
  • HTML
  • CSS
  • SCSS
  • Bootstrap
  • Angular
  • React
  • Salesforce
  • PeopleSoft
  • Adobe AEM

Skills

Systems thinker. Maker of things.

Government-grade UX on one side, commercial product and brand work on the other, and an artist's eye on both. Both show up in every pixel.

Government and public sector

  • 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.

Commercial and open sector

  • 01

    Web and E-Commerce

    Shopping, product, and marketing websites for retail, automotive, and lifestyle brands.

  • 02

    Brand-Forward UI

    Bold, expressive interfaces that carry a brand's voice instead of looking like a template.

  • 03

    Mobile App Design

    App interfaces and interactions that feel native and are quick to learn.

  • 04

    Product Design Systems

    Component libraries and design tokens that help product teams ship consistently and fast.

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

Services

What I design.

  • 01

    UX/UI design

    Research-driven flows, wireframes, and polished interfaces that are clear, accessible, and built to be used.

  • 02

    Design systems

    Component libraries, tokens, and documentation, including USWDS-based systems for government teams.

  • 03

    Websites and web apps

    Bold, responsive websites and web applications, designed from first sketch to final handoff.

  • 04

    Mobile apps

    Mobile app interfaces and interactions that feel native and are easy to learn.

  • 05

    Art and illustration

    Original artwork and illustration for brands, posters, and digital products.

Signature process

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.

  1. 01

    Frame the problem

    Research, user needs, and constraints come from me. A clear brief is what makes AI output useful.

  2. 02

    Explore with agents

    AI design agents generate layouts, variants, and copy directions in minutes, so I can compare many ideas early.

  3. 03

    Refine by hand

    I pick a direction, then rebuild it in Figma with real hierarchy, spacing, and system components.

  4. 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.

Pick an example screen
AI design agent
Variant A
Variant B
Variant C
Prompt

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

Get started

Dashboard

Get started
AI draftAfter my craft

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.

Art showcase

More art at nnart.co

My art lives on its own site. Step into the full collection of paintings, digital pieces, and illustration.

Visit nnart.co

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.

Client name (placeholder) 1
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).

Read the case study
Client name (placeholder) 1
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).

Read the case study
Client name (placeholder) 1
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).

Read the case study

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

Inside the system

A look at the design system as it lives in Figma and Storybook. Illustrative screens; swap in your own captures from the studio editor.

Figma
Screenshot of the design system component library in Figma
The component library with variants, states, and shared styles.
Storybook
Screenshot of the design system documented in Storybook
Coded components documented with live states and controls.

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

Agency, platforms and additional historical sites

Note: links point to current company sites, which may differ from the original work. Some archived pages may no longer be available.

The Journal

Notes from the studio

Thoughts on UX/UI, government design systems, accessibility, AI-assisted design, and the art that feeds my work.

01 / Profile & current work

Design with intention. Systems built to scale.

Senior UX/UI and product design professional with 15 years of experience across government digital services and commercial brands in retail, automotive, and lifestyle. Specializes in accessible interaction patterns and design systems that bridge design and engineering, combining 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.
View project

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.

Open full resumeDownload resume (PDF)

Questions and answers

Quick answers about working with me.

The short version of who I am, what I design, and how to hire me.

Who is Niels Nielsen?
Niels C. Nielsen Jr. is a UX/UI designer and artist based in El Mirage, Arizona. He has 15 years of experience designing interfaces and design systems, with a focus on accessible government digital services.
What services does Niels offer?
UX/UI design, design systems, websites and web apps, mobile apps, and art and illustration. Each engagement runs from first sketch to developer handoff.
Does Niels have government design experience?
Yes. He is currently a UX/UI Designer at Alpha Omega, building a design system in Figma on the U.S. Web Design System (USWDS). He previously led UX/UI design for SAMHSA and CDC digital experiences at SeKON LLC, following USWDS and Section 508 / WCAG requirements.
What tools does Niels use?
Figma, Figma Make, Storybook, Sketch, Illustrator, Photoshop, After Effects, and GSAP. Components are documented in Storybook so design and engineering stay in sync.
How does Niels use AI in his design work?
AI design agents help him explore layouts, variants, and copy directions quickly. He frames the problem, chooses the direction, rebuilds it by hand in Figma, and checks contrast, focus states, and USWDS standards himself before anything ships.
How is accessibility handled?
Accessibility is designed in from the first frame: color contrast, focus states, and semantic structure that meet Section 508 and WCAG guidelines.
Where is Niels based, and who does he work with?
He works from El Mirage, Arizona, and takes on UX/UI, design-system, and art engagements for clients across the United States.
How can I hire Niels or see his resume?
Email niels@nielsn.com or use the contact form below, choosing a project type and budget range. The full resume is at nielsnresume.com and can also be downloaded as a PDF from this page.

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.

Stay in the loop

Get notified about new work.

Drop your email and I'll let you know when I publish new projects, art, and journal posts. No spam.

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