The Money and Pensions service is an office depending on the Governmet of UK with the goal of providing fair and unbiased information regarding money pensions and savings.
It is created to merge the duties of three current services: Pension Wise, The Pensions Advisory Service, and the Money Advice Service. The goal is to provide a single service with a holisitc approach to give financial advice through different life events such as buying a house, having a baby or getting divorced.
Sky is a leading telecommunications and television company in the United Kingdom. The core of their TV business revolves around making the most efficient use of the Intelectual Properties that they have licensed. The Digital Supply Chain is the set of internal operations that takes these IPs from the Metadata and Rights Management, going through Planning, Scheduling and Categorizing both Linear TV and Video on Demand, up until the Merchandising and Distribution of that content.
As a result of this restructuring, NTT Data was comisioned with deploying a new Content Management System with the technology provided by the Adobe Experience Manager. I was the designer for this team which was in charge of delivering a running platform, a set of components and a set user profiles and workfows that would facilitate the editing preexisting content and new.
In this context, the biggest challenge was to provide a functioning platform with a flexible set of components that enabled development, while leaving flexibility to be updated as the new brand or the UX of the site gets developed and validated in the future. Our aim was to provide a good scaffolding so they can create a great building.
We worked on user journey mapping to prioritize the key elements needed to set the correct scope for the work of the developers. Although the final sitemap would be covering a hierarchy for thousands of articles spread over sixty menu entries in up to 3 level menus, functionally we were able to narrow all those down to 8 page types. By taking advantage of the component system that AEM provides, we were reduced the development to just three types of pages: a Home Page can be customized to provide highlighted links to selected content, a Content Page that adapts to all the other content types by packaging different groups of components in several templates, and a specific Search Results Page
After these analysis we started wireframing the structure for the two main templates that MaPS would need. We tried to show the flexibility of this component system so we could get stakeholders on board with the proposal while laying out the foundations so the developers could start planning the implementation.
Once the direction was agreed, the Design work was focused around executing a temporary design that could be implemented by the NTT Data developers, while making it easy to update once the final brand design was signed off. This required building a system that started with the most basic elements, such as typoraphy and color. From there, we designed and provided specifications to the basic components, such as buttons or input boxes. Once this was ready, we were able to start providing designs for more complex elements such as the global navigations or the financial calculators that required a more 'ad hoc' design and implementation.
One of the key elements of the old and new websites was a set of up to sixty financial calculators, covering everything from mortgages to pensions. As part of the scope of this project we designed and implemented the most popular one, the Baby Costs Calculator. Through the design of the user flows we could get the behavior always with reusability in mind so the new calculators could be built with the same system in the future.
This was a challenging project that required a very tactical aproach to design. With the final Brand Design as our biggest bottle neck, we had to maneouver around it to make sure that the project could be delivered in budget while making sure that the system we left behind covered the needs of the editors, first, and eventually the users.
By providing a temporary design, priming on the structure rather than on its final look we were able to put the new CMS in place, leaving the editors and developers of MaPS with a tool that they can use and extend to cover for future needs.
The resulting product provided enough flexibility to adapt for the future while relying on a solid structure that made more efficient and effective the design and development of these future capabilities.
By applying this systematic approach and taking advantage of tools like Figma, we generated a palette of components over repeatable patterns.
This also had an impact in facilitating the work of other designers when working on concepts to extend this tool to other areas of the Supply Chain.
The focus of this design was not so much on the final users of the website. It was about providing content editors and designers with the right tool to make sure the website will fulfill the user's need when all the pieces are in place.
Since the design was component oriented, the work produced by the developers was also of a higher quality.
They could generate an equivalent library, translating the components from Figma to React. With this we ensured that they were looking at the modules and panels to build the different views, allowing higher reusability than just focusing on implementing the features of every screen.