Dynepic, Inc.

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.

Context

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.

The Challenge

How might we ensure a consistent design language across Dynepic’s diverse range of products?

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

The Solution

Assessing the Organization's Current State and Defining Its Future Direction

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.

Establishing the design foundations

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.

Before and After Comparison

Components

Defining patterns and scaling the design system

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

! Case study under construction !

Components

Defining patterns and scaling the design system

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