Student Project
Duration
Feb 5, 2025
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) in partnership with WorkSafeBC, focused on educating outdoor workers and employers about cold-weather safety.
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, color 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
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
Both team members equally contributed to writing HTML and CSS.Built responsive layouts using semantic HTML, Grid, Flexbox, and media queries.Ensured accessibility compliance through headings, contrast ratios, and intuitive navigation.Tested coding across breakpoints for a consistent, polished result.
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
