Airex

Software

Adobe XD
After Effects

Role

Web Designer

Company

Orfé Design • 2021

I was asked to revamp the website for Airex Energy, a Canadian green energy/biocoal company. The goal was to modernize their website and showcase their new facilities.

Planning: With the majority of the website content already in place, there were only minor changes to be made to the sitemap; the bulk of the work would be in the visual redesign. I began with research, noting which elements worked well on the existing website, and which ones could be improved. I looked for new ways to present the information, improving the illustrations and separating information in order the process of biocarbonization easier to understand. From there I moved on to the wireframe, producing and prototyping all of the pages before adjusting them as needed based on client and colleague feedback.

Colour and Typography: While the old website was full of green color blocks and imagery of budding plants, it felt outdated and separated from the actual product: coal. I felt it would be more professional and related to the product if I used charcoal and white as the dominant colours, reserving the logo's green colour as a pop of colour for CTAs. I chose Barlow, a slightly rounded sans-serif font in order to reflect the softer, organic side of green energy.

Website Design: I wanted the website to feel simple and modern. I used rounded buttons and minimal colour, creating an abstract icon set to symbolize the different types of coal products and their processes. I simplified the illustrations and graphs to make them easier to understand, then retouched the client-provided images in order to use them as background images thoughout the website.

Video: The client wanted a background video for the landing page header. After selecting my favorite shots from their database, I used After Effects to create a videomontage featuring the different aspects of the factory, lining up and colour correcting the shots to ensure a smooth transition between videos. The client later requested for their client's products to be made less recognizeable in the video so I created moving masks to obscure them.

Testing: Once the first round of the website was built, it was sent back to me to be reviewed. I looked through all the pages, checking links, hovers, and animations to ensure that everything worked as intended, viewing it on different browsers and phones while noting down all the changes to be made. After one round of quality assurance, the website was tested and made live.