Game Design & Web Design

Long Story Studios: UNIT 108

Adam Syed
4 min readMar 28, 2020
Long Story Studios: UNIT 108

Role

Made high fidelity prototypes for the interactive screen menus for their latest 2D action game, UNIT 108. Designed and developed the company’s main website from scratch.

Context

Long Story Studios, LS Studios for short, is a indie game development company made up of college students who span across all of California. The company was established in 2018 and is growing very rapidly with its diverse collection of games. LS Studios is currently working on UNIT 108, their most anticipated game yet, to be released in the upcoming months.

LS Studios recruited me as a UX Engineer to design and develop the company’s website. It was a crucial time of recruitment because the company was planning to launch a Kickstarter campaign that would feature the website along with the progress that has been made towards UNIT 108.

Web Development

Before designing the website, I researched a variety of video game company websites such as Epic Games, Behavior Interactive, and Playstation; I wanted to know how these big corporations have designed their websites so I could replicate their practices. After gaining countless inspirations, I wanted to design the LS Studios website with a dark theme so that the games were showcased with a contrasting effect especially with its elaborate visuals.

Landing Page
Game Page, Team Page, Merch Page

Game Design: UNIT 108

As a UX Engineer in the company, I had the opportunity to beta test the new game UNIT 108. When I beta-tested the game, there was only one level completed and it was amazing. However, my experience was disjoint. It was difficult to feel immersed with the game because of its bland design style and inconsistent visual structure.

I took the role of UX Designer and worked on prototyping a new Title Screen, Main Menu, Shop Menu, and Level Selection Screen.

Current UI for the non in-game screens were too simple that it lacked the experience of being immersed within the gameplay. Initially, the pause menu was only a modal screen with the gameplay semi-visible in the background. I wanted the user to feel that he or she was at a complete resting state whenever the user paused the game. I imagined the resting state to be the position where the user can unwind from the frantic battles the UNIT 108 gameplay offers and this is achieved with a sliding animation of a fullscreen pause menu.

Side by side comparison of the screens. Left (previous), Right (updated).

When designing both menus, I wanted to preserve the visual consistency of the top headings so that the user can immediately identify that when it sees the heading that he or she is certain that the game is paused and can purchase items at ease.

Shop Menu and Level Select Menu I Designed

We are working really hard and cannot wait to release our game this Summer, but we want you to check it out and play the demo first. Our game supports Mac and Windows users so there is no reason to not try it out.

Shop Menu with Button States
Level Select Menu with Map Title Overlay
Level Select Menu

Unit 108 Trailer

--

--