✨ Consulting Pages - Reusable Components

[bettybondoc]

cc @wicksipedia @adamcogan @uly1 @miichaelsmedley @isaaclombardssw @louisroa8189

Is your feature request related to a problem? Please describe.

Our website has over 50 Consulting Pages targeting diverse markets, but all are constrained by a single, inflexible template that makes changes affect all pages and limits layout flexibility. This prevents us from tailoring content for different user groups, leading to audience misalignment and cluttered pages due to unnecessary sections. Dependence on designers and developers for most changes causes inefficient updates, slowing down our ability to refresh content. Additionally, content editors resort to ad-hoc solutions (see: Related Technologies), resulting in inconsistencies and a poor user experience.

Describe the solution you'd like

We will redesign our service pages to achieve a cleaner, modern look, making them more appealing to users. By developing customizable components, content editors can use only what they need and rearrange elements freely, leveraging TinaCMS for easy editing without heavy reliance on designers or developers. This approach allows for flexible A/B testing of different page flows while maintaining brand consistency through guidelines rather than rigid templates. To ensure quality and adherence to design standards, we will implement a structured approval process requiring designers to review and approve changes made by content editors.

Describe alternatives you've considered

A. Do Nothing - Maintaining the Single Template Approach:

• Pros: Requires no additional development effort; keeps a uniform look across all pages.
• Cons: Does not address the issues of inflexibility, audience misalignment, content clutter, and inefficient updates. Continues to hinder our ability to tailor content to different user groups.

B. Developing Multiple Templates:

• Pros: Allows some level of customization for different services or audiences.
• Cons: Increases complexity and maintenance effort, as each template would require separate updates. Still lacks the flexibility of rearranging components freely and doesn't fully empower content editors.

Implementation Plan

• Build core components 🛠️
  • Upfront Development Effort
  • Note: To build a page, all components except the Comparison are required initially
• Parallel usage with existing templates 🔄
  • New components will be used alongside existing templates
  • Content editors can choose between the current one-page template or the new reusable blocks
  • Benefit - Allows for gradual adoption without disrupting current workflows
• Gradual migration of pages 🚧
  • Begin with the top 5 high-traffic service pages
  • Slowly migrate additional pages based on importance and traffic
• Modular addition of new components ➕
  • When new needs arise (e.g., a unique component for a UX page), book a designer to create the new component
  • A developer will then implement it into the system

To Do

• Create a PBI for each component

Additional context

• Watch the video: SSW.Website - Consulting Pages-20241114_172610-Meeting Recording.mp4
• See the presentation for the full context: SSW.Website Reusable Components
• Design Library - Components (Figma)
• Consulting Pages - Mockups (Figma)