Skip to content
All work
Case 06

React / SCSS Production UI — eGift Animation & IDME

Supported production UI implementation for B2C eGift animation and B2B IDME-related UI using ReactJS, SCSS, JSX, Git workflows, branch-based development, and pull request support.

ReactJSSCSSJSXB2C AnimationB2B IDMEGitPRCodebase Collaboration
Outcome highlights
  • Bridged the gap between Figma and production
  • Improved quality and speed of UI implementation
Product type
Production UI implementation (eGift animation, B2B IDME)
Platform
Web
Timeline
2021–2025 · multiple implementation releases
Role
UIUX design, frontend layout support, UI testing
Team
Designer, frontend engineers
Tools
ReactJS, SCSS, Git, SourceTree
Context

Why this project existed

Moving closer to production by supporting UI implementation directly in the codebase. Some projects were hand-coded before AI-assisted workflows; later work also included AI-assisted UI implementation.
My role

What I owned

  • UIUX Designer
  • Frontend Layout Support
  • React/SCSS Implementation
  • Production UI Collaboration
  • UI Testing
  • Bug Reporting
Challenge

What made it hard

  • Translating design details into production UI
  • Maintaining visual quality after implementation
  • Understanding an existing codebase
  • Working with Git, branches, and pull requests
  • Getting animation and interaction details right
  • Collaborating with engineers without replacing engineering ownership
Process

How it came together

  1. 1Cloned from Bitbucket / GitHub
  2. 2Reviewed code structure
  3. 3Created branches for UI updates
  4. 4Adjusted ReactJS, SCSS, JSX, components, variables, and color library
  5. 5Used AI-assisted workflows when appropriate
  6. 6Submitted and supported pull requests
  7. 7Tested and reported bugs
Design decisions

The thinking behind it

Treated implementation as an extension of design quality — matching intended interaction, spacing, hierarchy, and behavior.
Final design

Selected views

Abstract representations — original mockups, not client screenshots.

Outcome / impact

What changed

  • Bridged the gap between Figma and production
  • Improved quality and speed of UI implementation
Reflection

What I took away

Shaped my positioning as a designer who can think, design, prototype, and work directly with codebase-ready product UI.
Back to all work