C&D Technologies and Trojan Battery Company Redesign
In addition to experience strategy and experience design, I also partnered with the client to provide content strategy, content development direction and copywriting.
Overview
C&D Technologies and Trojan Battery Company are global leaders in electrified battery solutions industry. The two companies had recently merged in 2019 and wanted a separate, yet unified design system and overall user experience between the two sites.
For the first phase of the project, C&D Technologies and Trojan Battery wanted to migrate to Contentful for more consistent, faster sites. The two B2B companies wanted to emphasize being modern leaders in the market while providing superior experience compared to their competitors.
C&D Technologies and Trojan Battery Company are global leaders in electrified battery solutions industry. The two companies had recently merged in 2019 and wanted a separate, yet unified design system and overall user experience between the two sites.
For the first phase of the project, C&D Technologies and Trojan Battery wanted to migrate to Contentful for more consistent, faster sites. The two B2B companies wanted to emphasize being modern leaders in the market while providing superior experience compared to their competitors.
Main Role: User Experience Designer, UX Researcher, Digital Strategist
Additional Role: Content Strategist
Time Frame: 9 months
Tools: Sketch, Contentful, GatherContent
Main Role: User Experience Designer, UX Researcher, Digital Strategist
Additional Role: Content Strategist
Time Frame: 9 months
Tools: Sketch, Contentful, GatherContent
Understanding the problem
Before Valtech was hired to redesign the sites, the client conducted user research, interviewed stakeholders, and created user personas through a different agency. I reviewed this documentation to understand user goals and uncover the pain points with the existing user journey – with most issues for users revolving around the product architecture.
Throughout the project I conducted discovery sessions to garner UX requirements through discussions with the client, live wireframing, reassessing page types and components, and analyzing competitors. This helped better define pain points and prioritize sections of each delivery of the site.
Before Valtech was hired to redesign the sites, the client conducted user research, interviewed stakeholders, and created user personas through a different agency. I reviewed this documentation to understand user goals and uncover the pain points with the existing user journey – with most issues for users revolving around the product architecture.
Throughout the project I conducted discovery sessions to garner UX requirements through discussions with the client, live wireframing, reassessing page types and components, and analyzing competitors. This helped better define pain points and prioritize sections of each delivery of the site.
Wireframing a solution
Focusing on the product architecture issues identified, I worked towards addressing these pains by coming up with potential solutions:
Creating product listing pages that allow users to filter products by application, industry, and other facets
Prioritizing the most important information for the key audience groups on the product detail pages while providing pathways to access more detailed information
Establishing new information architecture structures for both brands that simplified navigation language, improved wayfinding, and standardized content types (working in conjunction on the Sitemap and Content Development Plan)
I quickly mocked up wireframes to gather feedback from our internal teams and the client on the overall layout and structure of the products section of the site.
Focusing on the product architecture issues identified, I worked towards addressing these pains by coming up with potential solutions:
Creating product listing pages that allow users to filter products by application, industry, and other facets
Prioritizing the most important information for the key audience groups on the product detail pages while providing pathways to access more detailed information
Establishing new information architecture structures for both brands that simplified navigation language, improved wayfinding, and standardized content types (working in conjunction on the Sitemap and Content Development Plan)
I quickly mocked up wireframes to gather feedback from our internal teams and the client on the overall layout and structure of the products section of the site.
From wireframes to designs
In addition to the wireframes, I created detailed annotations that included various requirements including description, user input, responsive behavior, content management, accessibility, and functional notes. I provided the wireframes and annotations for the design team to create high-fidelity mockups to be delivered to the client for review. Additionally, throughout the products delivery, I conducted a UX review of front-end and back-end tickets, as needed, to ensure it was aligned with the designs and requirements before it went live.
In addition to the wireframes, I created detailed annotations that included various requirements including description, user input, responsive behavior, content management, accessibility, and functional notes. I provided the wireframes and annotations for the design team to create high-fidelity mockups to be delivered to the client for review. Additionally, throughout the products delivery, I conducted a UX review of front-end and back-end tickets, as needed, to ensure it was aligned with the designs and requirements before it went live.
Outcomes and takeaways
We achieved a highly functional, modern site that the client is extremely happy with. Through our updated designs, we connected product information and documentation to streamline the specification and bidding process for users like purchasing agents who oftentimes would select competitors because it was easier to find their product information. In an upcoming phase of work, it would be ideal to test the product architecture with purchasing agents.
We were fortunate to test some areas of the site like the megamenu around opening and closing for users. It would be great to continue to test and improve upon more current features while expanding and building new features in the new phases.
We achieved a highly functional, modern site that the client is extremely happy with. Through our updated designs, we connected product information and documentation to streamline the specification and bidding process for users like purchasing agents who oftentimes would select competitors because it was easier to find their product information. In an upcoming phase of work, it would be ideal to test the product architecture with purchasing agents.
We were fortunate to test some areas of the site like the megamenu around opening and closing for users. It would be great to continue to test and improve upon more current features while expanding and building new features in the new phases.
