Advanced Air Technology

  • Branding
  • Web Design
  • UI/UX
  • Package Design

Stakeholder:
Angelica, Advanced Air Technology

Scope:
I will design the following,

The logo, which includes a logomark and wordmoark.
The website, which includes a homepage, an about page, a store page, product pages, shopping cart, checkout, a subscription page signup page, a subscription members page, and privacy policy page.
The packaging, a poster cover which is included in the plastic sleeve enveloping the product, two versions one for a box-fan air-filtration kit and one that is resizable for various sized air-filters.

Exclusions:
Any copy on the website including product descriptions, about page information, privacy policy, and front page information will be provided by the company, photos in the about page and certain product photos were provided by the company, company colors have already been determined by the company, information found on the product package will be provided by the company.

Contributions:
Schedule and Planning, Graphic asset creation, Web Design and Information Architecture, UX and UI elements, Squarespace website development, Packaging Design, Layout Design, Instructional Graphics for box-fan kit.

Overview


Advanced Air technology is a company specialized in indoor air quality with over 40 years of experience in the HVAC industry. They help the consumers understand the HVAC industry by educating and instructing, easy installation and simple services that could be done by the consumer at an affordable cost with no hassle.

I had the pleasure of working with Angelica of Advanced Air Technology to redesign the company logo, create the website for the company and create the packaging poster/informational material for their air filter product.

The extensive work I provided for this product enabled me to use many different skills, including package design, UI/UX, web design, branding, and photo editing while using almost the entire suite of Adobe products including Photoshop, Illustrator, InDesign, and XD.

The concept behind the designs was a modern sleek look with a unilateral marketing design for all assets and materials.

Brand Design

Brand Process Image

My process for designing the branding of Advanced Air Technology was to first to do some market research to see what competitors are doing and formulate possible strategies for differentiation of the product and company. Following my research, I had an in-depth interview with the stakeholder to assess what the wants of the company were. After that I was able to start the creative work; this involved experimenting with different type and creating various logo-mark branding elements and looking at how these various designs would present themselves on the various colors that the company had already chosen for t-shirt and on the job uniforms.

Generally, when designing logos, I will choose three designs for the client to choose from as this usually prevents clients being overwhelmed, sometimes the client may want specific elements to be present in a design so I will create something that fits their criteria and then use my specific vision and interpretation for the other designs I present.

Below are various drafts ranging from the starting to the final.

Brand Support Image

Website Design


The Challenge

Create a website with a captivating landing page, store, and members area. The website must also have a backend that would be updateable to company employees not trained in web design or web technologies.


The Process

Web Design Process Image

My process for designing the Advanced Air Technology website went through a UX inspired design thinking series of steps for problem solving, first I did preliminary research on competitor websites to see what works and what is being done by other companies, after I did my research, I had an interview with the stakeholder to determine what was required on the website for it to be considered successful.

The client wanted the ability to create future updates to the website therefore I opted to create something on a platform with a built-in content management system and I decided to use the Squrespace platform to create the website because of its easy to use, user friendly backend which doesn’t require coding or web technology knowledge.

Following that decision, I worked to create wireframes in order to get a feel for the layout and how information was going to be dispersed, then the first prototypes were created, and I worked with the stakeholder to refine the website into the finished project.


Web Flow Chart Image Web Flow Chart Image

The Solution

The end product was a Squarespace website that included prefabricated pages where company employees could add new products, a functional members are using squarespace's new members features, and all the bells and whistles of a modern website.


Web Wireframes Image Web Flow Chart Image Web Flow Chart Image Web Flow Chart Image Web Flow Chart Image Web Flow Chart Image Web Flow Chart Image

Package Design

Package Design Process Image

My process for designing the packaging for the air filters and Box-fan air filter kit began with doing research on the competition, looking at which competitors are best sellers and what consumers are looking for when buying an air filter. Using that information, I was able to determine which elements should be present on packaging such as what the air filter filters out and mentions of what the air filter can you protect you against.

In having a set of elements ready it was a matter of creating a decent prototype of both versions in differing colors and layout schemes, with refinement until the packaging looked satisfactory to the stakeholder.

Web Flow Chart Image
Web Flow Chart Image
Web Flow Chart Image
Webpage Image of AAT Landing Page
Mobile Webpage Image of AAT Landing Page
Image of AAT logo
Image of advanced air technology wireframes
Image of cut the cord ct prototypes