Currently at Xbox · Microsoft Casual Games

Senior
UX/UI
Designer.

Angela Clemons

10+ years designing and shipping products across AAA games, enterprise software, and healthcare. Amazon L5. Rockstar Games. Mayo Clinic. Xbox. I bring design thinking and engineering fluency to every problem.

10+Years Experience

6Major Projects

AAAGame Credits

L5Amazon Level

View My Work Get in Touch

Currently at XboxMicrosoft Casual Games

About

Raised in Alabama.
Shaped by games.

I found my way into design through games, then built a career at the intersection of UX/UI, development, and product leadership. I design systems that work under pressure for players mid-session, patients mid-crisis, and employees mid-review-cycle.

I've partnered with teams at Amazon, Mayo Clinic, Rockstar Games, Epic Games, and Los Alamos National Laboratory. I lead cross-functional work that improves usability, adoption, and delivery speed then ship it.

Currently a PMP candidate at Capella University, deepening the strategy side to complement the execution. Remote-only. Open to international. Looking for senior IC or lead roles where design decisions actually matter.

Figma

Unity

Unreal

React

HTML/CSS

JavaScript

C++

Python

iOS

Android

Jira

Experience	10+ Years
Education	Capella University B.B. Project Management
Cert	PMP Candidate
Industries	Gaming · Healthcare · Enterprise · Gov
Location	Madison, AL (Remote)
Contact	angela.b.clemons@gmail.com

Major Projects

The work that defines me.

Seven projects across four industries — six shipped, one in soft launch. Each one had real stakes, real users, and real constraints. Click any card to view the full case study.

Enterprise

Amazon

L5 UX/UI Designer

Led design on a career development LMS making Amazon's promotion pathway transparent for the first time. Served three distinct user types across a single platform. 40% platform adoption increase.

Enterprise UX Multi-User Systems LMS Design

View Case Study →

Casual Games

Trivia for You

UX/UI Designer · Xbox Game Studios

Designing the first-time user experience for a live trivia title under the Microsoft Solitaire portfolio at Xbox Game Studios — onboarding flow and early-session pacing that carry new players into the core game loop. Currently in soft launch on zone.msn.com.

FTUE Design Onboarding Flow Live-Service Games

View Case Study →

Healthcare

Mayo Clinic

Senior Digital Designer

Led UX design on a patient and provider portal serving millions of users. Owned the patient dashboard, appointment management, health records, and provider-facing features including secure messaging.

Patient Portal UX WCAG 2.1 AA Design Systems

View Case Study →

AAA Games

Fortnite

Player Experience QA · Epic Games

Embedded on the live-service QA team for one of the largest games on earth. Validated features and patches shipped to 350M+ players, working directly with designers and engineers to surface and resolve UX-layer issues before they reached the player. What it gave me: an intimate understanding of how design decisions behave at global scale and how quickly a bad one becomes a headline.

Live-Service UX QA at Scale Player Experience

View Case Study →

AAA Games

Red Dead Redemption 2

UX Developer · Rockstar Games

Post-launch UX improvements on one of the most-played games in history. Shipped player-facing fixes that contributed to a 30% increase in player satisfaction across updated systems.

Game UX C++ / C# Post-Launch

Designed the gamified LMS and instructor dashboards for the MassXR platform serving US military training programs. Drove 49% engagement growth through game mechanics, data visualization, and iterative usability testing.

Gamification Design VR UX Data Visualization

View Case Study →

Mobile · Health

Box Buddy

Sr. UX/UI Designer · Higher Echelon

End-to-end design for a kids mindfulness app built around box breathing. Mobile-first, accessible to early readers and neurodivergent children. 94% FTUE completion. 88s median time-to-calm.

Mobile-First Children's UX Accessibility

View Case Study →

Indie Games

Mythic Merchants

PM · Scrum Master · Lazy Lion Games

Led development of a shipped time-management game on Steam. Managed a cross-disciplinary team through Agile sprints, owned the roadmap, and shipped a polished product from concept to store page.

