The Challenge:

PwC.com faced significant challenges due to a decentralized approach to page creation. Many pages were built by non-designers directly with developers, bypassing UX and design oversight. This led to:

  • Inconsistent Design: Pages lacked cohesion, with varying aesthetics and limited user interface considerations.
  • Poor Performance: High bounce rates, low engagement metrics, and suboptimal mobile responsiveness.
  • Stakeholder-Centric Approach: Pages prioritized stakeholder content over user needs, often serving as static repositories rather than engaging, user-friendly platforms.

Metrics revealed the urgency of these issues:

  • High bounce rates indicated users weren’t engaging deeply.
  • Mobile and tablet compatibility issues undermined usability on smaller devices.

The existing Adobe Experience Manager (AEM) implementation offered tools like tab systems and CTAs, but these were underutilized due to a lack of standardization and design system adoption.

The Approach:

    1. Centralizing UX Strategy:
      Ryan Ganley led a transformation to standardize the design and development workflow across PwC.com, focusing on creating a scalable, user-centered design system.
    2. Developing the pwc.com-UI Kit using Adobe XD and CC Libraries
      Ryan conceptualized and implemented a modular design system to unify and streamline page creation:

      • Component-Based Design: Built reusable components in XD such as tabbed content sections, responsive CTAs, and columned layouts optimized for AEM.
      • Functional Prototypes: High-fidelity wireframes were designed to reflect real-world constraints, including character limits, image dimensions, and responsive behavior.
      • Design Consistency: Introduced standardized color palettes, typography, and responsive templates that aligned with PwC’s brand and AEM’s technical constraints.
    3. Iterative Collaboration:
      To streamline the workflow:

      • Wireframes and prototypes were shared early and iteratively with stakeholders using Adobe XD.
      • Components included interactive elements to simulate behavior, such as text overflow indicators and responsive resizing previews, enabling realistic stakeholder reviews.
LIVE DEMO

Training and Implementation:

    • Ryan trained a core team of designers on Adobe XD, emphasizing its design library and component systems.
    • Advocated for cross-functional collaboration, ensuring developers and account managers could easily implement designs without extensive custom coding.
    • Introduced the Adobe XD Coaching Program, empowering global teams to adopt the tools and processes efficiently.
    • Ryan also developed a style guide for all US Case Study projects

Results:

Quantifiable Success:

  • Enhanced Engagement: Improved usability metrics, including reduced bounce rates and increased time on page.
  • Improved Efficiency: The modular system halved the average time needed to design and develop new pages.

Operational Impact:

  • Global Adoption: The pwc.com-UI Kit became a critical tool not only in the US but also internationally, standardizing the website’s design approach across regions.
  • Scalable Growth: The system allowed for rapid deployment of new pages and campaigns, reducing redundancies and ensuring design consistency.

Recognition:

PwC.com’s improved design and functionality received positive feedback internally and externally, cementing the design system as a long-term solution.

The pwc.com-UI Kit remains in use years later, evolving with new needs and technologies.

Reflection:

This initiative showcased the importance of integrating user-focused design systems with technical capabilities. By prioritizing scalable tools, realistic workflows, and stakeholder education, Ryan transformed portions of PwC.com into a cohesive, engaging digital platform that continues to deliver results.