Jacob Di Domenico
Case study
See how I revamped Hydro One's Sustainability Report for a cleaner, more accessible user experience. As the lead designer, I collaborated with stakeholders to craft an intuitive interface that highlights key initiatives. Explore the strategic choices and measurable outcomes that made this project a success.
UX strategy, UI design, web development, prototyping
UX designer, UX developer
Figma, Wrike, Visual Studio Code, Microsoft Sharepoint, HTML, CSS, Javascript
2 months July 2024- August 2024
Intro
As the lead designer and developer, I led the redesign of the 2023 Hydro One Sustainability Report webpage to enhance user experience and increase engagement with key environmental and corporate responsibility content. By working closely with stakeholders and leveraging a range of design and development tools, we aimed to create a user-centric interface that aligns with both business goals and sustainability initiatives.
The project began with a comprehensive review of the previous webpage, identifying areas where users encountered challenges, such as unclear navigation and limited access to essential data. Through user feedback and analytics, we pinpointed areas for improvement, focusing on accessibility, ease of use, and mobile responsiveness. These insights informed our approach, emphasizing the need for a clean, efficient design that effectively conveys Hydro One's sustainability efforts.
Collaboration with stakeholders was key to ensuring the redesign adhered to Hydro One's brand identity and sustainability messaging. Regular feedback sessions enabled a dynamic design process, allowing us to refine the user interface quickly. Utilizing tools such as Figma for design and Visual Studio Code for development, we delivered a robust, visually appealing webpage that significantly improved user engagement and access to critical sustainability information.
Goal
The primary goal of the 2023 Sustainability Report webpage redesign was to enhance usability and accessibility while showcasing Hydro One's sustainability initiatives. We aimed to create a more intuitive layout, simplify access to key information, and integrate features that improve user experience, increase engagement, and promote transparency around environmental and corporate responsibility efforts.
Research insight
From last year's report, it became evident that users had difficulty locating the call-to-action (CTA) to download the report. We aimed to enhance visibility and understanding of this CTA in the hero section, ensuring it stands out and encourages engagement.
Research insight
Users expressed a desire for a more streamlined presentation of essential information from the sustainability report. By clearly showcasing vital highlights and metrics, we aimed to improve user comprehension and facilitate informed decision making.
Research insight
Feedback indicated a need for interactive elements that encourage user engagement. Integrating features like infographics and visual data representations can make the content more accessible and engaging, fostering a deeper connection with the report's findings.
Research insight
Many users accessed the sustainability report via mobile devices. Optimizing the page for mobile screens was critical to providing a seamless experience, ensuring that information is easily navigable and visually appealing on all devices.
Design considerations
In redesigning the Hydro One Sustainability Report webpage, we prioritized several key design considerations to optimize user experience:
Simplified navigation: We streamlined the layout to facilitate effortless information retrieval. By creating a clear and concise navigation menu with well-defined categories, we reduced the number of clicks needed to access important content, minimizing user frustration.
Accessibility: The redesign adheres to WCAG (Web Content Accessibility Guidelines) to ensure inclusivity for all users. Features like keyboard navigability, text alternatives for non-text content, and sufficient color contrast were integrated to enhance usability for individuals with disabilities.
Responsive design: A mobile-friendly interface was essential for seamless access across devices. Given the increasing number of users on mobile, we implemented responsive design techniques to ensure optimal performance on desktops, tablets, and smartphones.
Visual hierarchy: Information was organized logically, using clear headings and effective calls to action. By structuring content with thoughtful typography, spacing, and color, we guided users through the information, helping them quickly find what they need.
Black 400
#242424
Black 500
#424242
White 100
#ffffff
White 200
#e2e2e2
Teal 400
#005866
Teal 500
#1A6976
Teal 550
#257F8B
Vibrant Teal 400
#77E9C6
Mint 100
#DDF0EA
Mint 150
#CEE1DB
The choice of typography on websites plays a crucial role in establishing a modern, readable aesthetic that enhances user experience. With versatile styles and web-optimized designs, well-chosen typography ensures clarity, accessibility, and a cohesive brand identity, fostering trust and engagement with users.
Hydro One's use of the Roobert font on their contact page embodies a modern, clean aesthetic that enhances readability and user experience. With its versatile styles and web-optimized design, Roobert ensures a cohesive and accessible interface, reflecting Hydro One's commitment to clarity and professionalism in digital communication.
Heading one - Roobert semi-bold
Heading two - Roobert semi-bold
Heading three - Roobert semi-bold
Heading four - Roobert semi-bold
Heading five - Roobert semi-bold
Heading six - Roobert semi-bold
Body copy - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, harum.
The launch
Following thorough testing and feedback iterations, the redesigned Hydro One Sustainability Report webpage was implemented using Microsoft SharePoint, supported by Visual Studio Code for development. SharePoint's flexibility and collaborative features made it an ideal CMS for handling dynamic content and future updates.
A critical focus was ensuring the page's responsive design, optimizing the user experience across all devices. Rigorous cross-browser and mobile testing guaranteed that the report is easily accessible, whether on desktops, tablets, or smartphones.
We also prioritized ease of content management for Hydro One's internal team, ensuring they could effortlessly update data and visuals as new sustainability milestones are achieved. SharePoint's user-friendly interface empowers them to manage content efficiently without needing deep technical expertise.
The successful deployment of the 2023 Sustainability Report page positioned Hydro One to effectively communicate their environmental efforts, engage stakeholders, and maintain transparency, all while adapting to the growing demand for digital-first sustainability reporting. The webpage serves as a visually compelling platform to showcase their sustainability commitments and progress.
Impact
The impact of the redesigned sustainability page was significant, demonstrating tangible improvements in user engagement, report downloads, and overall user satisfaction.
35s
Following the release of Hydro One's 2023 Sustainability Report on August 12th, users spent an average of 3 minutes 44 seconds per session, marking a 35 second increase compared to the 2022 report. The page attracted 680 users with 1,452 views, maintaining a bounce rate of 40%. This improvement highlights the stronger engagement with the sustainability content.
72%
Bold and engaging callouts on the page drove user interaction, with 72% of the 689 total PDF downloads initiated via the prominent "Download Report" button in the hero section. Additionally, 80 clicks guided users to the sustainability policies page, showcasing an active interest in Hydro One's sustainability initiatives and policies.
Jacob possesses a unique blend of creativity and pragmatism. This harmonious fusion of his design and development prowess consistently culminates in the timely delivery of exceptional outcomes.
Jason Somai
Digital Manager - Hydro One
Finished product
Using Figma for design, Visual Studio Code for development, and SharePoint as the CMS, we created a well-researched sustainability web page. The final product aligned with Hydro One's objectives, delivering an engaging and accessible platform to showcase sustainability initiatives.
