Back
Put hundreds utility into single precise interface
Timeline
August, 2023 - December 2023
5 months
Role
UI/UX Designer
Team
Vice president
Mentor
UI/UX Designer
Field
Atomic Design
Agile
Getting things settled out first
You can't love what you don't know
What is CMS?
CMS, short for Combat Management System, is the center of all systems on a warship. Acting as the "brain," this system integrates the ship's radar and sensors, weapons, and communications into a single platform.
Arrange previous work, design some feature too
Because CMS is a continuous project, My other UI/UX teammate and I arranged the previous design first. We were organizing components layout and size adjustments to the device’s screen ratio.
Some of the main things we did to organize existing features were tidying up the auto layout, creating components and variants, and implementing color variables. We also improved the component sizes, spacing, and padding for each feature.
Designing some feature
Furthermore, we designed some features by taking existing page references.
Device research
Getting know the device, our playing field
User Persona
Now who's our user?
Visual research
Provide eye comfort for users to work
We provide a navy theme color as the identity of the use of CMS. This can also give users the motivation to do their tasks.
Big change
Big change
New face, new motive
The CMS team decided to redesign the CMS to create a product with unique value that can only be found in a product.
There may be some features that still refer to references in terms of functionality and usability/accountability, but this redesign gives the team space to explore new ideas that are in line with the product's values.
Challenge
An environment we have never touched before
The biggest challenge in designing this apps is the limited user interaction capabilities.
We all know that the device used is different from others, using joysticks and buttons like a game. Meanwhile, the user is required to perform their work quickly, make the right decisions, and respond accurately.
Approach
Sidebar and tabs as main weapon
Features should be as simple as possible for users to use due to the risks they face. Therefore, the interaction cost of each feature is kept as minimal and efficient as possible.
Optimizing the use of empty space
This is done to provide more space for important information that can be accommodated by the interface.
Reduce scroll usage, use button instead
Due to the absence of a scroll wheel on handheld input (using tools such as game joysticks), we tried to reduce the use of scroll and replace it with buttons.
Result
All solutions are interconnected with each other
Essentially, all solutions and approaches are interconnected. The use of tabs, sidebars, buttons, and maximizing white space all lead to a single interface that allows for quick access to a bunch of information.
Ready to Hand offs
Prototyping for front-end and QA team
Our mentor give some feature to be included in the apps, and explain how the company want the user to process their job. The group of feature on the left are for homepage. Each of it are a jobs that technicians need to do.
Design system for everyone
This application is a large-scale and complex system. The design system was created to make it easier for us and developers to create the same components repeatedly. This design system also makes it easier for System Analysts to audit components to ensure they meet the specified requirements.
