Ansys project image
Ansys project image

Ansys HUD System Revamp

Ansys HUD System Revamp

@Ansys

Client:

Synopsis

Synopsys

Deliverables:

User Research, UXUI

Year:

2025

01 CONTEXT
01 CONTEXT
  1. About Ansys

Ansys is a 3D physics-based engineering simulation tool (180K+ users) that enables engineers to virtually design, test, and optimise products before physical prototyping.

B. HUD System

B. HUD System

HUD (Head-Up Display) is a contextual toolbar that provides quick access to relevant controls directly within the 3D workspace.

02 CHALLENGES
02 CHALLENGES
  1. Poor Usability

  1. Poor Usability

HUD was the most called-out system during the usability testing and was marked as the highest-priority choice for improvement by participants.

B. What makes it hard to use?

The current HUD appears unpredictably, uses text-heavy instructions, and obstructs interaction with the model according to our survey responses.

03 dESIGN METHODOLOGIES
03 dESIGN METHODOLOGIES
  1. Explore hUD layouts

  1. Explore hUD layouts

We explored a top dock, a sidebar, and a radial layout. The top dock offered the best balance of usability and visual appeal.

B. Think in systems

B. Think in systems

I audited and grouped all HUD components to identify shared patterns and opportunities.

C. Innovate from Atomic Level

C. Innovate from Atomic Level

We redesigned the HUD from the atomic component level and docked it at the top to ensure a consistent layout without obstructing user interactions.

D. Design intuitive icons to replace texts

D. Design intuitive icons to replace texts

I replaced lengthy text with intuitive icons, making the HUD system easier to understand and learn.

Before (V1.0)

After (V2.0)

04 INTERACTION DETAILS
04 INTERACTION DETAILS

A. Hover State 🟡

For hover previews, I used a bright yellow outline to clearly indicate the preview state.

B. Selected State 🟠

For the selected state, I used a translucent orange fill and applied the same highlight to the newly created item in the tree.

For the selected state, I used a translucent orange fill and applied the same highlight to the newly created item in the tree.

C. Partial Prototype

C. Partial Prototype

This prototype demonstrates the Plane HUD component. Please reach out me for more details and demos of other components.

This prototype demonstrates the Plane HUD component. Please reach out me for more details and demos of other components.