AIM Solder: Building brand image and content manageability

Isovera collaborated with AIM Solder to create a redesigned website homepage that would external reflect brand personality in the website design, and internally allow for easy editing and uploading homepage content.

Isovera worked with AIM Solder to achieve an external design that would reflect their brand personality, and internal changes that would make editing and uploading of homepage content easy. Their previous site featured inconsistent brand color, outdated layout and design, and a hard-to-edit homepage content structure.

To accomplish the project goal, Isovera worked with AIM Solder to create a consistent site design in line with AIM Solder’s brand guide and personality. Isovera also implemented the ‘Paragraph’ module to enable easy homepage content uploads and edits.

Managing content maintainability

Paragraphs module using a hero image, left, was used to replace AIM's previously hard coded boxes of content, right

When AIM Solder first engaged with Isovera, the website’s homepage was built using traditional content blocks and was cumbersome to manage; to make content edits on the homepage a developer was needed to change the site’s code. To create a more usable homepage, Isovera implemented Drupal’s “paragraph module”. By using this approach, AIM’s homepage was able to be broken down from the original content block into smaller pieces; these smaller pieces (called “paragraphs”) could then be filled with images, text, or even featured “cards” that linked to new web pages. Using these new “paragraphs” allowed for AIM Solder to feature content in many ways (featured images, text boxes linked to new pages, small “contact” cards etc) and put the ability to modify, add, and eliminate content into the hands of a content editor, not only a developer. This allowed content editors to quickly and simply add and edit what content was being displayed on the website, as well as how content was being laid out and displayed, increasing site flexibility.  

Building brand image

AIM's logo, color palette, and typography were updated for a matching and seamless site look

A second major obstacle that AIM Solder’s website faced was that the homepage image did not communicate an accurate brand personality; the homepage was clunky, visually outdated, and did not tell AIM Solder’s story. To better represent AIM’s identity, Isovera updated the design to incorporate a new color palette and pair of typefaces to more closely match the client’s style and brand guide. This new design unified their image and represented their brand identity better than ever before. AIM Solder’s homepage was also redesigned to allow for a more accurate and modern brand portrayal by replacing previously coded boxes of content with Drupal’s paragraphs. A hero image (a large image banner featured on the website) replaced the original compartmentalized boxes, resulting in a modern looking website with a cleaner brand image.

Structuring for site performance

In addition to visible design changes, “internal” code changes were made to the site as well. To address the need for a more responsive website (a website that adjusts formatting based on device and screen size) and the importance of website performance, Isovera updated and streamlined the stylesheet code, and added a grid system and an integrated task manager to the site’s theme.

Converting the CSS to Sass, allowed for better compression of the resulting code and more thorough site performance optimization. This resulted in a faster website and design improvements across the site. Integrating a preprocessor and task runner into the website’s theme also sped up development through automation of code quality and browser compatibility. Integrating a grid system into the theme, Isovera was able to improve the overall page design scale, resulting in an improved experience for users viewing the site on large displays or screens. All of this made for substantial improvements in overall quality, speed, and ease of future development.

Overall

Overall, the main changes that Isovera worked on with AIM Solder fell into three main categories:

  • Content: single location simple content management, leveraging paragraphs and increasing flexibility
  • Branding: uniform, modern, and accurate portrayal of AIM’s brand and personality
  • Speed: optimized website performance, and enhanced responsivity.

Though the categories may seem like small pieces to a puzzle, they allowed Isovera to radically alter the perception a user has when using AIM Solder’s website, ultimately giving site users a whole new experience.