Contact energy
Creating a design system using Contact Energy’s website as a case study
Type
Timeline
University project
December 2023
Team
Tools
1 student
Figma , Miro
At a glance
For our university assignment, we were tasked to dissect a website and reverse engineer their design system.
My chosen website was Contact Energy.
Key takeaways
-
Improved critical thinking and Figma proficiency, mastering tools like microinteractions and animations.
-
Recognised the importance of cohesive branding and clear design guidelines for maintaining brand identity.
-
Tackled challenges with typography, color palettes, and alignment, learning to balance variety with consistency.
-
Working with peers and gaining new perspectives on different features like “dos and don’ts” for future projects.
Challenges faced
Typography:
One challenge emerged during the typographic phase. The Contact Energy website featured almost 30 different font styles, prompting a thoughtful selection process to identify the most commonly used ones. This raised a question about whether this diversity was due to a lack of consistency in their original design system or a deliberate choice. On closer examination, it became clear that the use of different heading fonts was intentional, creating a serious tone for specific pages (like investors, electricity, and gas) and a more lively vibe for sections like broadband and mobile. This approach aimed to appeal to a diverse audience of different ages, using serious fonts for a mature audience and a more upbeat style for broader engagement.
​
Colour palette:
​
Another challenge was in defining the colour palette. While there was a list of colours in the coding, additional unlisted colours surfaced. A mobile version introduced another set of colours termed "chakra colours," which initially caused confusion. Despite searching for potential coding significance, the term didn't yield meaningful results on google, leading to a decision to stick to the core colours from the initial list and a few accent colours, tints and shades.
​
