Streamlining platforms towards a Single Digital Product experience

Tabcorp reached out to Mantel Group for a 6 month engagement that looked at improving their existing omnichannel digital experience. This project looked at how TAB could continue to acquire new users whilst aligning the different streams of work across the brand's future of web initiatives.

The scope of the work was broken down into two key streams to help support the ongoing transition to cater for the new approach.






Deliverables

  • Responsive Figma component design templates that can be used by the broader design team when developing future product features

  • 12+ AEM component templates and example designs that can be adopted by the client's marketing team

  • Creation of design system library for web platforms





Identifying the way forward

Streamlining the brand's various digital experiences was an aspiration that required thorough planning. It was a goal that required broader conversation across multiple squads and teams to ensure that everyone was across the approach with minimal impact to the existing BAU work.

An audit across TAB's various channels also revealed certain areas that needed to be addressed before we could begin the journey of unifying the digital experience. The existing website was long overdue for a visual uplift and most of the site's SEO pages needed updating to remain relevant to the current audience.

As we began analysing the current state and consulting with relevant stakeholders, we identified two key streams to break down the work at hand:

  1. Developing reusable AEM component templates

  2. Adopting the existing mobile components for responsive platforms

Developing multipurpose design templates

One of the example templates we put together for the Marketing team.


TAB's internal marketing team looks after the acquisition of new users through dynamic SEO strategies, and a key part of that was the Adobe Experience Manager (AEM) platform. The templates that the team were using previously were fairly rigid in structure and did not allow for much visual composition or customisation.

Our team did an assessment of the existing SEO pages to identify opportunities for improvement, ensuring that the new template designs aligned closely with the TAB's branding and allowed for more engaging assets such as video and social media content to be included for better storytelling.

Early wifeframe development of the various SEO page templates.


Each component was custom built by a team of AEM specialists and developers, with our Mantel Group team overseeing QA during the development process. We wanted to ensure we could provide a suite of robust AEM components that empowered the Marketing team to develop attractive yet functional SEO pages for their future campaigns.


Unifying the digital experience

We approached this scope of work by first identifying which layer the components would sit in (global vs squad). Global components are elements that would display across all pages; squad components are specific to their respective pages. This gave us better clarity on the key areas we had to account for (eg header, footer, side nav) and how those components would function across the new single digital experience.

One of the key challenges was also determining the ideal breakpoints that would allow our components to adapt across different device sizes. We went through several rounds of testing and in-depth discussions with the dev team to ensure that our range of breakpoints accommodated for what was already developed for the existing mobile app.

Our team also explored several iterations of the site's navigation structure and engaged users via an unmoderated testing session to identify the best navigation structure for the experience.

The development of the global components was an in-depth process of rigorous rounds of exploration, design, prototyping and feedback sessions to ensure the final product was fit-for-purpose to be deployed across the other design squads in the business.

Our team also assisted with the documentation of the components on Zeroheight, ensuring that the broader design team would have a source to refer to when learning to use the new components.

This project was part of our ongoing relationship with TAB, reach out to us and see how we can help you today!

09/03/2024