I played a key role in shaping the design direction for Dynepic's flagship product, MOTAR, the premier training hub for the US Air Force. I designed a comprehensive design system for a SaaS platform serving both B2B and B2C markets in the training sector. I led creative direction for XR projects such as MOTAR 3D and Holodeck, driving the process from research to production to deliver cutting-edge solutions across Web and XR platforms.
Role: Lead UI Designer & UX Designer
Duration: April 2024 - Present
Target Audience: United States military: Air Force, Army, Navy, Marine Corps, Space Force, DoD Agencies.
Dynepic, Inc. is a tech company focused on building secure, connected ecosystems for training and education. They develop platforms and tools to enhance digital learning and collaboration, particularly for industries requiring advanced, agnostic training solutions like defense. Their flagship product, MOTAR, serves as the US Air Force's premier training hub, integrating resources and data to streamline training processes.
Dynepic, MOTAR, and MOTAR 3D were rebranding and needed a new Figma-based design system to unify their design across all products. By creating a centralized system in Figma, teams could collaborate more easily, with consistent updates applied across projects. Regular design reviews, clear documentation, and close coordination between design, development, and product teams would keep everything aligned. Feedback from stakeholders would also ensure the design stays cohesive while adapting to new needs
During my audit, I discovered that the previous design team had already made progress in UI and had early explorations for a design system. Using these base styles, I established a solid visual design direction.
I then shifted our focus to transforming these styles into a scalable design language that could work seamlessly across multiple platforms and devices. This approach allowed us to offer tailored looks and experiences for Dynepic's various audiences and user types.
The first step in creating our platform-agnostic design language was to translate the branding decisions into a visual style framework using design tokens. We began by establishing a set of color primitives based on the new brand palette, expanding each color to include lighter and darker shades for various interaction states and use cases in digital interfaces. Once the color primitives were set, we created semantic palettes for specific purposes like foreground, background, borders, and more. From there, we defined the remaining design tokens, including grids, sizing, spacing, shadows, borders, and radius.
The next part of the design system focused on creating reusable components. I designed various components and their variants for commonly used design elements, including buttons, badges, notifications, accordions, forms, cards, Header navigation, modals, tooltips, user lockups, menus, tabs, tables, paginations, state manager, progress steps, and footers, etc
The next part of the design system focused on creating reusable components. I designed various components and their variants for commonly used design elements, including buttons, badges, notifications, accordions, forms, cards, Header navigation, modals, tooltips, user lockups, menus, tabs, tables, paginations, state manager, progress steps, and footers, etc