Project Management Scrum Master Steam

View Case Study →

Other Work

More from the archive.

CSS · SVG · Canvas · JS

Motion Design Showcase

Six live animations built in pure CSS and vanilla JS - no libraries, no frameworks. Includes interaction states and annotated source code.

Coming Soon

Contact

Let's build something.

Senior IC or lead roles, remote-only, open to international. If you're working on something that needs both design thinking and engineering fluency, let's talk.

✉angela.b.clemons@gmail.com 📞256 - 581 - 5277

Send an Email Download Resume

Documentation

Portfolio Design System

The complete visual language, component library, and design tokens powering angelaclemonsux.com. Built with Syne + DM Sans, a deep navy/blue/teal palette, and precision spacing.

v1.0 · 2026 · Angela Clemons

Contents

Color Palette Project Accents Typography Buttons Cards Spacing + Radius Motion Navigation Best Practices CSS Tokens

Color Palette

Deep navy foundation with a blue/teal primary pair and an amber split-complement. Dark backgrounds dominate; light sections use ghost white.

Core Palette

Ink

#0a0e14

Primary background

Brand Blue

#2a82c8

CTAs, links, accents

Teal

#1e9e8e

Secondary CTAs, tags

Amber Gold

#e8a020

Archive labels, max 1/section

Ghost White

#f0f3f8

Light section backgrounds

Tints + Neutrals

Ink 2

#1c2333

Cards on dark bg

Blue Pale

#e8f2fc

Skill chips, tints

Teal Pale

#e4f5f3

Tags, hover fills

Mid

#6b7a99

Meta text, labels

Lite

#a8b4cc

Body on dark backgrounds

Contrast Combinations

Blue on Ink

Hero headlines, nav states

White on Blue

Primary CTAs and buttons

Ink on Ghost

Project cards, about section

Blue-D on Blue-Pale

Skill chips, badges

Teal on Ink2

Section labels on dark

Teal-D on Teal-Pale

Teal variant chips

Project Accent Colors

Each case study card has a unique accent. Used on: border on hover, badge bg, skill chip bg, and CTA button. Never mixed across projects.

Mayo Clinic

#1a7cc2

Amazon

#e47c1a

RDR2

#b02a2a

Fortnite

#7c3aed

Mythic Merchants

#c47a1a

Box Buddy

#1e9e8e

Typography

Syne for all display, heading, and UI label work. DM Sans for all body copy. JetBrains Mono for code and hex values only.

Syne Display + Headings

Display · 800 · clamp(3–4.8rem)

Angela.

H1 · 800 · 2rem

Senior UX/UI Designer

H2 · 800 · 1.5rem

Major Projects

H3 · 700 · 1.1rem

Mayo Clinic

DM Sans Body + UI

Body · 400 · .95rem · lh 1.8

10+ years designing and shipping products across AAA games, enterprise software, and healthcare.

Small · 400 · .82rem

Patient Portal UX · WCAG 2.1 AA

Label · 700 · .62rem · uppercase · tracking .22em

About

JetBrains Mono · .72rem

#2a82c8 · --blue · var(--blue)

Buttons + Interactive Elements

All interactive elements use Syne. Hover states always include translateY(-2px). Pill radius for nav and tags only.

Primary CTAs

Secondary / Ghost

Nav + Tags

● Available for Work

Skill + Badge Chips

Patient Portal UX Enterprise UX Game UX Figma Unity

Card Components

Project cards on ghost bg, color-accented on hover. Other Work cards on dark, subtle border. Both use 12px radius and lift + shadow on hover.

Project Cards

Healthcare

Mayo Clinic

Senior Digital Designer

Enterprise

Amazon

L5 UX/UI Designer

AAA Games

Fortnite

Player Experience · Epic Games

Other Work Cards (dark context)

Los Alamos

Data Visualizer

3-GIS

Skill Builder Prototype

In Progress

More Coming Soon

Spacing + Border Radius

8-point base grid. All spacing is a multiple of 4px. Sections use 96–100px vertical padding on desktop, 64px on mobile.

