Hi, I'm Juan

ProductDesigner

I design end-to-end product experiences, focusing on reducing cognitive load and user friction. I specialize in converting user drop-offs into user retention.

View selected work

My Design Stack

The tools I use for my end-to-end workflow.

Where I control the design thinking and decision-making.

Halftone illustration of a laptop showing an AI prompt window, with the Claude mark in orange — **Claude**My project workspace, so context carries across sessions without re-briefing. I synthesize research into personas, journey maps and docs, then audit every claim one at a time.

**Claude**My project workspace, so context carries across sessions without re-briefing. I synthesize research into personas, journey maps and docs, then audit every claim one at a time.

Halftone illustration of hands sketching wireframes over research notes, with the Gemini mark in orange — **Gemini**A second deep research engine alongside Perplexity. Claude then cross-checks both outputs before anything becomes a finding.

**Gemini**A second deep research engine alongside Perplexity. Claude then cross-checks both outputs before anything becomes a finding.

Halftone illustration of open research papers, with the Perplexity mark in orange — **Perplexity**I run deep research in Perplexity because every answer comes with sources I can open and verify.

**Perplexity**I run deep research in Perplexity because every answer comes with sources I can open and verify.

Halftone illustration of a moodboard of postcards, swatches and notes, with the ChatGPT mark in orange — **ChatGPT**I use ChatGPT for moodboarding early visual directions and for copy-editing, tightening UI text and case study writing until every line reads clean.

**ChatGPT**I use ChatGPT for moodboarding early visual directions and for copy-editing, tightening UI text and case study writing until every line reads clean.

Halftone illustration of a pencil on hand-drawn wireframes, with the Stitch mark in orange — **Google Stitch**I use Stitch for fast UI iteration and early branding directions before a concept moves into Figma.

**Google Stitch**I use Stitch for fast UI iteration and early branding directions before a concept moves into Figma.

Halftone illustration of a photo studio, with the Firefly mark in orange — **Adobe Firefly**I generate commercially safe imagery for concepts and case studies, since Firefly is trained on licensed content.

Halftone illustration of a monitor showing a design system, with the Figma mark in orange — **Figma**I build and polish prototypes in Figma, then test the user flow to make sure it holds together.

**Figma**I build and polish prototypes in Figma, then test the user flow to make sure it holds together.

GammaMy go-to for deck presentations. I turn finished case studies into slides for interviews and stakeholder reviews.

Selected Work

Case Studies

A closer look at how I take a messy problem from first question to final pixel.

Marathon Video Settings

Let'stalk.

Have a project or a role in mind? Send a note and I’ll get back to you soon.

juanma.creative@gmail.com

Small tweaks,
big impact

Empowering users to make technical decisions, without punishing their time or agency.

Visit Marathon Site

Product

Marathon is a first-person sci-fi extraction shooter. The video settings help users customize a wide range of graphics settings to balance visual quality and game performance.

Company

Bungie / Sony Interactive Entertainment

Platform: PC, PS5, and XBOX
Role: Product Designer
Scope: 0 to 1, Design System, UX/UI. Designed and developed over 8 month timeline
Team: Producer, Engineer, Designer, and QA Tester

Problem

Imagine spending 10+ minutes configuring video settings with the goal of having the best possible experience in a product, only for it to be ruined by one mistake. Only to then repeat the same process all over again.

Solution

I led the end-to-end design process to address the usability and accessibility issues. I created a series of components for the settings design system; empowering users to make confident system configurations.

Result

I established the feature’s design system that launched on March 5th, 2026, with 1.1M+ units sold across all platforms at launch. Resulting in -30% time spent configuring settings options.

Impact

~2.2M

peak users across PC, PS5, and XBOX

-30%

time spent configuring settings

1.1M+

units sold across all platforms at launch

Meet the new,
and improved,
video settings.

A simpler experience, for the most complex configurations.

Before: the closed alpha video settings, with large category buttons and long, unlabeled lists

After: the new video settings with Video and Advanced Video categories, each with its own Apply and Reset

The new Video Settings design maintains a familiar color scheme, but improves accessibility, usability, and navigation.

Users’ frustrations
were loud and clear.

The March 2026 closed alpha MVP served as the testing ground for qualitative research findings.

The closed alpha video settings: one long list of nearly 30 graphics options, scrolling from top to bottom

Choice paralysis

With nearly 30 different settings across video categories, users struggled to make confident choices without knowing the impact on gameplay.

No guardrails

