Conner Nations, UI/UX Engineer

1. Introduction

Conner Nations is a UI/UX Engineer with nine years of experience shipping interfaces for SaaS, fintech, and developer tools. The author works on both sides of the hand-off: running research sessions and drawing flows in the morning, writing the TypeScript and CSS that implements them in the afternoon.

The author's specialty is design systems: the tokens, components, and documentation that let a team of forty ship something that looks like it was made by one careful person. Accessibility is treated the way other engineers treat test coverage, and every millisecond of input delay is treated as a design decision.

+ +

CN[ portrait ]

+ +

The remainder of this document is organized as follows. Section 2 defines the principles the author applies to all work. Section 3 lists capabilities. Section 4 describes three reference implementations. Section 5 records operational history, and Section 7 explains how to reach the author.

2. Conventions and Terminology

The key words "MUST", "MUST NOT", "SHOULD", and "MAY" in this document are to be interpreted as described in BCP 14 [RFC2119] when, and only when, they appear in all capitals. The author applies them to all work as follows:

• An interface MUST be fully operable with a keyboard alone.
• A component MUST NOT ship without documented states: default, hover, focus, active, disabled, loading, and error.
• Motion SHOULD explain a change of state, and MUST respect prefers-reduced-motion.
• Copy SHOULD be written before the layout, not poured into it.
• A design MAY be beautiful, provided it is first legible.

3. Capabilities

This section enumerates the capabilities of the author. Proficiency is self-reported on a twenty-point scale and is believed to be honest.

3.1. Skills Matrix

+----------------------------+------------------------+-------+
| Capability                 | Proficiency            | Years |
+============================+========================+=======+
| Interaction design         | [###################.] |   9   |
| Design systems             | [###################.] |   7   |
| Prototyping (Figma/code)   | [##################..] |   9   |
| TypeScript / React         | [#################...] |   7   |
| CSS architecture           | [##################..] |   9   |
| Accessibility (WCAG 2.2)   | [##################..] |   6   |
| Motion design              | [################....] |   5   |
| Usability research         | [###############.....] |   6   |
| Front-end performance      | [################....] |   6   |
+----------------------------+------------------------+-------+

Table 1: Skills matrix.

3.2. Toolchain

Design

Figma (variables, auto layout, branching), FigJam, Maze, Dovetail for research synthesis.

Engineering

TypeScript, React, Next.js, Vue, Web Components, CSS custom properties, Tailwind when the team prefers it, Vite.

Systems

Style Dictionary, Storybook, Chromatic visual regression, Changesets for versioned component releases.

Quality

Playwright, axe-core, Lighthouse CI, VoiceOver and NVDA for manual screen reader passes.

Languages

English (professional), Polish (native).

4. Reference Implementations

Three implementations are described below. Each was built in a production setting, and each is summarized as Problem, Approach, Outcome, and Role.

4.1. Halyard Design System

+----------+      +-----------+      +--------------+
|  tokens  | ---> |  Halyard  | ---> |  6 products  |
+----------+      +-----------+      +--------------+

Figure 2: Token pipeline.

Problem:

Six products at Northwind Labs had drifted into four shades of "primary blue" and eleven button variants. Every redesign started from zero.

Approach:

Audited 1,400 screens, collapsed them into 38 components, and defined a three-tier token model (core, semantic, component) exported from Figma variables to CSS, iOS, and Android with Style Dictionary. Documentation lives next to the code in Storybook.

Outcome:

UI build time for new features fell by roughly 40%. Dark mode shipped across all six products in one sprint by changing a single token layer.

Role:

Lead designer and engineer; two contributors.

4.2. Ledgerline Onboarding

  Stage         Before                       After
  Sign-up       [##########..........] 52%   [################....] 81%
  KYC upload    [######..............] 31%   [#############.......] 66%
  First txn     [####................] 22%   [###########.........] 57%

Figure 3: Funnel completion, before and after.

Problem:

A business banking app lost most new users during identity verification. Support tickets said "the camera step is broken"; it was not broken, it was unclear.

Approach:

Ran twelve moderated sessions, rewrote the flow as a progressive checklist that could be resumed on another device, and built an in-browser document capture component with live edge detection and plain-language error recovery.

Outcome:

Users reaching their first transaction rose from 22% to 57%. Verification support tickets fell by 63%.

Role:

UX research, interaction design, and front-end implementation.

4.3. Cartographer A11y Auditor

  $ cartographer audit ./checkout --wcag 2.2
  scanning 48 routes ...................... done
  [pass] 214   [warn] 9   [fail] 0

Figure 4: A clean run.

Problem:

Automated accessibility checks ran too late, in a nightly job that nobody read.

Approach:

Built an open-source CLI and Storybook add-on on top of axe-core that runs per component on every pull request, annotates diffs with the failing rule, and links to a fix written in plain English.

Outcome:

Adopted by four internal teams; critical WCAG violations at release dropped to zero over two quarters.

Role:

Author and maintainer.

5. Operational History

Entries are listed in reverse chronological order. Each entry obsoletes the one below it, while remaining informative.

5.1. Senior UI/UX Engineer, Northwind Labs2022 - present

• Leads the Halyard design system (Section 4.1) across six products and roughly forty engineers.
• Runs a fortnightly design-engineering critique that pairs designers with the engineers who will build their work.
• Introduced interaction budgets: every new screen ships with an INP target under 200 ms.

5.2. UI Engineer, Ledgerline2019 - 2022

• Redesigned and rebuilt the onboarding and verification flow (Section 4.2).
• Migrated a legacy jQuery dashboard to React and TypeScript without a feature freeze.
• Established the company's first usability testing practice.

5.3. Front-end Developer, Pixelpine Studio2017 - 2019

• Built marketing sites and e-commerce storefronts for clients in retail and hospitality.
• Moved from implementing designs to co-authoring them, which is where this document begins.

5.4. B.Sc. Computer Science2013 - 2017

Thesis on perceived latency in touch interfaces.

6. Accessibility Considerations

This document is itself an implementation. It is a single file with no images, scales to any viewport, honours reduced-motion preferences, hides its decorative ASCII art from assistive technology, and keeps a contrast ratio above 15:1. The author recommends that every portfolio, and every product, be held to the same standard [WCAG22].

7. Author's Address

7.1. Preferred Transport

Email is the preferred transport for project inquiries and introductions; the author replies within two business days. Phone is suitable for scheduled calls. The author is based in Central European Time and is available for full-time roles, contract work, and remote collaboration.

8. References

[RFC2119]

Bradner, S., "Key words for use in RFCs to Indicate Requirement Levels", BCP 14, RFC 2119, March 1997, <https://www.rfc-editor.org/rfc/rfc2119>.

[WCAG22]

W3C, "Web Content Accessibility Guidelines (WCAG) 2.2", W3C Recommendation, <https://www.w3.org/TR/WCAG22/>.