Spacing Scale

4px · --sp-1

Tight, icon gaps

8px · --sp-2

Small, chip padding

12px · --sp-3

Button padding v

16px · --sp-4

Card padding

24px · --sp-5

Grid gaps

32px · --sp-6

Section padding

48px · --sp-7

Section gaps

64px · --sp-8

Hero padding

96px · --sp-9

Section rhythm

Border Radius

4px

CTAs

8px

Chips

12px

Cards

20px

Modals

pill

Tags

Motion + Animation

0.2s for micro-interactions, 0.4–0.6s for scroll reveals. One animated background per section max. No bounces.

Hover States interact with these

Scale 1.05

Lift + Shadow

Blue Glow

Fill Background

Scroll Reveal Pattern

/* Applied via IntersectionObserver */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease }
.fade-up.vis { opacity:1; transform:translateY(0) }

Background Animations Used

Hero Blobs

Two radial gradients, 12-15s loop. transform + scale via @keyframes. Hero only.

Particle Canvas

55 pts, 0.25px/frame, connected under 120px. About section only.

Contact Glow Pulse

Radial gradient scale 1 to 1.15 on 5s ease loop. Contact section only.

Navigation

Fixed, 60px, dark glass. Logo left, links center, resume pill right. Custom cursor activates on all link hovers.

Angela.

About Work Contact System

Resume

Best Practices

Rules enforced across the portfolio for visual consistency and performance.

✓ Do

Use Syne 800 for all headings and display text
Use DM Sans for all body copy and descriptions
Apply project accent colors only to their own card
Keep animated backgrounds to one per section max
Use --r-sm (4px) for buttons, --r-pill for tags
Always include translateY(-2px) on button hover
Use fade-up + IntersectionObserver for all reveals
Maintain 96px section padding on desktop

✕ Don't

Don't mix project accent colors across cards
Don't use Inter, Roboto, or system font stacks
Don't use more than one amber element per section
Don't add particle canvas to more than one section
Don't use border-radius pill on dark primary CTAs
Don't use em dashes rewrite or use plain dashes
Don't add box-shadow without a hover state trigger
Don't change max-width:1080px on the wrap class

CSS Design Tokens

All values defined as CSS custom properties on :root. Copy to bootstrap any new page in this system.

/* Angela Clemons Portfolio Design Tokens v1.0 */
:root {
  /* Core */
  --ink:#0a0e14; --ink2:#1c2333; --ink3:#2e3a50;
  --mid:#6b7a99; --lite:#a8b4cc; --ghost:#f0f3f8;
  /* Brand */
  --blue:#2a82c8; --blue-d:#1a5f96; --blue-p:#e8f2fc;
  --teal:#1e9e8e; --teal-p:#e4f5f3;
  --amber:#e8a020; --amber-p:#fdf3e0;
  /* Borders + Shadows */
  --line:rgba(10,14,20,0.08); --line-dark:rgba(255,255,255,0.07);
  --sh1:0 2px 16px rgba(0,0,0,0.06);
  --sh2:0 8px 40px rgba(0,0,0,0.10);
  --sh3:0 24px 72px rgba(0,0,0,0.15);
  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  /* Radius */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-pill:99px;
  /* Project Accents */
  --c-mayo:#1a7cc2; --c-mayo-p:#e5f2fc;
  --c-amazon:#e47c1a; --c-amazon-p:#fdf0e0;
  --c-rdr2:#b02a2a; --c-rdr2-p:#faeaea;
  --c-fort:#7c3aed; --c-fort-p:#f0ebff;
  --c-myth:#c47a1a; --c-myth-p:#fdf3e0;
  --c-box:#1e9e8e; --c-box-p:#e4f5f3;
}

SeniorUX/UIDesigner.

Raised in Alabama.Shaped by games.

The work that defines me.

More from the archive.

Let's build something.

Portfolio Design System

Senior
UX/UI
Designer.

Raised in Alabama.
Shaped by games.