Shoe HUD Redesign

Topics: 3D Modeling, Product Design, HUD UI Design

Software + Platforms: Blender, Photoshop, Substance Painter

July 12, 2024

Future-Proofing HUD UI Design for Digital Fashion: Scaling for Growth and Anticipated Code-Driven Features

Overview

This project showcases the evolution of the heads-up display (HUD) user interface for a line of digital wearables highlighting the iterative design process and problem-solving approach. This case focuses on my first line supporting the adoption of PBR by Second Life. I needed to provide a new HUD UI that can be easily understood and adopted by my customers.

cinphul // shrn introductory gift advertisement (inspired by Sharon Apple from Macross Plus)

Participants

Respondents (HUD Survey): My customers who responded to a survey gathering feedback on my HUD usability.

Exobyte (Developer): Developed the lyteHUD Texture Change HUD system, the first with PBR transmission support on the platform.

Myself (Product/ UI Design): Reviewed customer responses from previous HUD survey, planned design after researching technical limitations.

Work in progress for // shrn [stilettos] shared in the cinphul Discord server. Viewport screenshot from Substance Painter.

Research

I revisited a HUD Survey I distributed to my customers back in November 2022 when consolidating feedback. Below are findings that contributed to my subsequent design choices.

Notable responses from the survey: HUD size

Notable responses from the survey: Diagrams vs Text

Notable responses from the survey: Expanded options

Challenges

i. Emissive Control Integration: Second Life's platform shift to gltf/PBR support necessitated the introduction of emissive control in the UI. I needed a new button that customers would understand without confusing it for tinting the diffuse texture.

ii. Space Optimization: The need to display more information within limited screen real estate.

iii. Future-Proofing the Design: Anticipating future feature additions within technical constraints of currently available 3rd party PBR HUD system.

Introductory video for the texture change HUD system under the hood of cinphul's new HUD UI: lyteHUD by Exobyte.

I initially wanted to design the HUD to be as compact as possible, with all texture buttons rotating in and out of sight in groups (leathers, metals, patterns etc.). To understand the limitations and possibilities of the existing codebase, I consulted with a HUD system developer.

While the Tinting and Glow menus could be individually rotated in and out of sight, there was no option to rotate multiple buttons as a group.

Flowchart indicating how different icons will rotate open a new sub-menu.

Initial sketch assuming all sub-menus could be rotated in and out of sight with accommodation if not.

The only customizable rotation was for the entire HUD itself, which proved problematic. This approach was more labor-intensive and not user-friendly, as rotating the entire HUD to either side would misalign the Tint and Glow panels, preventing them from facing the user correctly when needed.

Preliminary HUD mock-up. First shows buttons on rotatable cube and 2nd all primitives facing the front.

Back of HUD buttons in 2nd 3D mock-up, along with the tint HUD before it is flipped 180 degrees when in use.

A more advanced mock-up, testing transparency and positioning of material swatch buttons that cannot be rotated.

Implementation

i. Emissive Control Integration: Redesigned the HUD to incorporate emissive tinting icon alongside traditional tinting controls. Custom icons were created to clearly differentiate between these features, enhancing user understanding.

Custom icons for the new cinphul HUD template.

ii. Space Optimization:

a. Reduced button sizes to accommodate additional controls by retaining branding yet exploring symbols that are easily recognized by Second Life users new and veteran alike. Notably are the ink drop with contrasting liquid for diffuse tint and its adaptation for a separate emissive pass that is also tintable.

b. Took advantage of the show/hide functionality for tint and glow menus

c. Designed a flexible HUD base template that can expand or contract based on the number of textures in the selection menu until more show/ hide options are available.

The new HUD template shown with varying expansions to accommodate multiple areas of customization as needed.

iii. Future-Proofing the Design: Created a modular design that allows for easy addition of show/hide functionality for texture selection menus in future updates without the need to recreate UI icons. Once an update for rotation by group is implemented the material (leather, metal, glass) texture icons will open as new menus.

Result

The revised HUD UI successfully integrates new functionality while maintaining usability. The modular design allows for future expansions, demonstrating adaptability in UI design for evolving technical requirements.

Video demonstration of the new HUD and how it is used for texture change and tint control for both diffuse and emissive layers.

Summary

While the current design meets immediate needs, future updates are planned to implement show/hide functionality for texture selection menus, further enhancing the user experience by compacting the HUD and releasing more screen real estate.

This project exemplifies the balance between addressing immediate UI challenges and planning for future enhancements in the context of wearable technology interfaces.

Higher Foot Arch

Take My Money Already

Shoe HUD Design

Tower of Silence

Jumping into AR Fashion

↑Back to Top

Next