WILL Elements
Workplace training has a reputation for being dull, and honestly, it has earned it. WILL Interactive built WILL Elements with the belief that it does not have to be that way. The collection is a library of short, targeted training videos designed to help organizations quickly upskill employees on essential workplace topics including cybersecurity, inclusion, harassment prevention, and professional behavior. Unlike full course offerings, these modules are brief and flexible, allowing employers to assign specific lessons without committing to a complete program.
I led the UX and UI design for the collection, focusing on building a clean, engaging interface that supports fast, focused learning. Working closely with writers, developers, and instructional designers, I helped shape an experience that goes beyond passive watching. We wove in interactive moments throughout each module, including reorder exercises, card flips, and matching interactions, to keep learners actively participating.
Visually, the goal was to break away from the bland aesthetic typical of workplace training. I brought in thoughtful color palettes, dynamic screen layouts, carefully chosen imagery, and data visualizations to reinforce key ideas and make each module feel polished and genuinely worth paying attention to.
Interface Design
Good training starts with good design. These Figma screens reflect the visual thinking behind WILL Elements, from color and typography to layout and interaction. Every choice was made with one goal in mind: making the experience feel like something worth showing up for.
Mobile View
WILL Elements was adapted for mobile to ensure learners could complete their training seamlessly on any device. Translating the desktop experience to a smaller screen required thoughtful adjustments to make sure nothing felt cramped or lost in the process.
One of the more interesting challenges was the splash screen animation. On desktop, the full animation plays out across a generous amount of space, but on mobile the composition became too small to read clearly. Rather than scaling everything down and losing the impact, I redesigned the mobile version to show a zoomed in view featuring two molecules instead of three, preserving the motion and visual interest of the animation while making it feel intentional and polished at a smaller size.
Episode Posters
Each episode in the WILL Elements series needed its own visual identity, but the collection as a whole needed to feel like it belonged together. I designed a series of posters with a unified visual language, using consistent layout, color treatment, and graphic elements to build a cohesive look across the series while still letting each poster reflect the theme of its individual episode.
To extend their usefulness, I produced both landscape and portrait versions of every poster, making them adaptable across different formats and display contexts.
Light & Dark Mode
The interface was designed in both light and dark modes to explore how the visual experience could adapt across different viewing preferences and environments. Exploring both options allowed us to see how color, contrast, and overall tone shifted between modes while keeping the design feeling cohesive and intentional in either version.
Logo Iterations
Developing the WILL Elements logo involved more exploration than you might expect. Early decisions included whether to incorporate the existing WILL logo into the WILL Elements mark, which molecular graphic to use as a visual element, and where to position it within the overall composition.
One layer of research that was especially important was making sure the molecule we landed on did not unknowingly represent a real chemical compound. For molecule 3 we intentionally explored a real one, specifically the chemical the brain produces during learning, as a thematic nod to the subject matter. While that connection felt meaningful, the molecule itself was not visually compelling enough to carry the mark, so we moved in a different direction.
The iterations shown here capture that process of narrowing down the options to find a logo that felt both visually strong and intentional.
Final Logo
After working through the iterations, I landed on a logo without the WILL mark incorporated. Keeping them separate created a cleaner, less cluttered result that let the Elements logo stand on its own visually.
For the molecule, option 2 was the clear choice. Option 1 was too close to an existing company's logo, and option 3, while meaningful, was not visually strong enough to anchor the mark. Option 2 hit the right balance, it did not represent any real compound, and its uniform, symmetrical structure gave the logo a sense of stability and polish that felt right for the brand.
Splash Screen Animation
On the splash screen, a looping animation in the top right corner sets the tone before the learner even begins. I conceptualized the motion sequence, in which character screenshots from throughout the training transition through molecules shaped masks, creating a subtle visual connection between the people in the program and the Elements brand identity.
The animation was brought to life by the development team, adding a layer of motion and polish to what could have otherwise been a static entry point.