UX Audit & redesign of a webpage

Overview

The client: Brussels Environment is the go-to environment and energy agency for residents and companies in the Brussels Capital Region.

Timeline: 10 hours or 2 days

*This project was made as a test task.



🎯 Goal

• To improve the overall user experience of the web page by identifying and addressing usability issues and user pain points;
• to take into account accessibility and eco-design constraints;
• to improve the design and layout within the strict brand guidelines.





🔍 Audit

✦ Let's start!

I put the page screenshot in a figma file, where after thorough analysis I highlighted the page elements by categories:

• Green - It is good, keeping it as is.
• Yellow - Small changes required.
• Red - Removing element or changing fully.





⚠️ Factors I check when doing UX Audit

1. User accessibility and inclusivity: ensuring that the product can be used by as many people as possible, including those with disabilities or who are using assistive technologies. This includes things like providing text alternatives for images and videos, using proper heading hierarchies, and having good color contrast and text size.
2. Eco-design / sustainable design principles: ensuring that all content on the page is valuable, that website doesn't use attention capturing mechanism and is quick to load. Read about principles of eco-design on my Instagram.
3. Performance and efficiency: how quickly and easily users can complete their tasks and achieve their goals. Is the product responsive and fast-loading? Are there any unnesessary steps in main user flows?
4. Navigation and structure.



✦ Issues identified for this web page

• Not mindful use of images: image as header background takes to much attention; other images didn't provide significant value.
• Data visualization can be enhanced.



• Complex text that is hard to perceive.
• Unnesessary design elements that do not comply with the guidelines.



• Poor mobile responsiveness.
• No indicators that menu items can be expanded.



• Too much characters per line in the text block, which poorly affects readability.
• Hyperlinks that won't make sence if read by screen reader.
• Cluttered footer.



• Too much colors used for the design. A lot of almost identical colors.
• Text sixe for paragraphs can be bigger.





🎨 Redesign

✦ Wireframing



✦ Visual design



✦ Secondary analysis

At the end I double check color contrast, color-blind friendliness of the color palettes and generate heatmap to ensure that no unnesessary elements grab to much of user's attention.

Tools used:

• ADEE Comprehensive Accessibility Tool (text contrast, color blind simulation)
• Zyro - AI Heatmap Tool
• Adobe Color - color-blind friendly palette generator





⭐️ Results

At the end of the project we have achieved:

• Matched AA contrast standart for all text on the page.
• Redesigned the navbar to be cleaner.
• Enhances Air Quality Meter to consist of less sections, but be easier to read.
• Created color-blind friendly palette.
• Enhanced air quality predictions: they are now available by clicking on the dates below.



• Provided additional information about air quality for users who are more interested in the topic.



• Changed hierarchy of the text on the page and provided more information and a legend for Air Quality Meter.



• Simplified icons throuout the page and created more space in the footer to be easily scannable