Public Safety Awareness Website Development
A two-person student team project where we designed and fully coded a responsive public safety website for KALMONT (fictitious safety brand) in partnership with WorkSafeBC, focused on educating outdoor workers and employers about cold-weather safety.
Process
The Kalmont website was created through a structured design process that combined brand identity with user experience.
Starting with concept exploration and visual direction, I defined the layout and user flow through wireframes before refining the final look and interactions in high-fidelity design, ensuring the site is both cohesive and intuitive.
Research & Inspiration
Analyzed WorkSafeBC and safety advocacy sites for content tone and delivery.
Identified content tailored to outdoor workers, safety trainers, and younger employees.
kalmonts Art Direction & Branding
Established grids, colour palettes, and type scales for each art style.Designed custom icons and infographics, sourcing compliant visuals when needed.
Together, we created three mood boards: Clean & Corporate, Bold & Youthful, and Nature-Inspired.
Wireframes & Ideation
Built annotated wireframes for both desktop and mobile across all three pages.Structured content for logical flow and clarity.
High-Fidelity UI & Mockups
Created two distinct homepage mockups, then expanded each into three full-page mockups.Produced six paired desktop and mobile screens in total.Shared decision-making equally, reviewing each other’s work and refining designs collaborativel
Challanges
Create a 3-page responsive website with mobile and desktop layouts that communicates key safety concepts for the BC workforce:
Ensure accessibility and readability for all users
Use visual storytelling, infographics, and clear UI hierarchy
Build two unique homepage mockups and a total of six high-fidelity screens, exploring alternate visual directions (Clean & Corporate, Bold & Youthful, Nature-Inspired)
Key requirements:
Distinct navigation and KALMONT branding
Visual hierarchy (title > subheading > content)
Consistency in layout and design language
Graphics and iconography that enhance understanding
Front-End Development
Solution (Final Design Overview)
The KALMONT x WorkSafeBC website merges educational clarity with engaging design, all fully prototyped and coded collaboratively.Home Page: WorkSafeBC intro, workers’ comp explainer, CTAsCold Weather Awareness: Infographics on causes, risk groups, signs & stagesPrevention & Treatment: Safety checklists, first aid protocols, emergency steps
Key Features:
Shared Branding Decisions: Unified navigation and logo
systemInfographics & Illustrations: Jointly designed for clarity of safety concepts
Responsive Coded Layout: Both desktop and mobile fully built in HTML & CSS
Accessibility-Focused UI: Strong hierarchy, semantic structure, compliance with WCAG standards
DISCOVER MORE
