UX Product Designer · Provo, Utah  ·  Available for new roles

Turning
problems
into usable
products.

I run user interviews before the first wireframe, track behavior with FullStory and Sigma after launch, and write JIRA tickets for developers in between. Highlighted in this portfolio are an ai-assisted development saas product, a design system created for that product, a concept project, and 6 features deployed across GoReact and RainFocus — from WCAG 2.1 compliance that unlocked higher-ed contracts, to a self-serve payment flow that cut the sales team out of every learner transaction.

10+
Experience Years designing digital products
9
Case Studies GoReact & RainFocus · +1 saas product, design system, and concept project
5
Fortune 500 Clients Oracle · Cisco · Samsung · Gartner · VMware
45+
Research Sessions Interviews coded, tested, and acted on

Ten steps — not as a checklist, but as a commitment. Most UX processes end at step 7. Steps 06, 08, and 10 — stakeholder alignment, implementation support, and measuring results after launch — are where the work either holds together or falls apart. Every GoReact project in this portfolio ran to step 10.

The Product UX Designer, Product Manager, and Engineering Lead collaborate across all ten steps, drawing on ideas from inside and outside the business. This isn't a waterfall — each step informs the others, research can reopen discovery, testing can reframe the problem, and the loop continues as long as the work demands. That loop is already changing shape. Collaborating in real time with a tool like Claude — generating a working concept, testing it with real users the same day, bringing the findings back to iterate immediately, and testing again — compresses what once required separate design and engineering sprints into a single cycle, and redefines what a product designer with strong research instincts is capable of delivering.

01
Define the Problem

Frame the core challenge, constraints, and success criteria before any design work begins.

02
Understand Users & Context

Research real users through interviews and observation to surface what they actually need.

03
Discovery & Competitive Research

Map the existing landscape to identify gaps, patterns, and opportunities the design must address.

04
Low-Fidelity Solutions

Sketch and wireframe rapidly to explore the solution space before committing to any direction.

05
Iterate & Test

Put rough designs in front of real users, learn fast, and refine based on what breaks.

06
Align Stakeholders

Bring product, engineering, and leadership into the design before it becomes costly to change.

07
Prepare for Dev

Produce specs, component documentation, and handoff materials that engineers can build from directly.

08
Support Implementation

Stay present during build to answer questions, review work in progress, and catch drift early.

09
Product Test

Validate the near-shipped experience against the original problem definition with real participants.

10
Measure Results

Assess outcomes against success criteria and document what the design actually changed.

Selected
Work

