Reward reveal state

Reward reveal state

Craft and Systems

Raising the Experience Bar Through Motion Systems

A product-quality story about defining motion criteria, creating reward-reveal examples and pattern proposals, and reviewing implementation choices with engineering.

Leadership Question

How can motion criteria and concrete examples make implementation decisions more explicit for design and engineering?

Motion SystemsExperience QualityDesign Engineering

Case at a glance

Leadership scope and evidence

Lead experience-quality work by defining criteria, creating concrete examples, reviewing proposals with engineering, and keeping implementation claims bounded.

Leadership role
Design leader defining motion criteria and reviewing implementation proposals with engineering
Timeframe
Motion criteria and pattern exploration
Team
Product design, front-end engineering, and product teams
Scope
Reward reveals, feedback states, transitions, pattern proposals, and Rive implementation exploration

Motion framing

Criteria

Defined when motion should clarify state, feedback, orientation, or reward value.

Pattern direction

Proposed

Created reveal and transition examples and pattern proposals for engineering review.

Rive use

Scoped

Rive was used for Reward Boxes; broader product use remained exploratory.

Executive summary

Motion quality was inconsistent because purpose, behavior, and implementation expectations were under-defined. I defined criteria, created reward-reveal examples and pattern proposals, and reviewed them with engineering rather than treating animation craft as the outcome.

Reward reveals were the working example. Rive animations were used for Reward Boxes, while broader use remained a design-engineering exploration.

Challenge

The quality gap was a decision-practice gap.

Design and engineering needed common criteria for purpose, behavior, and maintainability.

Reward moments confirm an outcome, explain value, orient the customer, and create celebration. Without that order, motion could become decorative or inconsistent.

The work therefore started with purpose and behavior. Prototypes and redacted examples made timing, hierarchy, completion states, and engineering constraints reviewable before any broader use.

Leadership role

What John led

The leadership contribution was defining criteria, creating examples and proposals, and bringing them into engineering review.

  • Defined when motion should clarify feedback, orientation, state change, or reward value.
  • Used reward reveals and transitions to make quality expectations concrete and reviewable.
  • Created reward-reveal examples and pattern proposals, then reviewed behavior, timing, constraints, and implementation options with engineering.
  • Kept Rive claims scoped to Reward Boxes while broader use remained exploratory.

Approach

Quality and implementation practice

The sequence connected customer purpose, interaction behavior, and engineering feasibility before broader use was considered.

Define

Give motion a customer job

Prioritized moments where movement could explain an outcome, orient the customer, or make reward value easier to recognize.

Prototype

Use reward reveals as working examples

Compared hierarchy, feedback, pacing, and completion states in artifacts that design and engineering could review together.

Specify

Turn examples into pattern proposals

Specified purpose, behavior, timing, and implementation considerations for engineering review.

Decision

Why it mattered

Outcome

Require motion to communicate

Visual preference alone was not a durable reason for teams to prioritize or maintain an interaction.

I used feedback, orientation, state change, and reward value as review criteria.

Use reward reveals as quality exemplars

They combined a clear customer outcome with high expectations for hierarchy, feedback, and expression.

I brought concrete artifacts into design-engineering discussions about behavior and implementation.

Keep Rive use local to Reward Boxes

Rive was used for Reward Boxes, not as evidence of product-wide fit or efficiency.

Broader use remained exploratory.

Artifacts

Motion examples and implementation artifacts

Redacted previews and representative models used to review purpose, behavior, timing, and system potential.

Reward reveal state

Reward reveal state

Motion systems feature demo

Rive motion system opportunity

Rive motion system opportunity

Reward transition iterations

Reward transition iterations

Outcomes

Criteria, examples, and proposals

The work produced criteria, examples, and pattern proposals reviewed with engineering; broader use remains unconfirmed, and no product result is claimed.

Outcome

Defined criteria for motion that could explain feedback, orientation, state change, or reward value.

Outcome

Created reveal and transition examples and pattern proposals, then reviewed them with engineering.

Outcome

Used Rive for Reward Boxes while broader use remained exploratory.

Director Signal

Leadership signal

Lead experience-quality work by defining criteria, creating concrete examples, reviewing proposals with engineering, and keeping implementation claims bounded.

What We Learned

The leadership lessons that carried forward

The strongest case studies leave behind more than shipped work. They sharpen the operating principles behind future decisions.

01

Motion should explain

Use movement to clarify state, feedback, orientation, or reward value before using it for expression.

02

Specify before implementation

Purpose, behavior, timing, and completion state give design and engineering concrete review material.

03

What I would do differently

I would bring engineering into pattern definition earlier so customer purpose and implementation feasibility evolved together.

Leadership Conversations

Building product ecosystems, stronger teams, and sharper executive alignment.

Open to Product Design Director opportunities across growth, platform, loyalty, and product ecosystem leadership.

Start a conversation

Based in the U.S. and open to product design leadership opportunities.