Protect Safe System — UI/UX Website Redesign & Interactive Figma Prototype
Designing a modern industrial safety website to improve clarity, trust, and product navigation, from research to interactive prototype.
Role
UI/UX Designer
Industry
Industrial Safety / Manufacturing
Duration
7 weeks
Problem
Protect Safe System had an outdated and cluttered website that did not reflect the quality and reliability of its industrial safety solutions. The lack of clear structure, weak visual hierarchy, and poor usability made it difficult for users to understand the product range and trust the brand, especially in a B2B context where clarity and credibility are essential.
Solution
I redesigned the website with a strong focus on clarity, structure, and trust. By reorganizing the information architecture, simplifying navigation, and aligning the UI with A-SAFE’s established brand identity, I created a modern, professional experience that clearly presents complex products. The final result is a high-fidelity, interactive Figma prototype designed to support user confidence and future development.
Stage 1. Discovery & Research
I started by analyzing the existing Protect Safe System website to identify usability issues, content overload, and structural gaps. I also reviewed competitor websites and A-SAFE’s global brand presence to understand industry standards, user expectations, and best practices for industrial safety platforms. This phase helped define the main pain points: lack of clarity, poor navigation, and low trust perception.
Stage 2. Information Architecture & Content Structuring
Based on the findings, I restructured the website’s information architecture to better organize product categories and subcategories. The goal was to make complex industrial products easier to understand and explore, while creating a logical navigation flow that supports both quick scanning and deeper exploration.
Stage 3. Wireframing & User Flows
I created low-fidelity wireframes to define page layouts, hierarchy, and user flows across key pages. This step focused on clarity, readability, and ease of navigation, ensuring users could quickly find relevant products, resources, and contact information without friction.
Stage 4. UI Design & Visual Direction
I translated the wireframes into a high-fidelity UI design aligned with A-SAFE’s brand identity. This included refining typography, color usage, spacing, and visual hierarchy to create a modern, professional look that communicates safety, reliability, and trust. Special attention was given to responsive layouts across desktop, tablet, and mobile devices.
Stage 5. Prototyping & Stakeholder Review
I built an interactive prototype in Figma to demonstrate navigation, interactions, and overall user experience. The prototype was presented to the CEO, reviewed, and approved, allowing me to finalize the design and prepare it for handoff to development.
Outcomes
The project resulted in a complete UI/UX redesign that transformed an outdated website into a clear, modern, and trustworthy digital experience. Through improved structure, visual hierarchy, and responsive design, complex industrial safety products became easier to navigate and understand. The final outcome is a high-fidelity, interactive Figma prototype aligned with A-SAFE’s brand identity, approved by the CEO and ready for future development.
Working with Alexandra on the redesign of the Protect Safe System website was a great experience. She quickly understood our industry and delivered a clean, well-structured UI/UX design aligned with the A-SAFE brand. Although the website is not yet live due to development timelines, the design work was fully completed and approved, and I would confidently recommend her for UI/UX projects in B2B and industrial environments.
Adrian Stoica, CEO of Protect Safe System
Other Projects
Moment Media — UI/UX Design & Framer Build
A modern one-page website for a creative social media agency.