One shipped AI-assisted SaaS application built with Claude, a published design system (LockedIn + 2 years owning GoReact's), six shipped features at GoReact and RainFocus — full process, no visuals due to NDA where applicable. One speculative concept project with visuals in progress.

L
AI-Assisted Development SaaS Product Design In Beta

LockedIn — Multi-Tier SaaS Coaching Platform Built Through AI Collaboration

What started as a single-team coaching tool for my U13 youth soccer team has grown into a multi-tenant SaaS platform with four pricing tiers, three Claude-powered AI features, and a custom domain ready for public launch following beta. I designed every feature, wrote every requirement, and partnered with Claude to translate those decisions into ~17,800 lines of production-ready vanilla JavaScript — backed by Firebase, Stripe, and Cloud Functions. This case study documents what a product designer with domain expertise can ship when AI is both the development partner and the product feature.

Product Design · SaaS · AI-Assisted Development Multi-Tenant PWA Firebase Auth + Firestore Cloud Functions (Node.js 22) Stripe Integration Service Worker (Network-First) Vanilla JavaScript Claude Sonnet 4 (Practice Generator) Claude Haiku 4.5 (OCR Vision) Conversational Development Partner Pluggable Framework Engine Hudl CSV Import Spotify Web Playback Cloudflare Pages gettinglockedin.app Automated Test Suite Production Build Pipeline
Role
Designer · Product Owner · AI-Assisted Developer · Solo Founder
Status
Beta — public launch planned following beta. Currently used by my coaching staff for live testing through the rest of the U13 season.
Business Model
Four-tier SaaS: Free · Pro $9/mo · Club $29/mo · Enterprise. Stripe checkout, customer portal, webhook-driven licensing. 14-day Pro trial.
AI Stack
Claude Sonnet 4 (practice generation) · Claude Haiku 4.5 (OCR roster + schedule parsing) · Claude as conversational development partner
Domain Knowledge
US Soccer C License · 6+ years coaching at Liverpool FC International Academy Utah · Six years inside the methodologies the engine is built to support
Production Domain
gettinglockedin.app
Outcome

Built a deployable, monetizable SaaS platform — 17,800-line frontend, Cloud Functions backend, Stripe checkout, three Claude-powered AI features, a framework-agnostic practice engine, and an automated production build pipeline — all designed and shipped solo through AI collaboration, with no prior software deployment experience. Currently in beta with my coaching staff; public launch planned following beta.

The Problem

As a youth soccer coach, I needed a system that would make position selection fair, transparent, and effort-based — players and parents deserved to see playing time earned, not assigned. No existing tool combined practice tracking, player evaluation, voice-coached timing, and structured curriculum in one place. What started as a tool for my own team became a question: if I needed this, how many other coaches did too? The answer became LockedIn.

Two Roles for AI

This project required Claude in two distinct roles, and treating them as separate disciplines is what made the project shippable.

AI as Development Partner. Claude translated every design decision into working code. Across hundreds of conversational sessions, we wrote ~17,800 lines of frontend JavaScript, ~3,000 lines of Cloud Functions backend, a 229KB practice-engine library, and a complete test suite. I made every architectural decision; Claude implemented them. When the cache-first service worker caused data loss on a redeployment, we diagnosed the root cause together and rewrote it as network-first within an hour. When a Firestore listener was overwriting pending local edits, we designed a 5-second listener-protection window. The conversational pace meant the gap between "this is broken" and "this is fixed" often closed in a single session.

AI as Product Feature. Three production features inside LockedIn are themselves powered by Claude through dedicated Cloud Functions. The AI Practice Builder (Claude Sonnet 4) generates a complete timed practice from a coach's natural-language prompt and age group, returning structured JSON the timer can play instantly. The Roster OCR (Claude Haiku 4.5) extracts player names from photos of lineup sheets, registration forms, or printed rosters. The Schedule OCR (Claude Haiku 4.5) extracts practice and game dates from photos of season schedules. All three round-trip through Firebase Functions with proper error handling, CORS, secret management, and rate-limit awareness. Designing UX around AI output — handling the unstructured, the unexpected, the occasionally hallucinated — is a different discipline from prompting AI for code, and LockedIn required both.

The AI Practice Builder is also framework-aware: it generates practices that follow whichever curriculum the coach has loaded. A coach running one framework gets practices aligned to that framework; a coach running a club's custom framework gets practices that match that club's philosophy. The AI doesn't impose a methodology — it amplifies whichever methodology the platform is currently running.

The Architecture I Designed

Every architectural decision was driven by my constraints as a non-engineer shipping to paying users. Multi-tenant Firestore data modelteams/{teamId} collections with their own roster, configs, practices, and license; share-inbox at shares/{emailKey}/inbox/{shareId} so coaches can invite assistants and parents without exposing data. Firebase Auth + Firestore Security Rules — properly scoped rules that block all anonymous access, restrict user profiles to their owner, and gate team data behind authentication. Stripe via Cloud Functions — checkout sessions, customer portal, and webhook handlers (checkout.session.completed, customer.subscription.updated, customer.subscription.deleted) that update each team's licenses/{teamId} document automatically. LocalStorage + Firestore dual-write with a pending queue and 5-second listener-protection window — every edit writes locally first (instant), then syncs (durable), and incoming Firestore echoes can't overwrite pending local changes. Network-first service worker with 3-second timeout fallback — every PWA launch checks for new HTML, falling back to cache only if the network is slow or offline. Production build pipeline (build-prod.py) — minifies HTML/CSS/JS into a deployable zip, preserving regex literals and template strings while collapsing whitespace and comments.

The Product I Designed

LockedIn ships ten feature modules organized into four pricing tiers. The Free tier includes the Core module — practice timer, roster, attendance, Quick Rate, and merit points. Pro ($9/mo) adds Stats (charts, bell curves, radar comparisons, correlations), Game Day (substitution management, rotation plans, Hudl CSV import), Library (save/load practices, folders, sharing), Intensity Engine (periodization, auto-optimize, data breaks), and IDPs (development plans, habit tracking, personal timer). Club ($29/mo) adds Curriculum (club-specific practice packs and templates) and Admin (root dashboard, BI metrics, user management, survey analytics). Enterprise unlocks API Integrations (live Hudl sync) and White Label (custom branding, club logos, color themes). All modules use a soft-gate pattern — locked features remain visible and show an upgrade prompt on tap rather than disappearing entirely, so coaches always know what's available at the next tier.

A Framework-Agnostic Platform

The most distinctive design decision in LockedIn isn't a feature — it's an architectural one. Every coaching framework in the practice engine is a pluggable content pack, not a hardcoded curriculum. Any organization's coaching philosophy can be inserted or removed: a national federation's player development methodology, a professional academy's curriculum, a local club's house style, or a coach's personal system. The app is the container; the framework is the content. This means LockedIn's value isn't tied to any single methodology — it's tied to the methodology a coach or club chooses to bring with them.

For testing purposes during the beta, I built two frameworks into the engine — the US Soccer Framework (covering U5 through U18 with tactical principles, player actions, and session structures) and the Liverpool FC International Academy Framework (covering four developmental phases with 5-week themed cycles). Both are functional, both are tested, and both are illustrative of what the engine can do. Neither will ship to paying users without proper licensing. Public launch will require a partnership, endorsement, or formal permission from the US Soccer Federation and from Liverpool FC, and pursuing those conversations is part of the pre-launch roadmap. If licensing isn't secured, the product can ship without these specific frameworks — the engine works equally well with any framework a club brings, and the beta-testing frameworks served their purpose by proving the architecture.

This means LockedIn can become a platform for any club, any federation, or any coaching methodology willing to partner with it. A national federation could deploy its own player development model. A professional academy could distribute its curriculum to affiliated clubs. A local club could codify its house style and onboard new coaches with it on day one. The app's value proposition isn't "here's our coaching philosophy" — it's "bring yours, and we'll run it."

A generatePractice(ageGroup, moment, principle) function in the engine takes any framework's tactical objective and returns a complete timed practice that the timer can play immediately. The engine doesn't care whose framework is loaded; it cares whether the framework is structured correctly. That's a designer's call masquerading as an engineering one — and it's the call that determines whether LockedIn is a single-curriculum app or an industry platform.

AI as Product: The Three Cloud Functions

The three Claude-powered features each shipped to production, each solving a real coaching problem.

The AI Practice Builder (Claude Sonnet 4 via generateAIPractice Cloud Function) replaces what used to be a 30-minute session of pulling drills from the library. A coach types: "I want a 75-minute practice for U13 focused on third-man runs and finishing." The Cloud Function calls Claude with a system prompt enforcing strict JSON output, parses the response defensively (stripping markdown fences, trying multiple parse strategies if the first fails), and returns structured activities the practice timer can play immediately.

The Roster Parser (Claude Haiku 4.5 vision via parseRoster Cloud Function) eliminates manual roster entry. A coach photographs a lineup sheet — handwritten, printed, league-formatted, anything — and within seconds the player names populate the roster. The Cloud Function handles PNG, JPEG, GIF, WebP, and PDF inputs, falls back to line-by-line extraction if JSON parsing fails, and returns a clean array.

The Schedule Parser (Claude Haiku 4.5 vision via parseSchedule Cloud Function) reads a season schedule image and extracts every practice and game with ISO-formatted dates and event types. Coach context (team practice days, game days) is passed in to help disambiguate ambiguous dates.

What I Designed That Coaches Don't See

Some of the design work that took the longest never appears on screen — but absent it, the app couldn't ship. A debug system that captures every error and promise rejection into localStorage, accessible through a _debug console object so I can ask any beta coach to run _debug.exportState() and email me the result. A multi-practice tab system (TIMER_TABS) that lets coaches load up to 10 practices simultaneously, each with preserved playback state — implemented through a "mirroring" pattern where the active tab's data is silently kept in sync with the singular globals every screen reads from, so every existing screen kept working without refactoring. A seed-only-if-empty guard built after one beta-testing data loss incident — Firestore now refuses to seed defaults unless documents truly don't exist. A listener-protection window that prevents Firestore echoes from overwriting pending local edits within 5 seconds of a save. A Figma tokens export (figma-tokens.json) that keeps the design system synchronized between the running app and my Figma design file.

Current Status & What This Demonstrates

LockedIn is currently in beta. My assistant coaches and I are running our remaining U13 season practices on it through the rest of the season. Every feature — Stripe checkout included — is wired and tested; no real coaches are paying yet because no real coaches are subscribed yet. The product is ready to monetize. I'm finishing it.

What this project demonstrates is bigger than "designer ships an app." It demonstrates that the gap between product design and product engineering — long treated as a hard professional boundary — closes substantially when a designer with strong research and domain instincts collaborates with AI in real time. The decisions were mine. The execution was collaborative. The result is a SaaS product I can hand to a recruiter, a hiring manager, or a coach and have them use it inside of two minutes. That's the proof.

DS
Design Systems Component Architecture Live Artifact

Design System

For two years at GoReact, I maintained the design system through a Sketch → Adobe XD → Figma migration. I was one of the first designers at GoReact to experiment building responsive reusable components that eventually were included in a shared library. I currently don't have access to the GoReact Design System but to prove the credential, I built and published a complete production design system for LockedIn, my SaaS coaching platform.

Design System Governance · Component Library · Token Architecture Figma (3 years) Adobe XD (2 years) Sketch (1 year) Responsive Components CSS Custom Properties Figma Tokens Export WCAG 2.5.5 Touch Targets 12-Section Specification Cross-Designer Adoption Multi-Tool Migration
View the LockedIn Design System ↗
Role
Design System Owner (GoReact, 2 years) · Solo Designer & Builder (LockedIn)
GoReact Tenure
2 years owning the design system across a Sketch → Adobe XD → Figma migration. Reassigned to UX research because of Social Science background; continued as senior product designer through end of tenure.
LockedIn Artifact
12-section design system: color tokens, typography, weight hierarchy, spacing & radii, buttons, cards, form inputs, avatars, navigation, progress & data, responsive breakpoints, special elements.
Tools
Figma (primary, 3+ years) · Adobe XD · Sketch · Figma Tokens · CSS Custom Properties
Outcome

2-year design system ownership at GoReact + a complete, publicly viewable production design system for LockedIn covering 12 sections, 17 color tokens, responsive breakpoints across 4 device tiers, WCAG-compliant components, and a Figma tokens export that syncs the design file with the running app. Click "View the LockedIn Design System" above to inspect the live artifact.

The Credential (GoReact, 2019–2025)

I joined GoReact in 2019 and spent the first 2 years owning the design system. The work spanned a tool migration most teams never complete: Sketch first, then Adobe XD for ~2 years, then Figma for the final 3 years of my tenure. Each migration was a chance to rebuild — not a copy-paste exercise but a re-architecture. The Figma migration included work on how to make responsive variants, which replaced the static screen-size duplicates the team had inherited from Adobe XD. Components were saved as library assets so that all designers on the team had access. When existing features were updated, the design system was the source of truth.

After 2 years owning the system, I was reassigned to deeper UX research work because of my Social Science background (MS Sociology, BYU). I continued as a senior product designer through end of tenure, using the design system our team had built to ship every subsequent feature documented elsewhere in this portfolio: the library redesign, the WCAG 2.1 accessibility project, the in-app payment flow, the analytics & feedback system. The design system isn't a separate story from those projects — it's the foundation underneath all of them.

Why the Credential Needs a Visible Artifact

My work at GoReact is under NDA. I cannot share components, tokens, screenshots, or the Figma file. For a recruiter or hiring manager scanning for design system experience, that's a problem: the most important credential on the resume has no visible proof. To solve this, I built the LockedIn design system as a complete production artifact and published it. The LockedIn design system is the actual design system powering the LockedIn SaaS platform documented in the case study above. Every component, token, and breakpoint in the live design system is also in the running app's CSS.

What the LockedIn Design System Contains

12 documented sections. Color Tokens (17 CSS custom properties on :root) · Typography (Outfit + DM Sans, rem-based for Dynamic Type accessibility) · Weight Hierarchy (4 tiers with usage rules) · Spacing & Radii (4 radii scale, breakpoint-aware padding) · Buttons (6 variants, all with 44px minimum touch targets per WCAG 2.5.5) · Cards (3 padding tiers, multiple radii) · Form Inputs · Avatars (3 sizes) · Navigation Elements · Progress & Data Display · Responsive Breakpoints (4 device tiers with documented media queries) · Special Elements.

A Figma tokens export. The figma-tokens.json file in the LockedIn project codifies every token in a format that imports directly into Figma's Tokens Studio plugin. This means the design file and the running app share a single source of truth — if a color or radius changes in the design system, it propagates to both surfaces.

Real production constraints. WCAG 2.5.5 touch targets are enforced at the button-variant level, not as a footnote. Spacing scales with device size across 4 breakpoints. Responsive components don't just collapse — they reflow with documented padding shifts between mobile (≤380px), base phone (381–499px), tablet (≥500px), and desktop (≥768px). A high-contrast accessibility override is built in as a separate media query.

Decisions I Made as the System Owner

CSS custom properties over preprocessor variables. Tokens live on :root so the entire palette can be swapped by editing one block. This made theming achievable without a build step — important because LockedIn deploys as a single-file PWA.

Six button variants, not twenty. Every button on every screen is one of six documented variants. This was the hardest discipline to maintain — the temptation to add a "just this once" variant compounds across a 17,800-line app. The system survives because every variant is documented and the rule is simple: if a button doesn't match a variant, change the button or change the variant — never both.

Rem-based type sizes for Dynamic Type. Every font size is in rem, not px. This means a user who increases their browser font size or uses iOS Dynamic Type sees every text element scale proportionally — accessibility that's invisible until it matters.

Documented responsive behavior, not assumed. Every section that has breakpoint behavior documents it in plain English alongside the code. A developer reading the design system can see that card padding shifts from 14px on ≤380px screens to 24px on ≥768px screens without inferring it from media queries.

What This Demonstrates

Design system ownership is a discipline: every visual decision is governed, every component is a documented variant, every token has a single source of truth, and the entire system propagates through cross-tool migrations without losing fidelity. The GoReact tenure proves the discipline at organizational scale. The LockedIn design system proves it at solo-builder scale. Both are the same skill. For any organization needing a designer who can either inherit and steward an existing system or build one from first principles, both stories are in this portfolio to demonstrate this skill.

00
Concept Project In Progress

Clip-Tagging Workflow for Sports Video Analysis Tool

Every case study in this portfolio is protected by NDA — the outcomes are real, but the visuals can't be shown. This concept project exists to change that. It's a speculative redesign of the coach's clip-tagging workflow for a sports video analysis tool, targeting a documented usability problem that forces coaches to watch the same game film multiple times. I'm a licensed soccer coach. I know this problem firsthand. This project shows my full process — from research through prototype — with nothing held back.

Speculative UX Design User Research Journey Mapping Wireframing High-Fidelity Mockups Figma Prototype 10-Step Process
Type
Speculative Concept Project
Platform
Desktop + Mobile · Figma
Domain Knowledge
US Soccer C License · Liverpool FC International Academy Utah · 6+ years coaching competitive youth soccer
Design Hypothesis

A unified single-pass tagging interface — where stats, clip cuts, and playlist assignments are treated as simultaneous properties of one moment — can cut post-game film processing time by 50% or more for coaches working without video staff.

This is a speculative concept project, clearly labeled as such. It was created in direct response to the NDAs that restrict the visual artifacts from every other project in this portfolio. The research, decisions, and design thinking here are original — though the participants and stakeholders represented are fictional, used to demonstrate the methodology rather than report on real users. Deliverables are being completed and will replace each placeholder below as they are finished — check back as this project builds out.
01 Define the Problem Complete
Problem Brief

The clip-tagging interface forces coaches to make two complete passes through the same game film to do what should be a single operation — tag a stat, cut a clip, and assign a playlist simultaneously. For the high school or club coach working alone after a full day of teaching or work, that time cost is prohibitive enough to abandon the features entirely.

02 Understand Users & Context In Progress
User Research & Personas

Primary users: the high school head coach who is also a full-time teacher or the part-time club coach who has a full-time day job — managing film review late at night after a game, without a video coordinator. Secondary user: the assistant coach who assists with tagging but lacks training on the platform. Research approach: interviews with coaches from Liverpool FC International Academy Utah and other club-level programs, supplemented by public G2, App Store, and coaching forum reviews to validate pain points at scale.

A fourth persona has been added specifically in response to Hudl Assist: the Assist subscriber — a coach or program that already pays for Hudl's human-analyst breakdown service (launched ~2018, upgraded through 2025). This persona is valuable as a contrast case. If Assist already solves the two-pass problem for them at an added cost, what does that reveal about the value of the underlying workflow? Research with this persona will explore willingness to pay, whether they still interact with raw film after receiving Assist breakdowns, and what capabilities they wish existed in the base interface. This directly sharpens the design question: the solution should deliver Assist-level outcomes through interface, not service.

03 Discovery & Competitive Research In Progress
Competitive Analysis & Current-State Audit

Platforms under review: Hudl (primary — base platform and Assist service tier), QwikCut, Wyscout, Nacsport, Veo, SportsVisio, Track160, and Catapult Video. A key finding already established: Hudl's own answer to the two-pass problem is Hudl Assist — a paid add-on service (~$900–$3,300/year depending on tier) where trained human analysts tag your games and deliver stats plus automatic player clip playlists within hours. As of early 2026, AI auto-tagging via Balltime AI is available for club volleyball only. This makes Assist a direct comparison point for the redesign, not just a feature note — Hudl's strategy was to sell a service layer rather than fix the interface, which is a meaningful product decision to interrogate.

The competitive analysis specifically maps how each platform positions itself relative to this gap. SportsVisio and Playbook Sports are explicitly marketing against coach workflow complexity, targeting programs without video coordinators — the same population this project serves. Also reviewed: multi-attribute tagging patterns from non-sports domains including video annotation tools (Encord, CVAT, V7 Labs), qualitative research platforms (MAXQDA, NVivo), and professional editing software. Current-state journey map of Hudl's base workflow documented step by step, with Assist's service-model flow as a parallel reference.

04 Low-Fidelity Solutions In Progress
Wireframes & Concept Sketches

Core design question: how do you present stat tagging, clip cutting, and playlist assignment as a single unified interaction rather than three sequential modes — without requiring a paid analyst service to do it for you? Initial concepts explored a persistent side panel, a trigger-and-expand overlay, a timeline-first layout, and a floating HUD. The overlay model (Sketch B) was selected as the primary concept: video fills the full frame during playback; a bottom-anchored overlay appears only when a tag is triggered, keeping the coach's view unobstructed at all other times.

A speculative second thread explores a non-intrusive AI suggestion layer — surfacing detected moments as dismissible badges rather than auto-tagging, preserving full coach agency while reducing the cognitive load of watch-and-tag simultaneously. This thread is clearly marked speculative throughout and is informed by Hudl's Balltime AI acquisition (February 2025), which currently supports club volleyball only. All wireframes produced in Figma at 1280×800px.

05 Iterate & Test In Progress
Usability Testing & Iteration Notes

Testing was conducted with 8 coaches from Liverpool FC International Academy Utah and broader club-level contacts — the same population representing Hudl's core high school and club market. Sessions used a 3-condition design: Condition A (Hudl base platform, current), Condition B (redesign prototype), and Condition C (Hudl Assist walkthrough). Each participant completed all three conditions across three sessions spaced one week apart, using a Latin square rotation to control for learning effects.

The Assist comparison (Condition C) was deliberate: if a coach on Assist already gets stats and clips without doing film review themselves, what do they lose? Testing revealed that all 6 Assist walkthrough participants independently raised the same gap — you can't build thematic clip packages from Assist output, and the tags "aren't mine." These findings directly shaped what the redesign needed to preserve and what it could simplify. Six design changes were made as a result of testing; five design decisions were challenged and survived unchanged.

06 Align Stakeholders In Progress
Stakeholder Presentation

In a real product environment, this step involves presenting research findings and design direction to product leadership, engineering leads, and the stakeholder who owns the Assist product line — each with a different primary concern. The presentation is structured to address all four roles simultaneously: the human problem for the product director, the research credibility for the skeptic, the technical feasibility signal for the engineering lead, and the cannibalization question — honestly and head-on — for the revenue stakeholder.

The Assist context sharpens the business framing substantially. Hudl's decision to solve the two-pass problem via a paid analyst service rather than a redesigned interface is a product strategy choice — one that generates revenue from the pain point rather than eliminating it. The deliverables in this step make the case for a base-platform fix, quantify the cannibalization risk with specificity, and offer three strategic paths forward. The deck ends not with a recommendation on the revenue model — that decision belongs to the stakeholders — but with a clear ask: a green light to invest design resources in validating this at higher fidelity.

07 Prepare for Dev In Progress
High-Fidelity Mockups & Developer Handoff

High-fidelity mockups are produced in Figma, working within and extending Hudl's existing dark-UI visual language — this is a feature redesign, not a rebrand. Desktop and mobile/tablet breakpoints are designed in parallel from the outset, since the target user (the teacher-coach reviewing film late at night) moves between a laptop at home and an iPad or phone on the sideline. Each screen is annotated with full interaction specifications: trigger states, hover states, keyboard shortcuts, loading and skeleton states, empty states, and every edge case identified across research and lo-fi testing.

The Assist service model shaped a key constraint in the handoff documentation: since Assist already delivers stats and clips as simultaneous properties of a single tagged moment, Hudl's backend demonstrably supports associating multiple metadata types with one event object. Every spec in this step is written to map onto that existing data model — the goal is an interface improvement that engineering can build without a back-end architecture change. That constraint is stated explicitly in each annotation where it applies, because a designer who understands the data model is more useful in sprint review than one who doesn't.

08 Support Implementation In Progress
Interactive Prototype & Comparison Frames

A fully interactive Figma prototype simulates the complete single-pass tagging workflow — from pressing play on game film through tagging a moment, adjusting the clip window, and confirming the clip with auto-playlist assignment. The prototype is publicly linkable and embedded directly in this portfolio so a hiring team or product reviewer can interact with the solution in the browser without downloading anything or logging into Figma.

The prototype is built with three comparison frames as its structural backbone: the current Hudl base workflow (the two-pass problem as it exists today), the Hudl Assist service model (what coaches receive when the analyst does the tagging for them), and the proposed redesign (one pass, coach-controlled, no additional cost, same output quality). This three-way structure is not a stylistic choice — it is the argument. A reviewer who can walk through all three flows back-to-back understands the design decision in a way that looking at screens alone cannot convey. A short narrated walkthrough video accompanies the prototype for contexts where interaction is not possible (mobile preview, async review, screen recording).

09 Product Test In Progress
Validation Testing on Final Design

This second round of testing uses the hi-fi Figma prototype produced in Step 07 rather than the lo-fi wireframes used in Step 05. The participant pool expands from 8 to 14 — the original 8 participants return for a longitudinal comparison, and 6 new participants from outside the original recruitment network are added to test whether the design's learnability generalizes beyond the coaches who influenced it. The test structure maintains the three-condition design from Step 05 (Hudl Base, Hudl Assist reference, Redesign) to enable direct before-and-after comparison of performance metrics.

The central research question sharpens in this round: the lo-fi test established that the redesign is faster and less error-prone than the base workflow. The hi-fi test asks whether it remains so at full visual and interaction fidelity — and adds a dimension that lo-fi testing could not address: does the redesign change what Assist subscribers actually want? Participant D in Step 05 said, unprompted, "I would not have paid for Assist if the base platform did this." That quote is a hypothesis. Step 09 is the test.

10 Measure Results In Progress
Outcomes & Reflection

Step 10 is the close of the project — the point at which the evidence accumulated across nine prior steps is assembled into a coherent account of what was learned, what changed, and what the design ultimately is and isn't. It is not a victory lap. A final section that only summarizes successes is less useful than one that also names the limits of the work, the decisions that remain genuinely open, and the things that would be done differently with the benefit of hindsight.

The strategic question this project set out to probe — whether a base-platform interface redesign could solve the problem Hudl Assist was built to solve, for the segment of users who adopted Assist as a workaround rather than a preference — has a more specific answer at the close of Step 09 than it did at the opening of Step 01. This section documents that answer directly, names what it cannot answer, and explains why raising the question is more valuable than either ignoring it or overclaiming the conclusion.

01
GoReact

Library Redesign

GoReact is a cloud-based, interactive video skills assessment platform and its library was confusing and inefficient — organizing files was difficult, sharing content didn't work reliably, and there was no search capability. I was the sole designer assigned to reimagine it from the ground up.

Product Design Wireframing High-Fidelity Mockups User Testing PWA · Mobile & Desktop JIRA Handoff
Role
Sole Product Designer
Collaborators
Product Manager, Lead Developer
Platform
Progressive Web App (desktop + mobile)
Outcome

Became one of GoReact's most powerful features — enabling cross-account content management, reusable templates, and reliable sharing at scale.

Visuals under NDA — full process and decisions below.
The Problem

GoReact, a cloud-based, interactive video skills assessment platform, provides a library for managing and organizing video content and learning resources. The old library was confusing — organizing files was difficult, sharing saved media didn't always work properly, and there was no search capability. The product team wanted to make the library easy to navigate, easy to share, and a useful place to save reusable documents.

My Process

I started by analyzing the old library, reviewing support tickets and client conversations to identify what wasn't functioning. Once I had a clear picture, I created wireframes to review with the product manager and lead developer. I iterated across primary personas and user journeys until we had a strong solution to take into high-fidelity. After user testing and stakeholder presentations, I finalized mockups and wrote JIRA tickets for development. All designs accounted for both desktop and mobile views.

02
GoReact

Making GoReact Accessible

GoReact's application did not meet WCAG or higher-education/government accessibility requirements — putting contractual obligations at risk. I led UX design for the entire compliance effort, working against findings from an external accessibility audit firm.

Accessibility Design WCAG 2.1 VPAT / ACR Screen Readers Adobe XD Keyboard Navigation
Role
UX Designer — Accessibility Lead
Audit Partner
Tenon.io (external firm)
Platform
Desktop + Mobile · Adobe XD
Outcome

Achieved verified compliance, established company-wide accessibility standards, and unlocked additional higher-education contracts.

Visuals under NDA — full process and decisions below.
The Problem

GoReact engaged Tenon.io to conduct an accessibility audit and create a VPAT. Problems addressed included: keyboard tabbing paths; ARIA patterns for JAWS, NVDA, and VoiceOver screen readers; icon and text color contrast (WCAG 4.5:1 standard); tooltip and focus states; application zooming for vision impairments; Windows High Contrast mode support; keyboard drag-and-drop; and clear heading and landmark regions for assistive technology navigation.

My Process

I researched WCAG guidelines and mocked up solutions in Adobe XD for each identified issue. Then I scheduled interviews with GoReact users who had accessibility needs — gathering direct feedback on what worked. I revised designs, documented developer requirements, and implemented changes. We ran follow-up Tenon.io audits iteratively until our conformance report met required standards. The PM, technical lead, and I then codified company-wide accessibility standards for all designers and developers.

03
GoReact

In-App Payment Flow

GoReact had no in-app payment mechanism. Learners had to use a bookstore code or contact an in-house team — an unscalable process the business urgently needed to solve. I designed the full self-serve payment experience.

Product Design · PM Payment UX 10+ User Interviews Staged Rollout FullStory Analytics JIRA Handoff
Role
UX Designer + Acting PM
Research
Remote interviews via Zoom / Meet
Platform
Desktop + Mobile PWA
Outcome

Launched self-serve in-app payments, eliminating sales friction and paving the way for full in-app licensing.

Visuals under NDA — full process and decisions below.
The Problem

GoReact was free for instructors but learners had no way to pay within the application — they had to use a bookstore-provided code or contact an in-house team. Neither was scalable. The business needed a way for learners to pay as they created their accounts.

My Process

I researched in-app payment patterns across multiple applications, then sketched concepts before translating them to wireframes. I reviewed these with another PM and the technical lead, then ran ~10 remote user interviews. After identifying what was and wasn't working, I iterated to high-fidelity and wrote JIRA tickets. We withheld the feature until thoroughly tested, then released to a small user group first — using FullStory and follow-up interviews to iterate quickly before full rollout.

04
GoReact

In-App Feedback & Analytics System

The product team lacked a scalable, direct way to understand user sentiment in the moment. I designed an in-app survey system integrated with Airtable, Sigma, Slack, and FullStory — including AI-assisted response categorization at scale.

Product Design · Analytics Survey Design Airtable + Sigma AI Categorization FullStory Integration Slack Alerting
Role
Product Designer
Tech Stack
Airtable · Sigma · Slack · FullStory
Innovation
AI-assisted categorization at scale
Outcome

Dramatically expanded the user feedback pool in a non-intrusive way, delivering continuous actionable insights that accelerated product decisions.

Visuals under NDA — full process and decisions below.
The Design Challenge

The modal design followed existing product patterns. The real challenge was building a taxonomy of topics to categorize open-ended responses at scale — so we could filter by area of the application. We tuned the survey's appearance cadence carefully: frequent enough to capture sufficient data, infrequent enough not to frustrate users. We adjusted the cadence iteratively after launch.

The System

After collecting several hundred responses, I manually categorized them to build the taxonomy. We then used an AI assistant in Airtable to categorize new responses — with human spot-checks and prompt iteration. Airtable data fed into Sigma dashboards showing category distribution by star rating, and into a Slack channel that included the FullStory replay link for every new response — allowing us to immediately watch the journey that prompted the feedback and create JIRA tickets in real time.

05
RainFocus

Attendee Account Mockups — Oracle & Cisco

RainFocus, a cloud-based event marketing and management platform, needed high-fidelity visuals to explore how attendee data could be embedded onto personal conference accounts. The concept: modular code that event managers could configure to customize the attendee experience.

Visual / Concept Design Adobe Illustrator Photoshop Sales Enablement Enterprise Concept Exploration
Role
Visual Designer
Collaborators
CEO, Sales Team
Clients
Oracle · Cisco (Fortune 500)
Outcome

Supported successful pitches that secured consistent, ongoing work with the event management teams at both Oracle and Cisco.

Visuals under NDA — full process and decisions below.
The Problem

RainFocus, an event management software company in its early stages, needed high-fidelity mockups for client presentations. The project explored how to embed data onto personal web accounts of conference attendees — what the UI might look like, and what kind of data could be surfaced. The vision was modular code blocks that an event manager could add or remove to customize the attendee experience.

My Role

I consulted with RainFocus's CEO and sales team on the concepts being discussed with Oracle and Cisco — then visualized those ideas using Adobe Illustrator and Photoshop. The designs served as talking-point artifacts and concept exploration tools rather than developer-ready specs, enabling the sales team to have concrete, visual conversations with enterprise clients. The resulting work secured ongoing relationships with both Fortune 500 companies.

06
RainFocus

Collection Builder & Widget Builder

RainFocus's service team relied on developers to create session catalogs, registration pages, and exhibitor forms for every event. I designed two interconnected internal tools — a Collection Builder and a Widget Builder — enabling a WYSIWYG approach with no developer required.

Tool Design Adobe XD Journey Mapping WYSIWYG Builder Internal Tooling HTML / JS Output
Role
UX Designer
Target Users
In-house service team
Tools
Adobe XD · Adobe Muse
Outcome

Service team could generate catalogs, login pages, and registration flows without developer support — dramatically reducing turnaround time per event.

Visuals under NDA — full process and decisions below.
Collection Builder

Event managers needed to create information collections — session catalogs, speaker listings, exhibitor directories — output as embeddable HTML/JavaScript for landing pages or emails. Since RainFocus handled all client setup at the time, the in-house service team was my actual target user. I explored options through sketches and journey maps in consultation with the service team, PM, and UX colleagues — then delivered high-fidelity desktop designs in Adobe XD.

Widget Builder

The Widget Builder let the service team create forms, session catalogs, login pages, and registration processes — outputting embeddable HTML/JavaScript. I used Adobe Muse for high-fidelity prototyping since Adobe XD was still in beta. The final product evolved from my designs, but the core concept — giving the service team a visual builder without programmer support — became a reality, dramatically speeding up event setup.

10+ interviews per feature.
Dozens shipped.
WCAG compliance won new contracts.

I'm Robert EM Spencer, a UX Product Designer based in Provo, Utah. I've spent years working across the full design lifecycle — from discovery and wireframing through stakeholder alignment, developer handoff, and measuring results after launch.

At GoReact, I was the sole designer on the library redesign — one of the platform's highest-complexity PWA feature — and jointly led the full WCAG 2.1 compliance project from a failing Tenon.io audit to verified conformance, codifying standards for every designer and developer on the team. At RainFocus, I designed the mockups that won Oracle, Cisco, Samsung, Gartner, and VMware as clients. I also served as acting PM on GoReact's in-app payment project: ran 10+ user interviews, wrote every JIRA ticket, and managed a staged rollout monitored with FullStory.

The library redesign became one of GoReact's most powerful features. The accessibility project unlocked higher-education contracts the sales team couldn't close before. When the in-app survey system launched, the product team went from guessing to acting on hundreds of categorized user responses — with a FullStory session replay attached to every single one.

Currently prototyping AI-assisted design and research workflows using Figma Make, ChatGPT, Claude, and Google Stitch — building and testing prompt patterns for research synthesis, design critique, and rapid concept generation. Fluent in Spanish; lived and worked in Guatemala, Chile, and Costa Rica for 11 years, which directly shapes how I conduct user research with diverse populations.

Research & Discovery
Stakeholder interviews, analytics, journey maps, in-app surveys, competitive analysis
Interaction Design
Wireframes, high-fidelity mockups, clickable prototypes, design systems, PWA design
Accessibility
WCAG 2.1, VPAT, ARIA patterns, keyboard navigation, color contrast, screen readers
Cross-Functional
Engineering collaboration, JIRA documentation, sprint support, PM experience
AI-Assisted Workflows IN PROGRESS
Figma Make, ChatGPT, Claude, Google Stitch — prototyping AI workflows for research synthesis, prompt design, and rapid concept generation
Figma Adobe XD Illustrator Photoshop FullStory Airtable Sigma JIRA Canny Zendesk Figma Make ChatGPT Claude Google Stitch
See Resume

Let's make something great.

Currently open to new opportunities. Let's talk about what you're building.

LinkedIn or Call 801 919 5565