How I recreated the SpaceX dashboard interface
A few weeks ago from the space center. Kennedy launched the SpaceX Crew Dragon spacecraft to carry astronauts Robert L. Behnken and Douglas J. Hurley to the ISS. Much of this launch was revolutionary, but the interface of the astronaut s touchscreen suite caught my eye. So I decided to see if I could put them together based on the videos available.
Previously, control panels were a collection of buttons, switches and knobs, which is pretty far from what we saw in May.
Inspired by Andrew Goodlad and his work on the Tesla Model 3 controls, I decided I wanted to do the same for the Crew Dragon. First I had to collect as many photos and videos as possible from inside the ship. The problem was that most of the material was outdated and contained previous iterations of the interface. The final design of Crew Dragon was difficult to find or the images were too poor quality. Luckily, I found some really cool videos from Everyday Astronaut and Discovery to get started with.
The first section I put together was the button bar below the screens. The ship has 5 different panels: the first is the command panel; the second is the power panel; the third is a pyro panel; the fourth seems to have multiple input commands (frames with it were the hardest to find), and the last one is another command bar.
-20% with UXPUB promo code
When the panels were ready, I started working on the screens. The first thing I did was put together a global navigation menu. All screens have 5 navigation sections. My guess is that astronauts can navigate by clicking on each of the options. The sections are unsigned, so I had to put together a snapshot of the menu and a screenshot to recreate the entire screen.
After that, one of the simplest screens was the docking screen. I found this cool simulator from SpaceX where you can try to dock the Crew Dragon to the ISS. I played with it a couple of times (by the way, it was quite difficult) to understand how it works in real life. It was the only screen I was so lucky with. Although the design in the simulator differs slightly from the final design, it was helpful to define dimensions and ratios within the screen.
The next screen I put together is the cockpit audio settings screen. It was difficult to find good photos from the cockpit, so I used a still from the Everyday Astronaut video and using Photopea s magic I was able to isolate specific areas. Speakers are vector illustrations made in Figma.
After I was done with this screen, I put together a navigation view. It is a kind of toolbar, consisting of a side menu with various sections to simplify navigation, a top bar with real-time indicators, and a globe that displays trajectories in real time. At this point, I already had most of the styles defined, so I worked pretty quickly. To complete the first version, only a test screen remains to be done. This is an important point because the Crew Dragon tests are zero fault tolerance. This means that if something goes wrong in the script, the launch of the ship is canceled.
Final design
This is what the final design looks like. To top it off, I ve added some interactions so you can play around with the design and navigate some screens.
Here is the link to the prototype, try it and share your opinion! Right now, you can navigate between different sections using the tabs in the bottom left corner, and you can also navigate between different locations in the sound settings. There were practically no animations in the ship launch video, so they are all based on my assumptions. I plan to add more details in the coming days.
Also, here s a link to download a full size image of the final design.