Digital Experience Specialist
Home Credit
Delivered responsive UI/UX designs for loan acquisition, employee recognition, and installment calculator products by translating requirements into lo-fi and hi-fi prototypes using Figma and Webflow.
Design Tokens
CSS variables in globals.css, consumed via Tailwind utility classes.
Colors
Semantic color tokens. The same grid is shown in light and dark — dark values resolve inside a .dark container.
Light
Surfaces
background#ffffff
card#ffffff
popover#ffffff
secondary#fafaf9
muted#fafaf9
Ink
foreground#292524
card-foreground#292524
muted-foreground#79716b
primary#292524
primary-foreground#fafaf9
Brand
accent#fdb721
accent-foreground#fff1c6
ring#fee289
Status
destructive#ef4444
destructive-foreground#fafaf9
success#00a63e
success-foreground#fafaf9
warning#d97706
warning-foreground#fafaf9
Lines
border#d6d3d1
input#d6d3d1
Dark
Surfaces
background#1c1917
card#292524
popover#292524
secondary#44403c
muted#44403c
Ink
foreground#fafaf9
card-foreground#fafaf9
muted-foreground#a6a09b
primary#fafaf9
primary-foreground#292524
Brand
accent#fdb721
accent-foreground#461702
ring#933b0d
Status
destructive#f87171
destructive-foreground#1c1917
success#34d399
success-foreground#1c1917
warning#fbbf24
warning-foreground#1c1917
Lines
border#44403c
input#44403c
Curious palette
The brand color scale (selective yellow), 50–950. Theme-independent. --accent is curious-400 in both modes; --accent-foreground is curious-100 (light) / curious-950 (dark); --ring is curious-200 (light) / curious-800 (dark). Use the scale directly via bg-curious-* / text-curious-* utilities.
curious-50#fffaeb
curious-100#fff1c6
curious-200#fee289
curious-300#fecd4b
curious-400#fdb721
curious-500#f79509
curious-600#db6f04
curious-700#b64c07
curious-800#933b0d
curious-900#79310e
curious-950#461702
Typography
Geist Sans (font-sans) and Geist Mono (font-mono). Sizing uses Tailwind defaults — no custom scale token.
font-sans · Geist Sans
The quick brown fox jumps over the lazy dog
font-mono · Geist Mono
The quick brown fox jumps over the lazy dog
Size scale
text-xs — Aa
text-sm — Aa
text-base — Aa
text-lg — Aa
text-xl — Aa
text-2xl — Aa
text-3xl — Aa
font-normal
font-medium
Radius
Base --radius is 0.25rem; sm / md / lg / xl scale around it.
rounded-sm
rounded-md
rounded-lg
rounded-xl
Shadow
shadow-edge — a hairline outer + inset ring used on buttons, tabs and embeds.
light
shadow-edgedark
shadow-edgeAnimation
The fadeIn keyframe via .animate-fade-in — opacity + 10px rise, runs once on mount.
animate-fade-in
fadeIn 0.5s ease-in forwardsCore Primitives
The building blocks every page composes from.
Button
serverRenders an <a> when href is set, otherwise a <button>.
variant?: 'primary' | 'secondary' | 'link'; href?; disabled?; type?; onClick?
Tab
clientDiscrete pill nav — the homepage #main-tab-nav. Inactive tabs collapse to icon-only (equal padding); the active tab, or one being hovered/focused, expands to reveal its label, and activating a tab sweeps a shine. Renders a Next <Link> when href is set.
label; icon?; active?; href?; onClick?
states — active expands; inactive is icon-only (hover to reveal)
interactive — click to switch (GSAP morph + shine)
SiteLogo
serverHome link with the SVG logo. Also used in the header above and in StickyHeader.
className?
Cards & Embeds
Post listings and third-party link previews.
Card
serverComposes ExpandableText, ImageLightbox and LinkEmbed. Variants below cover text, read-more, image, and the three embed types.
avatar*, title, subtitle?, date?, category?, content?, href?, readMore?, imageSrc?, linkPreview?
Avatar + expandable text
Jun 2026Hafidz Noor•Note
I am a product designer focused on fintech and banking. This paragraph is deliberately long so it overflows three lines and reveals the inline more / less toggle that ExpandableText renders when its content exceeds the clamp.
Read-more variant (fallback avatar icon)
May 2026Article
I am a product designer focused on fintech and banking. This paragraph is deliberately long so it overflows three lines and reveals the inline more / less toggle that ExpandableText renders when its content exceeds the clamp.
Read moreWith image (opens in ImageLightbox)
Apr 2026Tap the image to open the zoom + pan lightbox.
With generic link preview
Mar 2026With YouTube preview
Feb 2026With Instagram preview
Jan 2026LinkEmbed
serverDetects YouTube / Instagram / generic URLs and renders the right embed. Extend here for new types — never branch inside Card.
preview: CardLinkPreview
Favicon
clientShows a skeleton while loading. Falls back from the site's own favicon to Google's favicon service (when siteUrl is set), then to a globe icon on error/timeout.
src?; siteUrl?; className?
loading
claude (static)
fallback
LinkThumbnail
clientThumbnail with shimmer placeholder and globe fallback.
src?
loaded (static)
fallback
ExpandableText
clientClamps to 3 lines and reveals a more/less toggle on overflow.
text; className?
I am a product designer focused on fintech and banking, where I turn dense, regulation-heavy flows into interfaces people can actually understand. Over the past several years I have shipped onboarding, payments and dashboard experiences for wallets, neobanks and lending products. This paragraph is intentionally long — well past three lines — so the ExpandableText clamp kicks in and the inline more / less toggle is revealed. Tap more to read the full text, then less to collapse it back down to the clamped preview.
ImageLightbox
clientClick to open a zoom (0.5x–5x) / pan / pinch overlay with a 1x tilt effect.
src; alt; className?
Loading States
GSAP-driven shimmer placeholders (respect prefers-reduced-motion).
Skeleton
clientclassName?
CardSkeleton
clientPlaceholder matching the Card layout.
FeedSkeleton
clientStacked CardSkeletons used as a Suspense fallback.
count? = 5
Most recent
Content Blocks
Self-contained, prop-less sections with hardcoded résumé content.
AboutIntroText
clientIntro paragraph with a GSAP SplitText word-reveal on mount.
By day, I'm a Product Manager. The rest of time, I'm a UI/UX Designer & serial tinkerer.
ExperienceTimeline
clientExperience
UI Designer
Pegipegi
Produced UI/UX design for an online travel platform spanning accommodation, transportation, payments, a UGC platform, and the end-to-end booking process.
Digital Banking UI/UX Specialist
Jenius – SMBC Indonesia
Designed 5 major products from discovery to validation — Jenius' first fully online credit card, Paylater (BNPL), Flexi Cash, Business Account, and BisnisKit POS — validating usability with CX and design teams inside the Jenius Design System.
Digital Banking Product Owner
Jenius – SMBC Indonesia
Owned backlog and sprint delivery for core rails (QRIS, BI-FAST, Visa), growing BI-FAST transfer volume up to 5% and maintaining 100% regulatory compliance against Bank Indonesia requirements.
Product Manager
DOKU
Own the DOKU e-Wallet end to end, lifting NPS from +10 to +55 and cutting customer service workload by 50% through an insight-driven refinement program — Split Bill, a support chatbot, and a full UI/UX redesign.
Jun '23 – Present
CoreCompetencies
serverCore Competencies
Skills
- Vibe Coding
- Data Analysis & Validation
- Prototyping
- Product-led Growth
- UI/UX Design
- User Research
- Go-To-Market
- Product Roadmapping
- Product Prioritization
- Cross-Functional Leadership
- Agile & Scrum Methods
- Wireframe
- Usability Testing
- Collaboration
- KANO Method
- Workshop Facilitation
- HTML / CSS
- People Management
- Mentoring & Coaching
Tools
- Claude Code
- ChatGPT
- Figma
- Notion
- VSCode
- Metabase Dashboard
- Google Analytics
- ClickUp
- JIRA
- Adobe Illustrator
- DaVinci Resolve
- Prototyping
- Wireframe
- User Research
- Usability Testing
Language
- EnglishFluent
- Bahasa IndonesiaNative
Certifications
serverCertifications
Certified PSPO I
Scrum.org · 2025
Product-led Certification
Mind The Product · 2025
AI for Product Management
Mind The Product · 2025
Product Discovery Certification
Mind The Product · 2025
Product Management Basic Certification
Mind The Product · 2024
Generative AI Overview for Project Managers
Project Management Institute · 2024
Digital Product Management
University of Virginia Darden · 2024
Start the UX Design Process
Google · 2024
Foundations of User Experience
Google · 2024
Excellent Public Speaking & Impactful Presentation
TALKINC · 2020
Introduction of Business Management
King's College London · 2020
Digital Skills: User Experience
Accenture · 2020
Introduction to Blockchain Technologies
INSEAD · 2019
Bridging Gap between Strategy Design & Delivery
Brightline Initiative · 2019
Catalog & Navigation
Larger interactive components.
LogoCatalog
clientSearchable, filterable logo gallery (showing a sample slice of the real idn-finlogos data).
logos: LogoEntry[]; categories: CategoryEntry[]
Browse all logos
Indonesian fintech & finance logos, free to use.
Showing all 18 logos
InfiniteFeed
clientContinuous feed loader: an IntersectionObserver pulls the next page via the loadMorePosts Server Action as the sentinel nears the viewport, shows a shimmer placeholder, then appends cards below — so scroll position is preserved. Live on the homepage feed.
category; initialOffset; initialHasMore; pageSize
Scroll the homepage feed to the bottom to see it stream the next page in with a shimmer placeholder (no “load more” click).
Infrastructure
Providers, layout scaffold and full-screen layers. These are already active on this page or wrap the whole app, so they are documented rather than mounted a second time.
PageShell
serverThe scaffold wrapping THIS page — owns the centered max-w-[700px] column with side borders, the StickyHeader, the ScrollToTopButton and the Footer.
children; stickyHeaderContent?; stickyHeaderWatchId?; className?
StickyHeader
clientSlides in on scroll with SiteLogo + HeaderActions (scroll this page to see it). Custom content is passed via PageShell's stickyHeaderContent.
children?; watchElementId?
ScrollToTopButton
clientFloating bottom-right button that appears after ~300px of scroll — active on this page now. Uses native smooth scrolling.
ScrollSmootherProvider
clientWraps the app in app/layout.tsx and registers GSAP ScrollTrigger. Scrolling itself is native (CSS scroll-behavior), so #anchor links work normally.
Footer
serverAlready rendered at the bottom of this page by PageShell — never mount a second one.
AuroraBackground
clientFull-screen fixed aurora (Aceternity-derived CSS gradients, portaled to body, z-[-1]): configurable colors / blur / speed / opacity, respects prefers-reduced-motion. Not the site background — Home and About use a plain solid background — kept here as an available option, and never mounted on this page.
config?
InstagramEmbed
clientUsed internally by LinkEmbed for Instagram URLs — see the Instagram example in Cards & Embeds above.
postId