Website Redesign Case Study

Residential energy assessments
Residential Energy Assessments, established in 2013, is a family-owned professional service specialising in thermal Energy Rating and Consulting. Based in Queensland, Australia, REA has in-depth knowledge of local laws and energy codes. Their services include Energy Star Ratings for various residential structures, along with Energy Efficiency Assessments tailored to new builds, extensions, and renovation projects.

Project Overview📝

Tasked with redesigning the old Residential Energy Assessments website with a more modern design, while ensuring accessibility across multiple screen sizes.

Project Duration: October 2023 - December 2023

The Problem.

The owner has experienced multiple problems with the existing website; often, the website breaks when accessed on mobile devices. This has led to issues for potential clients trying to get in contact, possibly costing the owner business. It is clear that a new design is needed to help both new and existing clients navigate the website.

Project Goals🎯

User Experience (UX)
Mobile Responsiveness
Increase Usability

Understanding the Problem 🤔

Before diving straight into the design process, I wanted to analyze the existing website and interface. While communicating with the owner, we found that many issues arising from the mobile version of the site were related to margins and text sizes. This was critical to address while redesigning the new website.

Existing Colour Palette

Additionally, I also communicated that we needed an updated colour palette because the current scheme didn't meet accessibility standards (WCAG 2.1 Level AAA), which could pose problems for all users.

User Problems.

  • The website does not adequately support users on mobile devices
  • Difficult-to-read interface and poor colour palette choice
  • No built-in form submission function
  • User expected to read large paragraphs of text with no images/graphics to break up page

Possible Solutions 🛠️

  • Develop a version of the website that supports users on mobile devices.
  • After discussions with the owner, it was determined that an inbuilt form submission system was necessary based on the feedback received.
  • Reformatting large paragraphs of text into a mix of images/graphics.
  • Revise colour palette for improved accessibility.

Low-Fidelity Wireframes

Below are the low-fidelity wireframes for the proposed changes to the existing website.

User Flow✍️

The user flow outlines the experience for the user: fast loading, clear navigation, and immediate access to key information enhance interest and engagement. This showcases company info, services, and unique selling points, ultimately leading to more business.

Updated Colour Palette

The updated colour palette is based off of the original palette, whilst increasing the contrast. This palette is a lot more accessible and adheres to WCAG 2.1 Level AAA.

Home Screen

Contact Us Screen

Email Contact

Accreditation Screen

Quantitative Research📈

Key metrics and data observations since design implementation.

+200%

Increase in website engagment

+277%

Google traffic duration

100+

Email inquires

Key Takeaways

Given that this is my first real-world project, I have learned a lot and broadened my understanding of the design process. Each step in this journey is crucial, providing the foundational support needed to fully address and optimize the design outcome for the client. The work was challenging, but the outcome speaks for itself, especially with the results of the implementation.

There is no perfect design; everything can be improved. Future iterations could yield even greater outcomes for potential clients.

1. Intro
2. Overview
3. Goals
4. Existing Problems
5. LoFi Wireframes
6. User Flow
7. New Palette
8. HiFi Wireframes
9. Results
10. Takeaways