Human Safety Academy
Info
User-Centric Platform for Safety Training and Incident Management Company
Human Safety Academy (HSA) is a global safety training and consultancy company that helps industries strengthen workplace safety through advanced programs in incident investigation, risk prevention, and safety design. Trusted by Fortune 500 companies and global leaders like Siemens and ABB, HSA wanted a modern, user-friendly platform that showcases expertise, improves engagement, and drives lead generation through calls and forms.
My Work
UI/UX Design & Creative Direction
- Defining Goals & Objectives
- Moodboard
- Color & Typography System
- User Flows & Wireframes
- UI Design
- AI Photography
Client
Human Safety Academy, Netherlands
Work
Website Redesign
Timeline
2024 - 2025
My Role
UI/UX & Creative Designer
Team
Project Manager:
Savan Zalodiya (Starksouck)
Arpita Roy (Starksouck)
Webflow Developer:
Jaynesh Patel
Challenges
- Understanding the safety industry to optimize conversions and communicating technical topics in a clear, engaging way.
- Designing innovative learning modules with motion that enhanced, not distracted.
- UI and animations felt modern and engaging, but not overly funky or playful.
Goals
- Boost User Engagement → Create intuitive navigation and interactive design that encourages visitors to explore training courses
- Drive Lead Generation → Build seamless pathways for course sign-ups, inquiries, and newsletter subscriptions, turning visitors into qualified leads.
- Stand Out Visually → Design a modern, professional interface with innovative touches that differentiate HSA from competitors.
- Tell a Compelling Story → Use media, visuals, and content to communicate HSA’s impact and credibility, building trust with global enterprises.
Process
Discovery & Strategy
– Analyzed offerings, competitors, and client needs.
– Defined goals and mapped conversion-focused strategy.
User Flows & Wireframes
– Optimized user journeys for training, consultancy, and incident management.
– Structured wireframes around easy navigation and strong CTAs.
Moodboards & Visual System
– Explored design directions with moodboards.
– Color palette, typography scale, and AI photography style.
UI Design & Prototyping
– Finalized the UI design after 10+ revisions and multiple iteration tests, ensuring clarity and user confidence.
– Built a scalable design system for Webflow, with micro-interactions and motion to enhance engagement.
Development & Launch
– Built in Webflow with smooth animations and responsive layouts.
– Optimized for accessibility, performance, and global reach.
Website Architecture & Wireframe
Website Moodboards
After defining the strategy, we created two distinct moodboards to visualize the brand direction, helping to translate goals into a clear visual language and guide the design process.
Brand Colors & Typeface
Brand & Creative Direction
To define a style that aligned with our goals, resonated with the user persona, and stood out from competitors, we explored multiple creative directions. This included experimenting with image styles, where we defined a consistent visual treatment and built a prompt system to scale AI-generated images across the website. Here are some of the explorations for UI and brand assets that shaped the final identity.
UI Design
After creative exploration, we finalized the UI with clear layouts, intuitive cards, and scalable components, balancing modern visuals with usability to build confidence and engagement.
