Safety 101
Website landing page hosting information and registration for webinar classes on product called ‘Safety’. Content outlines how to use Safety and its features and lists class schedules, class instructors, and pricing to attend the event based on location.
Information Architecture
General information overview starts the landing page content followed by key information such as time, date, location, and pricing that is highlighted in subtle gray background.
Header design includes construction workers in hard hat to visually match with the headline description. The color of header background is in safety yellow color along with safety product logo to make it easier for hcss customers to recognize the webinar event is for Safety.
Visual Format
Landing page is designed in root of HCSS Safety branding standards. Accent colors come from Safety’s signature yellow color that highlights key information and elements such as headline titles and names of class instructors.
Contents are visually separated by subtle background color change to differentiate each section without a sharp break in between information.
General information overview starts the landing page content followed by key information such as time, date, location, and pricing that is highlighted in subtle gray background.
Header design includes construction workers in hard hat to visually match with the headline description. The color of header background is in safety yellow color along with safety product logo to make it easier for hcss customers to recognize the webinar event is for Safety.
Visual Format
Landing page is designed in root of HCSS Safety branding standards. Accent colors come from Safety’s signature yellow color that highlights key information and elements such as headline titles and names of class instructors.
Contents are visually separated by subtle background color change to differentiate each section without a sharp break in between information.
Mobile Adjustment
In mobile, class schedule outlines are vertically stacked to give full screen width for each day in order for text to be in sized up and comfortably legible. Adequate spacing is needed between each time schedule rows but due to similar spacing between time stamp column and schedule description column, additional UI element had to be added to keep up with users’ engagement as the page scrolls down. Bullet point timeline is put into use for easy pairing of time stamp to schedule description as users scrolls down the page and information is consumed up and down but read left to right.
Check out the Safety 101 website live here.
Work Collective, 2024