User Interface / User Experience

Co-op SU24

This product is a C-arm imaging application designed to assist surgeons with femur related trauma by providing a visual guide that compares reference and corrected x-ray images, enabling precise image capture and reducing radiation exposure and surgical time.

Technical

Sketching

Brainstorming and conceptualizing core features and layout.

Tools:
SketchBook

Wireframing

Creation of detailed wireframes to map out the user interface and workflow.

Tools:
Figma

Designing Assets

Developing realistic and interactive assets to enhance the visual appeal and functionality of the application interface.

Tools:
Unreal Engine 5
Maya

Mockups

Translating rough sketches into basic digital wireframes to visualize structure and flow using Figma.

Tools:
Figma

Prototyping

Developing interactive prototypes to test and refine the user experience.

Tools:
Figma

Feedback and Criticism

Incorporating feedback from peers to continually improve the design.

Process

BRAINSTORMING.

These sketches represent the initial brainstorming sessions where we explored different ways to present the reference and corrected images side by side. The goal was to make the comparison as intuitive and clear as possible for surgeons during high-pressure environments of a surgical procedure.

MAPPING.

A flowchart was used to represent various possible user interactions from launching into the setup screen to capturing and comparing results. The workflow was designed to minimize the steps required to achieve the desired outcomes, enhancing efficiency and usability for the surgeons.

CONCEPUTALIZING

During the conceptualization process, low fidelity mockups were created to outline key features such as the ConfirMap system, rotational and tilt movement sensors, and real-time guidance for optimal c-arm shots. These sketches helped us visualize how these features could be integrated into the user interface and workflow.

PROTOTYPING.

The high-fidelity mockups represented the latest stage of the design process before development. These detailed prototypes included the actual visual design elements, such as colors, typography, and detailed interactions. They provided a realistic representation of the final product, allowing for comprehensive usability testing and final adjustments.

The Product

The product is a C-arm imaging application designed to assist surgeons in femur surgeries by providing a visual guide that compares reference and corrected x-ray images, enabling precise image captures and reducing radiation exposure and surgical time. The ConfirMap system offers clear instructions to technicians, guiding them to take the most optimal c-arm shots using rotational and tilt movement sensors.

Conclusion

Working on this project was an enriching experience that significantly enhanced my skills as a UI/UX developer. I learned the importance of:

User-Centered Design: Continuously involving end-users in the design process to ensure the final product meets their needs.

Iterative Development: Embracing an iterative approach to design and development, allowing for continuous improvement based on real-world feedback.

Collaborative Teamwork: The value of collaborating closely with cross-functional teams, including developers and medical professionals, to create a product that truly makes a difference in the field of surgery.

User Interface / User Experience

Co-op SU24

Features

Mockups

Technical

Process

Wireframing

Mockups

Technical

Sketching

Wireframing

Designing Assets

Mockups

Prototyping

Feedback and Criticism

Process

BRAINSTORMING.

MAPPING.

CONCEPUTALIZING

PROTOTYPING.

My Role

The Product

Conclusion