Designing a User-Centric Platform for Safety Training and Incident Management Company
Human Safety Academy enhances safety across industries through advanced training, research, and consultancy. It offers programs in incident investigation, risk prevention, and safety design, helping organizations ensure compliance and promote workplace safety. Trusted by global leaders like ABB and Siemens.
Crafting a design strategy to captivate, inform, and convert visitors effectively.
The goal is to boost engagement with an intuitive interface showcasing courses, the TriPod method, and expertise. Visual appeal and storytelling will drive leads through seamless sign-ups and inquiries while communicating the brand's vision.
Challenges
Overcoming industry-specific hurdles to deliver a seamless and innovative user experience.
Key challenges included understanding the safety industry to optimize conversions, using AI-generated imagery to replace custom photos, introducing innovative learning modules, and ensuring motion interactions enhanced UX while maintaining visual consistency.
Our Approach
Our approach was divided into five key phases: Understand, Define, Moodboards, Design, and Webflow Development. Each phase focused on crafting an optimized and visually engaging user experience.
Understand
We analyzed the company’s offerings, challenges, and competitors to establish a strategic foundation.
Define
Goals, audience insights, and features were defined, and user flows and wireframes were optimized for better conversions.
Moodboards
Moodboards were created and refined to finalize styles for visuals, layouts, and interactions.
Design
Hero sections and pages were designed, animations storyboarded, and designs refined through feedback.
Web Development
The website was built in Webflow, animations implemented, and final revisions completed for a successful launch.
Understand
We began by gaining a comprehensive understanding of the company’s products and services, identifying their existing challenges, and conducting in-depth competitor research. This phase helped us establish a foundation for strategic planning and decision-making.
Define
Goals and desired outcomes were outlined based on insights gathered during the first phase. We analyzed the target audience, redesigned the user flow to enhance conversions, identified essential features and information, and refined wireframes to align with user needs and business objectives.
Moodboard
To define the website’s visual and experiential direction, we created keyword groups for moodboard themes. Through iteration and feedback, we finalized moodboards and established cohesive styles, including typefaces, colors, layouts, animations, and interactions.
Design
The design phase involved crafting hero sections and aligning on directions with stakeholders. We designed additional pages, created animation and interaction storyboards, and refined the designs based on user feedback. These designs were finalized for seamless Webflow development.
Wireframe
Low-fidelity wireframes were created to define the layout and structure, ensuring clarity in user flow and prioritization of key elements.
Color Palette
A refined color palette and typeface selections were finalized to align with the brand’s identity, enhancing visual appeal and readability.
Typography
The chosen typeface, IBM Plex Sans, was selected for its clean, versatile style that balances readability with a modern aesthetic, enhancing the overall design language.
UI Screens
High-fidelity designs were created for key sections, including the hero and additional pages, integrating animation and interaction details for an engaging user experience.
Web Development
In the final stage, we prepared detailed handoff files and developed the website in Webflow, integrating animations and interactions as planned. After implementing final revisions, we launched the site, ensuring it met all functional and aesthetic goals.
Result & Impact
The comprehensive website design and development strategy yielded significant results
01
Improved user engagement
Enhanced interactive elements and intuitive design boosted user participation and time spent on the platform.
02
Achieved faster page load times
Optimized performance ensured seamless access to safety training modules with minimal delay.
03
Positive user feedback
Users praised the platform's clarity, ease of navigation, and visually engaging learning experience.
HSA Team
Human Safety Academy
“StarkSouk demonstrated exceptional project management, maintaining clear communication and delivering quality work on time. They adapted seamlessly to our evolving needs, accommodating changes with responsiveness and attention to detail. Their proactive and collaborative approach made the process smooth, and their commitment to our vision was evident throughout.”
Project Credits
Project Manager
Arpita Roy
Savan Zalodiya
Web Designer
Harshal Patel
Arpita Roy
Web Developer
Jaynesh Patel
Savan Zalodiya
Ready to build your brand?
Our team is excited about solving your brand-building challenges.