Overview Designed and structured a high-fidelity mobile application from scratch for iOS and Android for the Hyundai Performance Institute, built to upskill corporate employees and dealership teams in the US market. The platform combines mandatory educational activities with direct performance incentives—completing learning modules unlocks certificates and boosts employee ratings, directly tying professional growth to financial compensation from Hyundai.

Home Dashboard & Activity Queue: Built a clear, priority-driven main screen split into "Today" (high-priority, urgent learning tasks) and "What's Next" (upcoming modules and structured growth paths) so users always know their immediate next steps.

Resource Library: Designed a centralized hub housing all learning materials with advanced filtering and sorting options, including multi-format media such as training videos, audio guides, and downloadable PDFs.

Internal Chat: Integrated a communication space for support inquiries and cross-team discussions within the Hyundai network.

Profile & Settings: Clean management space for personal preferences, push notifications, and quick issue reporting (report a problem).

The project was structured as a custom white-label implementation built on top of the parent platform by Ander (an American software provider specializing in automotive educational ecosystems) for their client Hyundai. To ensure scalability and clean adaptation, the entire design infrastructure was built from the ground up:

Atomic Design Methodology: The component library was structured using Atomic Design principles. Atoms served as the basic building blocks (such as buttons, inputs, icons, and typography tokens), while molecules combined those atoms into functional, reusable UI groups (like search bars, list items, and card modules).

Dynamic Color Tokens: Configured advanced color variables utilizing the proprietary Hyundai Sans typeface, enabling the application to seamlessly switch themes and branding between Ander and Hyundai specifications while maintaining layout integrity.

Jira-Aligned Iterative Structure: Organized the Figma workspace using an iterative approach mapped directly to product management workflows. Each Figma page represented a core functional Epic from Jira, while individual sections inside those pages mapped out separate User Stories. This structure allowed stakeholders to clearly track product iterations, review design evolution, and compare "before and after" states at every milestone.

User Case 1: Quick Tiles Designed a stack of interactive swipe cards enabling users to rapidly complete bite-sized micro-tasks or consume weekly inspiration on the go without friction.

User Case 2: News Feed Structured a dedicated company news feed to keep employees aligned with brand updates, product rollouts, and announcements directly on the home screen.

User Case 3: First-Time User Experience (FTUE Guided Tour) Designed a seamless onboarding guided tour utilizing interactive tooltips. This onboarding flow walks first-time users through the core interface and primary app functionality, ensuring employees immediately understand how to navigate the dashboard, access priority tasks, and track their learning progress without confusion.