Website & Widget UI/UX Design
Confiance Medical
Tasked with transforming Confiance Medical’s digital presence after two failed agency attempts, I designed their new corporate website to generate qualified leads while showcasing their mission of reducing surgical scars through video surgery. To achieve this, I introduced innovative features such as the “Assemble Your System” widget, which lets users build custom video surgery systems, and the “Scar-o-meter”, a dynamic tool that communicates the brand’s vision in a tangible way. Working under a page-by-page approval process, I carefully planned and delivered each step, resulting in a functional and visually engaging website that restored client confidence and elevated their brand.
My role
UI/UX Designer
Keywords
UI/UX Design, Design Tokens, Brand Integration, Cross-Functional Collaboration, Web Design
My Impact
Why did the client choose us
Delivered high-quality work with client satisfaction at each stage – Built trust with a client that had been disappointed by previous agencies, securing approval page by page with minimal revision requests.
Elevated the brand’s digital presence – Created a cohesive visual identity by defining a style guide, color palette, and typography in the absence of brand guidelines.
Improved usability – Designed and refined the “Assemble Your System” widget to ensure an intuitive shopping experience, simplifying the process through pre-configuration and clear interaction patterns.
Optimized production workflows – Introduced a new method of designing directly in WordPress (Elementor), reducing steps between design and development and increasing delivery speed without sacrificing quality.
Balanced innovation with clarity – Developed unique features like the “Scar-o-meter” to celebrate the brand’s mission while ensuring ease of understanding for users.
Enabled long-term adaptability – Built the website with a flexible structure so the client could independently update and expand content post-launch.
Process
Close Collaboration for Client Confidence
As the lead designer, I worked closely with marketing and customer relations teams to validate deliverables before presenting them to the client. This ensured alignment with expectations and resulted in minimal revision requests.
→ Boosted client trust and streamlined approvals.
User Insights and Feature Prioritization
An in-depth client briefing defined goals and priorities, leading us to start with the Scar-o-meter, a core expression of their mission. Internal validations helped refine usability, including improvements to the “Assemble Your System” widget for a clearer user flow.
→ Improved user clarity and emphasized the brand’s vision.
Workflow Innovation for Faster Delivery
I introduced a new production method by designing directly in WordPress with Elementor, leveraging my HTML/CSS knowledge to cut steps between design and development. This accelerated delivery without sacrificing quality and later became the agency’s standard workflow.
→ Accelerated delivery and set a new best practice for the agency.
Challenges
Designing for Clarity in a Complex Flow
The “Assemble Your System” widget needed to handle complex configurations while remaining simple to use. Internal validations showed that auto-refreshing on each selection confused users, so I introduced a pre-configuration step with an “apply settings” button, creating a more controlled and intuitive experience.
→ Simplified a complex process into a clear, user-friendly flow.
Balancing Innovation with Feasibility
Innovative features like the Scar-o-meter had to be both impactful and technically feasible. Close collaboration with developers ensured these ideas were implemented smoothly while preserving usability and the brand’s vision.
→ Translated ambitious concepts into functional, engaging features.
Deliverables
Assemble Your System
Pre-configuration
To start, the user can pre-configure the system by selecting the medical specialities and procedures they need.
"Our suggestion" / "Assemble your system"
To assemble from scratch is as simple as clicking on "add equipment or accessory" and selecting the category and then the individual item. The user can then repeat these steps until their system is complete.
"Quotation (for your system)"
After assembling their system the user then fills in the form to be registered as a lead and to be contacted by the sales team with an estimate for their assembled system.
After sending out the form the user sees a confirmation screen with the selected system and the contact details of the sales consultant responsible for their region.
The Scar-o-meter
The Big Dream
Confiance Medical's "big dream" is to reach the goal of 437km avoided open surgery scars by using their products. 437km is the distance between their factory in Rio de Janeiro and their office in São Paulo. We developed a widget on the website to show in real time how close they are to achieving it.
The website
Outcome
Workflow Innovation for Faster Delivery
By shifting from a traditional designer-to-developer handoff to designing directly in WordPress with Elementor, I streamlined the production process. Leveraging my HTML and CSS knowledge, this approach allowed us to deliver more pages in less time without sacrificing quality.
Client Satisfaction and Trust
The page-by-page approval process resulted in very few revision requests, most of them textual, demonstrating the effectiveness of our collaboration and building the client’s confidence in both the process and the final product.
Agency-Wide Impact
The success of this new workflow set a precedent at the agency: whenever I was the lead designer, this process became the default production method, improving delivery speed and consistency across projects.