A curated collection of UI/UX, product design, VR simulation, and educational game work — spanning internship client projects, campus research, and personal explorations.
Every element earns its place. If removing it doesn't break the experience, it probably shouldn't be there.
The interface should step back so the content leads. Decoration that competes with content is decoration that fails.
First versions reveal the real problem. I design to be wrong early, so I can be right by the time it ships.
A VR interface for nurses and a game UI for 7-year-olds need completely different visual grammars. Context shapes everything.
Contrast ratios, touch target sizing, and legibility at distance aren't extras. They're what makes design work for everyone.
Good components build good products. I design reusable, consistent elements before I design screens.
A situational language learning app for tourists navigating Indonesia — built around six real travel scenarios, tested with actual foreign learners, and iterated until it worked.
First-time users were abandoning sessions in under two minutes because the interface presented too many parallel choices at once. We restructured around a linear scenario-first flow and removed the feature grid entirely. The feedback system was redesigned to teach users, not judge them.
Research → Structure → Test → Iterate
We started by sourcing language material from official Indonesian government tourism references to ensure accuracy in vocabulary and context. The six travel scenarios (airport, restaurant, shopping, hotel, transport, hospital) were chosen based on the moments where tourists feel most lost.
Once structure was defined, we ran usability testing with real foreign users to surface friction: confusing AI responses, translation delays, and unclear quiz feedback. Users were asked to keep exploring and actively break the app. Every bug fed directly into the next iteration cycle.
The three difficulty levels (short phrase → moderate → detailed) were shaped entirely by what real testers found overwhelming versus manageable on first use.
A precise responsive recreation of 3 live website pages across desktop and mobile — built to sharpen UI execution accuracy, not to reimagine the design.
The original has no design documentation—every spacing decision must be reverse-engineered by eye. This forces precision that original design doesn't require. Mobile adaptation wasn't simple scaling; some sections needed rethinking while preserving visual language.
Observe → Deconstruct → Rebuild → Validate
This was my first internship project — a deliberate exercise in precision over creativity. I started by studying the original site's visual rhythm: how spacing scales, how the grid holds at different breakpoints, and how interactive states behave.
The core skill developed here was Auto Layout mastery — building responsive components with consistent padding, margin, and spacing tokens so that desktop-to-mobile wasn't a manual rework but a structural adaptation. Carousel components added interaction complexity on top of layout accuracy.
Working without source files forces you to reverse-engineer design decisions, which teaches you to see why things are built the way they are — not just how they look.
A website page recreation with active UI refinements — learning to balance reference accuracy with thoughtful design improvements based on mentor guidance.
Initial recreation was accurate but static. Mentor feedback revealed CTAs weren't compelling enough to drive engagement. Challenge was improving visual emphasis without departing from the original design language. For mobile, adapting a desktop layout without losing premium feel required redistributing content across full-width sections.
Recreate → Evaluate → Refine → Iterate
Like the AVAX project but with an active design mandate layered on top. After the initial recreation, I received feedback that the CTAs weren't compelling enough — they looked correct but didn't create visual urgency.
The challenge was improving the design without breaking the original visual language. For mobile, I rethought section layouts entirely — shifting from cramped half-width compositions to full-width blocks that feel intentional and breathable on small screens.
This project was iterative by design: each feedback round was a new constraint to work within. The result felt like a natural evolution of the original, not a departure from it.
An original metaverse game concept built from scratch — from gameplay systems and quest mechanics to HUD design and a full promotional video.
Game UI has a unique constraint: the interface must remain available without demanding attention over the 3D environment. Initial HUD designs occupied too much screen space and felt oppressive in context. The distinction between "present vs available" — does the player need this now, or can they look for it? — shaped every layout decision.
Concept → World-Build → System Design → UI → Promote
I was given creative freedom to choose the theme — and chose a cat village world with a cozy low-poly aesthetic. The process worked like real game development: define the world logic before designing the interface.
The gameplay follows a quest structure: complete story missions, explore interactive spots, and join timed events like harvest challenges and scooter races. Each mechanic needed a corresponding UI state — so I designed the HUD to surface only what the player needs at that exact moment, nothing more.
Key challenge: tutorials that feel like part of the world, not interruptions to it. The promotional video (After Effects) was edited to communicate the full experience to people who'd never played — a completely different communication challenge.
A VR museum experience where the interface was designed to disappear — clean, minimal, and built around one constraint: never compete with the art.
Visual competition between UI and artwork. High-opacity panels that looked clean in mockups created eye fatigue in VR. Reducing opacity and anchoring panels away from the field of view's center solved fatigue while keeping controls accessible — VR design requires testing in context.
Research Style → Design to Disappear → Refine in Context
The brief was clear: a virtual museum tour guide. The constraint that shaped everything: the interface must never compete with the art itself.
I researched visual styles appropriate to a modern museum — landing on glassmorphism as the direction that feels both contemporary and visually quiet. Frosted panels sit in the virtual space without demanding attention.
The guide selection feature gives visitors a sense of agency and personality within the experience. Navigation cues were sized for VR reading distances — a different visual constraint than standard screen design. The more you engage with the art, the less you notice the interface.
A client-commissioned VR training simulation teaching nurses correct PPE procedures in high-risk isolation environments — built from real medical protocol research with real-time scoring and feedback.
Instructional VR requires immediate clarity — users execute procedural tasks sequentially where skipping steps has training consequences. Early feedback only showed pass/fail; trainees didn't know what they did wrong. Redesigned feedback names the error, shows correct protocol, and allows retry — turning judgment into teaching. Fixed lower-third text anchoring with high-contrast backgrounds kept instructions readable without blocking procedural space.
Protocol Research → Flow Mapping → Interaction Design → Test → Refine
Starting point was documentation — not wireframes. I researched proper PPE donning and doffing protocol from multiple official sources to build an accurate procedural base. You cannot design the training without deeply understanding the training itself.
The key VR-specific challenge: first-person perspective means the user cannot see their own body the way they would in reality. We solved this with an in-world mirror mechanic — letting trainees see their own avatar performing each step, mirroring how the procedure is checked in real clinical environments.
Each step required explicit visual feedback — not just pass/fail, but what went wrong and how to correct it. The scoring system was designed to teach, not only evaluate. All flows were reviewed through multiple supervisor cycles before delivery to the paying client.
A branching educational story game for children aged 7–11 — designed with a chalk-inspired cartoon visual language where the style itself does emotional work.
Children 7–11 are still developing reading fluency; visual language must carry more communicative weight than for adults. The chalk style signals emotional register (playful, approachable, non-threatening) critical for safety scenarios. Button labels that seemed clear to adult reviewers were ambiguous to children — multiple revision rounds tightened action labels to name exactly what would happen next.
Audience Research → Style Development → Story Mapping → Iterate
The audience — children aged 7–11 — shaped every decision before a single screen was designed. At this age, visual style carries meaning: colors, character design, and layout communicate emotional register before any text is read.
The chalk-inspired cartoon style was chosen because it signals safety, play, and approachability — essential for scenarios involving real-world danger like trespassing. The branching story was mapped as a logic tree first, then translated into screens.
Continuous client feedback pushed the interface toward something more like an interactive storybook — which is exactly where the notebook theme came from. Each revision tightened interaction clarity until an 8-year-old could predict exactly what would happen before tapping a button.
A digital board game interface for scam awareness education — designed across two completely different visual directions based on evolving client requests.
Primary challenge was scope management — client requested full style pivot mid-project. Working across opposite visual directions sharpened understanding of style vs. structure. Navigation logic, information hierarchy, and interaction patterns stayed consistent; only visual language changed — critical when clients know aesthetics but are less certain about function.
Brief → Dual-Direction Exploration → Client Feedback → Pivot → Deliver
The client wanted two visual directions in parallel: a clean modern UI and a stylized cartoonish board game aesthetic — two full visual systems designed simultaneously, not just color variants.
For the cartoonist direction I drew reference from Tintin's visual language: bold outlines, flat fills, exaggerated character proportions. I also used AI-generated references to explore style boundaries quickly before committing. Monopoly's game mechanics served as the educational foundation — players move through a board encountering scam scenarios and choose how to respond.
The key learning: visual style and UX structure are separable. Navigation logic, game state hierarchy, and information flow stayed consistent across both directions — only the visual grammar changed.
KampusTalk: A student community platform where collaborative ideation transformed concept into user flows and structured product design. SemproGlow: A live deployed service website for thesis and presentation banner design — available at semproglow.netlify.app.
KampusTalk: Basic concept needed structure — mapped core use cases and introduced category filtering for discoverability; badge mechanics motivated participation. SemproGlow: Position custom design service against template-based competitors. Website needed to emphasize quality and turnaround without overwhelming student visitors with jargon — simplified copy and portfolio focus made value clear.
KampusTalk: Research → Architecture → UI → Collaborate
SemproGlow: Brief → Design → Deploy → Maintain
KampusTalk was built to solve a specific gap: Moodle is too formal for casual academic community-building. We designed a forum-social hybrid with four content filters (By You, Following, Recent, Popular) so students can navigate discussions without information overload. Badge mechanics incentivize active participation without making it feel like a chore. Built with a team of two — responsibilities shared across research, flow design, and UI.
SemproGlow was a full-cycle product: brief, design, content, deployment, and live maintenance. A 4-person team built a service website offering custom thesis banner design, communicating quality and speed to students already under deadline pressure. Live at semproglow.netlify.app.
An innovative AR application that brings musical learning to life — transforming physical books into interactive 3D instrument experiences for children.
AR interaction for children differs from traditional app design — real-world camera input replaces static backdrop. Children may struggle with subtle cues. Challenge was creating obvious affordances without overcomplicating interface. Large, colourful touch targets and clear audio feedback guided interaction; UI placement adapted for tracking stability across varying lighting conditions.
Onboard → Learn the System → Design UI → Collaborate Across Disciplines
This was my first month of internship — and my first project involving AR and cross-discipline collaboration across design, development, and 3D teams. The app lets children scan QR or marker codes to trigger 3D instrument visualizations they can interact with in real space.
UI had to work in AR: overlaid on a live camera feed, competing with real-world visual noise. I focused on large, high-contrast touch targets, bold color choices readable against varying backgrounds, and clear feedback loops so children know something happened when they tap.
The vibrant color system followed UI design principles for children's edtech — color contrast ratios, button sizing, and interaction feedback were non-negotiable constraints. This project taught me to design for conditions I cannot fully control: real environments are always messier than mockups.
Institutional and community visual design at scale — from university event campaigns to weekly gaming community assets reaching 200,000+ players.
Designing for 200,000-member community spans languages, time zones, cultures, and engagement levels — a banner for competitive players may not resonate with casual ones. Campaign ideation required understanding audience segments first. Volume constraint (2–4 weekly) necessitated developing repeatable visual system over one-off designs. Consistency across formats (Facebook, Discord, forum, in-game) with different dimensions and contexts required execution discipline.
Brief → Gather Requirements → Design to Standard → Deliver
Every banner starts with a clear brief: event name, date, location, contact, visual tone, and any branding requirements from the organizer or client. For institutional work (UNAI events, alumni activities, sports competitions), branding guidelines and provided photography anchored the design — my role was to compose and elevate, not reinvent.
For the gaming community (ONEMT — King's Choice, 200,000+ members), the brief included campaign goals and character assets. Understanding audience segments mattered: competitive players respond differently to visual urgency than casual players respond to warmth and celebration.
Volume — 2 to 4 banners per week — required building repeatable visual systems rather than designing each piece from scratch. Platform adaptation across Facebook, Discord, forums, and in-game channels meant the same campaign needed to feel consistent across very different dimensions and contexts.
Promotional showcase video for the Paw-radise: Island Life metaverse game concept, produced during internship at FXMedia. The reel highlights key gameplay features — the cozy island world, reward mechanics, character interactions, and UI flows.
A cinematic game trailer for Crown to Ashes, a dark action-RPG concept produced during internship at FXMedia. The visual direction draws from the epic grandeur of Assassin's Creed, the mythic brutality of The Witcher, and the tragic soul of Legacy of Kain.
Betrayed, ruined, and forced to execute his closest friend, Elion Darros falls into darkness. Years later, he stumbles upon a forbidden relic beneath the ruins of his old estate — ancient time-warping technology. Faced with the chance to return to the day of his betrayal: revenge or redemption.
A collection of AI-generated assets, motion loops, and media used to fast-track research and generate raw references for my design projects. For ideation and research, I leverage Google NotebookLM, ChatGPT, and Gemini. Visual source elements are generated via Midjourney and Leonardo AI, while motion, video, and audio assets are developed using Kling, Highshield, and Eleven Labs. AI accelerates the initial exploration phase, while all final composition and creative execution remain entirely my own.
Browse the full folder of AI-generated images, videos, and creative experiments, including works in progress and style explorations not shown in the main portfolio.
