UX CASE STUDY
STAR TREK SETTINGS MENU
Overview
The project here is a high-fidelity design based on an initial sketch (see image below), with a sci-fi theme. Two power icons were to be designed in addition, Haste and Heal, at two different sizes, 32px x 32px and 128px x128px. However, upon completion I wanted to push my limits a bit and challenge myself, and the project started to evolve a bit more overall.
Star Trek: Strange New Worlds series debuted in May 2022, made it to my watchlist, and instantly fell in love with it as their stories started to unfold. What if this brand-new series was turned into a shiny new game? There was an itch to scratch, and I had personal goals that I wanted to attain. This was a perfect opportunity and challenge for me to tackle, learn, and iterate. I took note of their use of line work, transparency, colors, glow, and animation as well. To make it a bit more visually interesting, I wanted to incorporate design elements that would surround the area that would be animated as well. Keeping these in mind, I wanted to deliver a clean and modern look that was clutter-free as well as to not take away the main focal point of the user - to make adjustments and configurations.
Documentation
My entire process is documented in a PDF file, where I discuss the initial tasks, my personal challenge and agenda, thoughts, and design breakdown of all UI elements - ranging from buttons anatomy and states, dropdown menus, icons, research, and more.
Click below to see the entire 32-page process.
Prototype
The next step was to see how the screen would interact in a live state, where a user can swap between tabs and make adjustments. But, I also wanted to sell the idea that the screen was constantly loading and making calculations in the background, possibly giving it an impression that it was "breathing", if you will. I was able to achieve all this using FIGMA's prototyping and creating components and variants.
Clickable prototypes and animations are found here:
*For best viewing, please set prototype at full screen. Press R or refresh your browser if prototype doesn't work.
​
Also, be sure to view the link found in the Documentation section for the full breakdown of the entire design.