Project Description

Cool Fortress provides high-end, industrial-grade protection for outdoor air conditioning units. For this project, I acted as both Lead Designer and Brand Strategist, transforming a client-supplied logo into a comprehensive digital identity and a high-converting WordPress landing page. By bridging my background in Graphic Design with Instructional Design, I created a site that doesn’t just sell a product—it teaches the homeowner why the protection is necessary.

Role: Lead Designer & Brand Strategist
Tech Stack: Figma, WordPress, Elementor
Creative Suite: Adobe Illustrator, Adobe Fonts
Key Deliverables: Brand Identity Sheet, High-Fidelity Mockups, Responsive Web Development

Phase 1: From Logo to Brand Identity

Formal Cool Fortress brand sheet featuring logos, colors, and fonts.

The project began with a client-supplied logo. Using my 27 years of design experience, I built a formal Brand Sheet to define the visual language for all future touchpoints.

Adobe Fonts Integration: I curated a professional typographic scale using Adobe Fonts to ensure a consistent, high-end presence across the web and print. This ensures that the brand’s “voice” remains identical whether a customer is reading a brochure or browsing on a smartphone.

  • Headlines: Strong, industrial sans-serifs to mirror the strength of the aluminum fortress.
  • Body: Clean, modern typefaces to ensure technical specs are highly readable.

Color Palette: The color palette includes Dark Navy Blue for reliability and professional weight, Lighter Blue for highlights and buttons to create a “cool” visual pop, and White for crisp contrast and clean design accents.

Phase 2: High-Fidelity Prototyping in Figma

Perfecting the user journey using Figma.

Before touching any code, I developed high-fidelity mockups in Figma. This allowed me to:

  • Perfect the User Journey, ensuring the technical “How it Works” section flows naturally into the lead-capture form.
  • Test the layout of interactive elements, such as the AR/3D models and demonstration videos.

Phase 3: Responsive Development in Elementor

Responsive Website Design with Elementor for Cool Fortress.

I translated the Figma designs into a custom WordPress site using the Elementor Builder.

  • Responsive Engineering: I optimized the site for a “mobile-first” world. Whether the customer is on a desktop or a phone in their backyard, the “Fortress” brand remains impactful, and the navigation remains intuitive.
  • Technical Education: As an Instructional Designer, I organized complex hardware features—like the UL-rated lightning rod system and corrosion-resistant aluminum—into digestible, visual modules.
  • Lead Generation: Integrated custom forms to streamline the quote process, turning visitors into high-quality leads.