Repower Australia

ClientSolarCitizens [Sydney, New South Wales, Australia]
RolesResponsive Front-end Development · Mobile & Tablet UI Iterations · Content Management System · First Content Management
Year2018
Duration3 weeks
Launch the live site

Repower Australia was a website I developed ⁠and Lully Duque designed at Code Nation Australia, a digital agency based in Melbourne, Australia, with whom I worked for past 4 years.

We won a "Reed Award" with this project in February 2019 titled: "Best International Campaign Website" and it was one we were very proud of at the company.

Designed by one of the two graphic designers we had at the role, with incredible custom designed infographics and images, the site told a story imagined by the clients and by Code Nation's team to encourage the transition of Australia to solar energy options, showing data and information about the subject, using well designed and cute graphics together with story telling.

Main Image Case Study: Repower Australia
Repower Australia Case Study's Image

My main role in the project was bringing it to life with the full front-end development, collaborating with the designer at first stages and with the client at final ones to take on feedback and carry on with necessary changes and tweaks.

As usual I had to iterate and create the responsive (mobile and tablet) versions as well, trusting my own experience with User Interfaces (UI) which started for me with a course I took in Web Design and Design for Mobile Devices in the university Pontificia Universidad Javeriana at the end of 2013.

Repower Australia Case Study's Image
The "Repower Australia" infographic website (first image) from this case study is no longer live. This (second image) is their main website also developed by other team member at CodeNation simultaneously. "Repower Australia" was a campaign-ready complementary infographic brochure-type website where we experimented with new technologies (Jekyll) for the first time, a new CMS (forestry.io) for the first time, a new theme (Slides), and I added an animation JavaScript library (AOS - Animate on scroll library) that allowed me to also bring many scroll-animations making the site more engaging and the information in it presented in steps, instead of all at once; making it easier to consume. – As of July 13, 2024.

The project had a short deadline in the development phase but I managed to deliver a full dynamic website together with a completelly custom Content Management System (CMS) with custom UI mirroring the most important elements and sections of the site for the client to be able to edit. Written in HTML, SCSS, and Liquid Code; I made most of the content dynamic using Forestry.io CMS (which is sadly dropping in 2023 in favor of their newest Tina.io CMS).

I just also sadly found in 2023 that the site is no longer live in its original domain: https://www.repoweraustralia.org.au, so I Iinked above to the "SolarCitizens" main site from the client, shown in the image above, which we also developed earlier at Code Nation Australia.

See other 27 campaigning projects I was a part of in the past in my Portfolio 2021.

A display of the fonts used in the project

As a bonus, as part of my own free time or some extra polish within the deadline, I handled to add some clean, small, but engaging animations while scrolling which usually was out of priority in the project's timeline.

These were elements entering from the sides or fading-in smoothly while scrolling down, which not only helped with engagement in a time when not many sites had this type of interactions, but most importantly is very well known to make the site's content easier to consume (similar to "spacing" (using blank space) which gives space-to-breath and emphasizes contents and elements by contrast, making it also less cluttered).

Also small touches like the button's shadow small unique effect which I didn't receive a prototype or design of the hover state, but had to improvise and was one of many little details that makes up for a holistic, consistent, and interesting live design.

I tryied to add these details with love which were not a priority in any of the campaigning projects' workflow, but the site ended up with a better user experience.