The most fun way to learn about business and tech: The AFS Starfield
An immersive and engaging experience... for the very limited amount of people who were allowed to see it.
The AFS Starfield is a 3D, interactive experience that offers an engaging and memorable way to view different technologies that support various contracts: with glowing stars and interconnected constellations.
SUMMARY
As the lead interaction designer on this project, I led the creative strategy and experience design that re-imagined how different technologies and contracts were connected across the organization. Our goal was to go beyond static documentation and build an experience that would allow internal stakeholders to explore and understand complex relationships in a way that was intuitive, engaging, and memorable.
CHALLENGE
But of course, that’s not how things started. Believe it or not, the original concept that got sold and approved by the account team was a musical one, and it was one of the most unconventional ideas I have ever pushed.
We had two layers of content that made up the site: technologies and contracts. A set amount of different technologies all worked together in different ways to create various programs that were employed across the platform. Inspired by my background in music and technology - I saw this relationship as musical notes that worked together to create a chord. That was the concept that we sold and started working on: Harmony.
In my head, the interaction would resemble some kind of midi trigger pad like this:
IDEATION
We worked in close collaboration with the Rapid Prototyping team at AFS and they felt very strongly that we should build this site using Three.JS - which would give us the ability to create a kind of 3d immerse experience and break the mold of a traditional page.
So, the musical grid turned into nodes, and it took no time at all to realize that the whole thing looked like stars.
The following week of work gave way to the most exciting phase of the design process... the “what if...” phase. What if the stars all connected to form a constellation of contracts? What if the point of view moved around as users clicked through pages, what if, what if, what if....
This is what a pivot looks like.
Eventually the music / notes / chords aspect got axed from leadership because they thought it would crash government issued laptops. Not kidding.
Behind the creative concept was a deeply strategic design process. I worked closely with engineers and technical SMEs to ensure the connections being visualized were accurate and purposeful. I also conducted informal user testing with internal teams to refine motion, optimize discoverability, and make sure the experience was both intuitive and optimized.
The user experience was designed to feel intuitive, immersive, and exploratory. Every interaction reinforced the metaphor of inter-connectivity and harmony, without sacrificing clarity or usability.
APPROACH
1. Splash Screen
Upon launching the site, users were greeted by a minimalist title screen that faded into the 3D starfield.
2. Enter the Starfield
From here, they were placed into a free-float perspective with a sidebar along the right side of the screen which explained navigation controls and allowed users to search for specific entries.
3. Zooming In
Moving the mouse slightly adjusted the camera angle, clicking and dragging greatly adjusted the camera position along an x and y axis. Zooming with a scroll wheel adjusted the z axis.
4. Up close and personal
If users got close enough they would trigger a proximity effect, where a tooltip with the technology name would appear. If users hovered over individual stars then it would increase in brightness and size slightly, suggesting interactivity.
5. Clicking on a star
Clicking on a star would trigger an animation where the camera would zoom out and lines would appear, connecting multiple stars together. This constellation represented a program (contract) that AFS had their client and the technologies employed in that specific contract. Once the constellation was totally connected and centered in the camera, the sidebar would pop out from the right side of the screen with more information on that specific contract. From here users could click through other programs that shared technology or click through collapsible accordions that explained the tech in more detail.
The final product became more than just a tool. It became a conversation piece. It challenged internal teams to think differently about the work they do and how interconnected their efforts really are. For leadership, it served as a powerful storytelling artifact; for teams, it became a new lens through which to see the bigger picture.This project reinforced my belief that interaction design isn't just about usability, it's about creating moments that resonate. By blending visual design, interactivity, sound, and story, we created something that not only communicated complexity, but celebrated it.
RESULTS
The most fun way to learn about tech and business
An immersive and engaging experience... for the very limited amount of people who were allowed to see it.
summary
The AFS Starfield is a 3D, interactive experience that offers an engaging and memorable way to view different technologies that support various contracts: with glowing stars and interconnected constellations.
challenge
As the lead interaction designer on this project, I led the creative strategy and experience design that re-imagined how different technologies and contracts were connected across the organization. Our goal was to go beyond static documentation and build an experience that would allow internal stakeholders to explore and understand complex relationships in a way that was intuitive, engaging, and memorable.
ideation
But of course, that’s not how things started. Believe it or not, the original concept that got sold and approved by the account team was a musical one, and it was one of the most unconventional ideas I have ever pushed.
We had two layers of content that made up the site: technologies and contracts. A set amount of different technologies all worked together in different ways to create various programs that were employed across the platform. Inspired by my background in music and technology - I saw this relationship as musical notes that worked together to create a chord. That was the concept that we sold and started working on: Harmony.
In my head, the interaction would resemble some kind of midi trigger pad like this:
We worked in close collaboration with the Rapid Prototyping team at AFS and they felt very strongly that we should build this site using Three.JS - which would give us the ability to create a kind of 3d immerse experience and break the mold of a traditional page.
So, the musical grid turned into nodes, and it took no time at all to realize that the whole thing looked like stars.
The following week of work gave way to the most exciting phase of the design process... the “what if...” phase. What if the stars all connected to form a constellation of contracts? What if the point of view moved around as users clicked through pages, what if, what if, what if....
This is what a pivot looks like.
Eventually the music / notes / chords aspect got axed from leadership because they thought it would crash government issued laptops. Not kidding.
approach
Behind the creative concept was a deeply strategic design process. I worked closely with engineers and technical SMEs to ensure the connections being visualized were accurate and purposeful. I also conducted informal user testing with internal teams to refine motion, optimize discoverability, and make sure the experience was both intuitive and optimized.
The user experience was designed to feel intuitive, immersive, and exploratory. Every interaction reinforced the metaphor of inter-connectivity and harmony, without sacrificing clarity or usability.
1. Splash Screen / Loading Screen
Upon launching the site, users were greeted by a minimalist title screen that faded into the 3D starfield.
2. Enter the Starfield
From here, they were placed into a free-float perspective with a sidebar along the right side of the screen which explained navigation controls and allowed users to search for specific entries.
3. Zooming In
Moving the mouse slightly adjusted the camera angle, clicking and dragging greatly adjusted the camera position along an x and y axis. Zooming with a scroll wheel adjusted the z axis.
4. Up close and personal
If users got close enough they would trigger a proximity effect, where a tooltip with the technology name would appear. If users hovered over individual stars then it would increase in brightness and size slightly, suggesting interactivity.
5. Clicking on a star
Clicking on a star would trigger an animation where the camera would zoom out and lines would appear, connecting multiple stars together. This constellation represented a program (contract) that AFS had their client and the technologies employed in that specific contract.
6. Enhance!
Once the constellation was totally connected and centered in the camera, the sidebar would pop out from the right side of the screen with more information on that specific contract. From here users could click through other programs that shared technology or click through collapsible accordions that explained the tech in more detail.
results
The final product became more than just a tool. It became a conversation piece. It challenged internal teams to think differently about the work they do and how interconnected their efforts really are. For leadership, it served as a powerful storytelling artifact; for teams, it became a new lens through which to see the bigger picture.
This project reinforced my belief that interaction design isn't just about usability, it's about creating moments that resonate. By blending visual design, interactivity, sound, and story, we created something that not only communicated complexity, but celebrated it.