Jacob Di Domenico
Case study
Discover how I redesigned Hydro One's contact page for enhanced user experience and efficiency. As the lead designer and developer, I worked closely with stakeholders to create an intuitive interface that prioritizes accessibility. Explore strategic design choices, insights, and measurable outcomes that shaped this successful project.
UX strategy, UI design, web development, prototyping
UX designer, UX developer
Figma, Wrike, Visual Studio Code, Microsoft Sharepoint, HTML, CSS, Javascript
2 months April 2024- June 2024
Intro
As the lead designer and developer, I took on the challenge of redesigning the Hydro One Contact Page to enhance user experience and streamline customer interactions. Collaborating closely with stakeholders and utilizing a suite of design and development tools, I aimed to create a seamless, intuitive interface that meets user needs and business goals.
The project began with an in-depth analysis of the existing contact page, identifying key areas where users faced difficulties. By examining user feedback and utilizing annotations, we uncovered several pain points, including complex navigation, information overload, and poor mobile responsiveness. These insights shaped our approach, emphasizing the need for a user-friendly design that prioritized accessibility and efficiency.
Working closely with stakeholders, we ensured that the redesign aligned with Hydro One's brand identity and business objectives. Regular meetings and feedback sessions facilitated a collaborative environment, allowing us to iterate on designs swiftly and effectively. Utilizing tools like Figma for design, Wrike for project management and Microsoft Visual Studio Code for development we were able to create a robust, responsive contact page that significantly improved the user experience.
Goal
The primary goal of this project was to redesign the contact page to enhance usability, accessibility, and overall user satisfaction. We aimed to create a more intuitive layout, make information easier to find, and integrate features that minimize user frustration, boost engagement, and reduce the volume of calls to the customer support team.
Research insight
The contact page contained a lot of information, but it was not well-organized. Users often had to scroll through long paragraphs or unrelated sections to find what they were looking for. This feedback pointed to the necessity of a more logical information architecture, with clear headings and concise content.
Research insight
A significant number of users had trouble accessing support quickly. They reported that critical contact details, such as phone numbers and email addresses, were buried deep within the page. This indicated a need to prioritize and prominently display essential contact information to reduce the time and effort required to get support.
Research insight
Many users accessed the contact page via mobile devices and found it challenging to navigate. The page was not optimized for smaller screens, leading to poor user experiences on mobile. This insight underscored the importance of implementing a responsive design that ensures functionality and ease of use across all devices.
Research insight
Users frequently reported that the navigation menu was confusing and cluttered, making it difficult to find specific contact information. Many users expressed frustration with having to click through multiple layers to reach their desired page. This insight highlighted the need for a streamlined and intuitive navigation structure.
Design considerations
In redesigning the contact page, several key design considerations were prioritized to ensure an optimal user experience:
Simplified navigation: Streamlining the layout to make finding information effortless. We focused on creating a clear and concise navigation menu with well-defined categories, reducing the number of clicks needed to reach important information. This approach aimed to minimize user frustration and enhance the overall usability of the page.
Accessibility: Ensuring the page complies with WCAG (Web Content Accessibility Guidelines) standards for all users. This involved incorporating features like keyboard navigability, text alternatives for non-text content, and sufficient color contrast. By prioritizing accessibility, we aimed to make the contact page usable for individuals with disabilities, thereby broadening our user base and ensuring inclusiveness.
Responsive design: Creating a mobile-friendly interface for seamless access across devices. Given the increasing number of users accessing the page from mobile devices, it was crucial to design a layout that adapts fluidly to different screen sizes. We implemented responsive design techniques to ensure that the page looks and functions well on desktops, tablets, and smartphones.
Visual hierarchy: Organizing information logically with clear headings and calls to action. We structured the page content to guide users naturally through the information, using typography, spacing, and color to highlight key elements. This approach helps users quickly identify and access the information they need, improving the overall efficiency of the contact page.
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
The new contact page was launched following rigorous testing and feedback iterations. Using Figma for design, Wrike for project management, and Microsoft Visual Studio Code for development, the project was executed efficiently and collaboratively. The final product was integrated into Microsoft SharePoint as the CMS, ensuring a smooth and sustainable deployment process.
Before the official launch, the redesigned contact page underwent extensive testing to ensure functionality, usability, and accessibility. We conducted multiple rounds of usability testing with a diverse group of users, gathering feedback to identify any remaining issues or areas for improvement. This iterative process allowed us to fine-tune the design, addressing user concerns and optimizing the overall experience. Stakeholders were actively involved during this phase, providing valuable insights and helping to ensure that the final product met business objectives.
Once the design and development phases were complete, the focus shifted to integrating the new contact page into the existing infrastructure. Utilizing Microsoft SharePoint as the CMS, we ensured that the deployment process was seamless and that the new page would be easy to maintain and update in the future. Comprehensive documentation was created to support the internal team, detailing the new features and providing guidance on managing the page post-launch. The launch was executed with minimal disruption to users, thanks to careful planning and coordination with all involved parties.
After the launch, we continued to monitor the performance of the new contact page, analyzing user interactions and feedback to ensure it met our goals. We set up analytics tools to track key metrics, such as user engagement, bounce rates, and support requests. This data-driven approach allowed us to make informed decisions about any further enhancements needed. Regular updates and maintenance were planned to keep the page functioning optimally and to adapt to any new user requirements or feedback.
Impact
The impact of the redesigned contact page was significant, demonstrating tangible improvements in user engagement, support efficiency, and overall user satisfaction.
30%
Following the redesign, user interactions with the contact page increased by 30%. This metric reflects a higher level of user engagement, indicating that the improvements made to the page's usability and accessibility successfully attracted and retained user interest.
10%
There was a notable 10% decrease in customer support calls post-redesign. This reduction suggests that users were able to find the information they needed more easily, leading to fewer inquiries and support requests. By enhancing information accessibility and streamlining navigation, the redesigned page effectively addressed user needs and reduced the burden on support teams.
19%
Engagement with links on the contact page saw a significant boost, with a 19% increase in users clicking to explore further resources. This demonstrates the improved clarity and relevance of the links, encouraging users to take desired actions more frequently.
20%
The number of users navigating to the contact page increased by 20%, highlighting the success of the redesign in making the contact page more discoverable and enticing. This metric emphasizes the streamlined user journey and more prominent calls to action across the site.
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
The redesigned Hydro One contact page prioritizes accessibility and efficiency, resulting in an improved user experience and increased engagement. Design decisions, supported by user testing, addressed key user needs.
