Death Stranding: Director's Cut - Order Summary Screen Redesign

Here's my take on the Death Stranding: Director's Cut - Order Summary Screen.

Design Process

1. Exploration

Refers to a phase in the design process where you actively gather information, brainstorm ideas, and experiment with various solutions.

Pain Analysis

  1. CTAs should be clear and prominent to guide the player.

  2. Cluttered design elements.

  3. Inconsistent visual elements (such as icon and font sizing and placement.)

  4. Spheric and ghosting effect on design elements makes the overall UI hard to comprehend.

  5. Contrast Issues.

The Cure

  1. Prominent CTAs: The CTA button has been redesigned with a distinct color and a subtle glow effect to enhance its visibility and encourage user interaction.

  2. Maximized Screen Real Estate: The layout has been optimized to utilize the entire screen effectively, preventing a cramped or cluttered user experience.

  3. Button Placement Optimized: The placement of buttons has been adjusted for optimal usability.

  4. Simplified Aesthetic: Removed the spheric and ghosting effects to create a cleaner, less cluttered interface. Unnecessary design elements were also eliminated, maintaining a balance between minimalism and functionality.

2. Iteration

Refers to a cyclical process of continuously refining a design based on user feedback and testing.

Create > Test > Analyze > Refine > Repeat.

3. Finalization

Implementing Figma Component, applying Auto-Layout, and fine-tuning to make sure the overall design is consistent.

Tools and Resources

Design Tools

  • Figma

Figma Plugins

Figma Resources

Font

  • Kode Mono

  • IBM Plex Sans

Thank you!

More by Faiz Farhan Chalid

View profile