Time spent on tuning came with the risk of losing progress on complex configurations.

Usability concerns

Clunky components, destructive workflows, and a lack of settings clarity caused significant friction.

Product goals
to drive retention.

Defining feature goals under tight deadlines and constraints.

Goals

Create a design system that could be used across multiple settings configurations screens and built to scale for future features.
Accelerate settings configuration so users could quickly jump into gameplay.
Provide clarity and direction to earn trust and empower decisions with confidence.

Constraints

A different paradigm: unlike other settings, video settings had to be applied manually.
Hardware diversity: NVIDIA (DLSS and Reflex), AMD FSR, and display-dependent HDR all had to degrade gracefully.
Design system limitations: Mouse/Keyboard, and controllers for console would all need to use the same components in the new design system.

A design system
for multiple platforms.

I created components for the entire Marathon settings design system. Designed to work across PC, PS5, and Xbox platforms.

Settings components: Apply button states, dropdowns, resolution list, link-out row, sliders with key hints, key binding fields and on/off toggles — A set of new components
I designed the atomic components to address the accessibility and usability issues from the closed alpha.

The same components assembled into settings rows for video, controls and display options — Built for scale
The new settings design system is built for scale and future additions to the settings ecosystem.

Detail of the new video settings: field of view, brightness, screen bounds and the Advanced Video category

Design solutions
that speed up
configurations

Three decisions that completely changed the workflow

Design choice 1 of 3

Apply, Reset, & Detect buttons to minimize the guess work.

Why

Adding Apply/Reset/Detect buttons to each video setting category creates checkpoints users can test. Risky changes could be made without losing considerable progress and time.

Tradeoff

Requires users to manage 3 different category configurations as opposed to a single global apply/reset. The difference between more frequent but smaller changes, versus one large change.

Animation: changing NVIDIA Reflex lights up the Additional Video category's Apply button, then Reset restores that category

Animation: pressing Detect sets recommended values across the Advanced Video category — Detect automatically sets the best values for Advanced Video settings, saving users a significant amount of time.

Design choice 2 of 3

Error prevention designed via dialogs, timers, and feedback.

Why

When video settings configurations have large impact on the product experience, it is best to safeguard risky decisions from accidental tuning.

Tradeoff

Adding new railings in Video Settings breaks the paradigm of other settings screens (gameplay, controls, etc) causing the current experience to become unintuitive for existing users.

Animation: leaving video settings with unsaved changes opens the Apply Changes dialog — The Apply Changes dialog appears whenever a user leaves with unsaved changes, so no tuning is lost by accident.

Confirm Resolution Change dialog, zoomed in on the line: Resolution will revert unless confirmed within 4 seconds — A countdown timer reverts resolution changes unless the user confirms them.

Animation: changing a setting lights up the category's Apply button with a green bar, then Apply confirms the change — The Apply button lights up with a green bar the moment a setting in its category changes.

Design choice 3 of 3

Tooltips to provide clear communication.

Why

Avoiding the communication pitfalls from the closed alpha, so that users understand every decision that is made across all of their video configurations.

Tradeoff

From zero to 30+ new tooltips meant technical info dumping was unavoidable. A learning curve that could take users days to understand.

Video settings with the NVIDIA Reflex tooltip open: reduces system latency for more responsive input; On + Boost further reduces latency at the cost of increased GPU usage; NVIDIA GPUs only

From pain-points
to time-savers.

Video Settings shipped on March 5th, 2026. The negative feedback from the Alpha turned into a positive experience that saved users time and frustrations.

1.1M+

Units sold across all platforms at launch

The redesigned video settings shipped to every user in Marathon's cross-platform launch on March 5, 2026.

88K+

Concurrent users after March 2026 launch

Continue to engage with video settings to customize their gameplay experience.

-30%

Time spent configuring video settings

Users spent less time configuring their video settings after these design changes, improving upon the high-friction problems from the Alpha.

“I can finally jump straight into gameplay without worrying about my settings configurations.”

- Playtest participant

If I knew then,
what I know now.

Two things I would do differently if I had more time.

Restart issues

Some settings had no effect until a manual restart, this could have been solved with a dialog.

Show what changed

Users have no way of keeping track of all of their changes. This could be used with visual feedback in each setting showing the before and after.

A climbing partner
you can trust

A research-led concept for indoor climbers looking for a top-rope belay partner.

Product

On Belay is a mobile app concept for indoor climbers looking for a top-rope belay partner. I designed the one signal a stranger reads before holding your rope.