Flowchart - Whiteboard Sessions
Flowchart - Landing Pages
Progression of secondary pages
First hand in to ASG President.
First Critique Results
Continued page progression
High level Artboard Progress View
High level Unpopulated Wireframe View
Initial Unpopulated Wireframes
High level Artboard Progress View
Mid level Artboard
Populating Wireframes
Wireframes Populated
Context
The Samuel Automation Solutions Group (ASG) requested a redesign of their multiple websites to provide a cohesive user experience. They wanted their websites to feel like a unified space while retaining the unique abilities and autonomy of each business unit. They required a landing page for the new Samuel ASG group that could be built out in the future as the organization grows. The ASG needed to be visually autonomous from the parent corporation's existing web presence and look. All messaging needed to be updated to a cohesive brand voice, with a reduced overall text load, clean and minimal design, and strong imagery and video presence. The design had to cater to a new multi-generational audience and move away from the old corporate white collar management forward look. It also needed to represent diversity, equity, and inclusion to support company culture growth and attract new employees. The designs had to support future expansion of more sites from growth and business unit acquisitions.
Method
Research was conducted on other multi-brand websites such as Gap Canada, American Eagle, Pottery Barn, and NBC Universal. The design process had many stages and various stakeholders to work with. The initial flow, layout, and content creation work were completed internally under the review of the ASG president. The final stages included review, along with any requested redesigns and deployment with the Samuel Son & Co corporate web developers and marketing team.
Design Process
Visually, the brands needed to be forward at all times by using the division logos at the header of each page for representation and ease of continuously smooth navigation. Specific media used would represent each division by using exclusive imagery with shared graphic content and layouts across platforms differing by use of colour accents. Systematic used Samuel red, and CAID Automation used Samuel grey. Management and leadership representation was opened up to include all work areas for a broader view of employee representation and an equal or less hierarchical representation.
Solution
Working directly with the President of the ASG for approval at all preliminary stages, a website flow chart was created for Systematix and CAID Automation. Wireframes were then laid out for both. Picture content was shot and gathered, graphics were created, and photo treatments were developed. Copy was researched and developed from existing sites while updating and aligning messaging with industry language and best practices. Before the content creation phase, flowcharts and wireframes were shared at the corporate level with marketing and developers. Initial plans were to design the new websites freely from the ground up. However, in reality, an existing CMS template had to be used because other Samuel business units already used this CMS setup. Although the ASG could create an autonomous visual identity compared to existing Samuel business units, it had to be done within the prescribed framework. The requested landing page design was deemed too complex and expensive to code. At this point, it was decided that content would be created page by page to create the best fit between the originally planned layout and new CMS layout allowances. Page designs were turned in as finished for developers to create.
Result
The final result is a successful redesign of multiple websites for The Samuel Automation Solutions Group, Systematix Inc and CAID Automation that feel as though a user never leaves a single domain. The websites are visually autonomous and cohesive, with a unified user experience. The landing page for the Samuel ASG group is designed to cater to future growth and expansion as needed. The messaging was updated to a cohesive brand voice, and the design catered to a new multi-generational audience, representing diversity, equity, and inclusion. The design also supported the expansion of more sites from future growth and business unit acquisitions.
