the process
The American Society of Safety Professionals was going through a major rebrand. The goal of the website was to establish a new aesthetic that conveyed the new messaging and feelings of the ASSP updates.
Wireframes began, and were completed by my colleague Timothy Quinlan, during the finalization of the brand enhancements. From there we utilized his research to create a series of designs that were tailored to the safety industry, their audience and enhancing pain-points of the existing website.
View full page homepage design comp.
landing page templates
A big part of the process was to not only create templates for the homepage, a few unique templates and a few standard pages but to create a componentized landing page template that had the ability to hide and show content based on the page need.
The site was broken up into four area segments, that were each color coded per the brand standards, and had similar styles to use design to establish a pattern for user-awareness for hierarchy in the site.
There was a main style for the homepage, a specific style that was then color coded for landing pages, and then tertiary pages had a general interior template applied, so depending on the tier, you would be able to determine where in the site you are based on the layout once familiar with the site.
responsive first
The design was a mobile-first design done within Photoshop, and I exercised heavily the now dead Photoshop viewing capabilities for my phone, to render the design on my device while making adjustments within the program itself.
Their current website was not a mobile friendly experience. After the research showed that a good amount of their traffic was utilizing a mobile device it became imperative that the mobile experience be optimized and easier to navigate while on the go. Simplification where possible was key, and utilizing a mobile first approach made for easy scalability to other devices.
hand-off
This was another project, where SAI Digital did the research and design, and the development was outsourced to a third-party company.
It was essential to create a physical style guide, and document the components with a component library that explained the details of specific elements, how they interact with other components in the library, and how they respond on different devices.