CMS Migrations
Role: UX/UI Designer
Impact: Created a scalable system that enables marketing and engineering teams to work more efficiently and reduces internal project bottlenecking
OVERVIEW
Project Goals
Successfully migrate Hootsuite.com from Craft to Contentful and, after acquiring Talkwalker, successfully migrate Talkwalker.com from Hubspot to Contentful.
Create a foundational ecosystem within the CMS for templated page builds that allows marketing teams (Webinars, Blog, Case Studies) to be self-sufficient in making content for the website.
Challenges
A third-party vendor was also implementing a redesign to the website, adding a layer of complexity to the migration work
While the entire CMS was being migrated from Hootsuite.com to Contentful, a third-party vendor was working in tandem to fully reband the website. The components and layouts the vendor provided to me proved inaccessible and inflexible. Because of these challenges, I would need to coordinate closely with Engineering ensure that all of the migrated components and assets were WCAG AA compliant whilst staying true to the rebrand.
New components needed to be made, and older ones reworked to accommodate integrating another website into our existing system
For the Talkwalker migration, because the desired outcome was for Talkwalker.com to sit in the same system as Hootsuite.com, components needed to be mapped or reworked entirely to fit into the Hootsuite ecosystem.
Both CMSs functioned differently fundamentally, and when migrating a website to a headless CMS, it is essential to build a system and components with the architecture in mind
EXECUTION
Content Model
Working with a strategist from the Web team, we built a content model for templated page layouts that would ultimately enable marketing teams to build their own web pages. Building this content model eliminated a bottleneck that would have come from triaging high volumes of pages through the web team. I would then create components and page layouts that would reflect the requirements in the content model.
Directly impacted teams include: Webinars team, Blog team, Events team, and Case Studies team
Style Mapping
To have a single source of truth for both Marketing and Engineering teams to refer to, I created style maps with existing syntax. These style maps alleviate any discrepancies regardless of whether or not a user creates a page for Hootsuite or Talkwalker. Primary, secondary, and tertiary styles were mapped accordingly for CTAs and background colours, and general architecture overrode legacy Talkwalker UI.
High-Fidelity Wireframes
For the Talkwalker migration, I created high-fidelity wireframes of high-level Talkwalker web pages that could be used for reference, copy changes, page builds, and collaborative efforts for future campaigns and projects. Any and all new page builds for Talkwalker would stem from this initial foundational work.
KEY TAKEAWAYS
Cohesion Across Customer Channels
Arguably, one of the best outcomes to come out of all the CMS migration work is the unified experience for users. By working within a well designed system of components, there are fewer friction points for users to experience at any point during their journey on the website. Building familiarity with page structures and components ultimately builds trust in both the product and the experience with the brand.
Increased Productivity
Although the project required months worth of planning and work, the CMS migration enabled us to created templated environments for various other marketing teams. It also enabled page builders within the web team to have sandbox environments to test new page layouts and new components. This ability to sandbox directly correlated to those other teams being able to produce and ship their campaigns at least 20% faster since they no longer needed to go through the Web team for triaging and publishing. In turn, this also allowed projects specific to the web team to stay on track with meeting deadlines and stakeholder expectations.