Nayeob Kim - Portfolio

Hi, I'm Nayeob (나엽 / pronounced Nah-yup), a Digital Product Designer based in Vancouver, Canada.

I create thoughtful, scalable interfaces, with a specialization in design systems. Having previously designed at Shopify and MetaLab, I bring a strong background of shipping delightful products in close collaboration with development teams.

I actively leverage emerging technologies, including AI tools, to accelerate workflow and deliver functional code prototypes. I'm driven by new innovations and excited to tackle complex problems at the intersection of design and technology.

Work

Order Summary

The optimization of the Order Summary UI/UX focused on enhancing clarity and scalability across content and localizations. Key work involved redesigning the line-item layout for price scannability, implementing a systematic token-based spacing strategy for the money line to support complex tax disclosures, and utilizing AI tools for high-fidelity internal asset generation.

UX Design UI Design AI Image Generation

Payment in Checkout

The Payment in Checkout flow was systematized, focusing on conversion, trust, and legal compliance. I established strict content models for payment methods and disclaimers, reduced friction by optimizing third-party redirect patterns for density and speed, and governed all 'Pay now' area content. Solutions were validated via functional code prototypes to ensure technical feasibility and scalability.

UX Design UI Design Vibe-coding

OTP Component

Standardized verification flows were established through the creation of a scalable OTP component, balancing immediate Payment team needs with long-term system reusability. Following an extensive research and audit, a flexible property was designed, supported by UX guidance to ensure a polished end-to-end checkout experience.

Research UX Design UI Design

Interactive States

Interactive states across the component library were audited and standardized to elevate accessibility and visual affordance. Focus states for selection controls and buttons were refined for reliability, while the introduction of a pressed state provided stronger interaction feedback.

UX Design UI Design Interaction Design

Design System Stewardship & Documentation

Figma libraries were maintained through changelogs and Slack messages. Technical documentation on shopify.dev was updated with refined properties and best practices. Visual assets were also developed to educate the ecosystem on Checkout Extensions.