Productcaster Suite


2018

Creating a new design system and updating two products to turn existing legacy software into an industry-ready platform.


Forecaster’s new welcome dashboard




Introduction

This was a complex project to redevelop two legacy in-house marketing products to be released publicly under the Ecommerce platform Productcaster, aimed at marketers and agencies.

Forecaster is a bidding and optimisation for page search listings (PPC and PLAs) and FeedManager optimises and transforms shopping feeds from a retailer’s website backend or platform, to a number of marketing platforms.

There were a few unexpected challenges in this project and it remains the one project which for me emphasises the importance of a solid understanding of user expectation, wants and needs.




FEEDMANAGERThe original UI for managing outgoing feeds
FEEDMANAGERMy redesign in card view, with status updates and quick access shortcuts



Team

I was invited to join this project as a UI designer, swapping out existing designs for a refreshed UI. As the project progressed however, I voiced concerns about the lack of user research, personas and missions, the complex user flow required for completing tasks and the disparity between the design systems for the two products. This resulted in me becoming heavily more involved in the project (and in hindsight something I should have flagged before joining) and adopting a hybrid UX / product owner role.

With this being an internal project all stakeholders were agency employees, although from different areas of the business. The project had a very short time frame, so in order to meet expectations the project team had been increased, unusually including a group of developers in the strategy and design stages, and also senior stakeholders such as the CTO and CMO.

Crucially a red flag was that the two products had not yet been considered as products and didn’t have product managers or owners, with strategy and roadmaps being decided by the developers.



Testing interaction states for the primary CTA
Testing toggle states



Tools


Actually used

Design workshop

Adobe XD

Axure

Usability testing


Ideally, we would have used

Competitor audit

Porters 5 forces

User interviews

Ethnography / Netnography

Personas & user stories

Prototyping




FORECASTERThe original interface of the Budgets overview
FORECASTERThe updated interface with the design system and ‘jelly bean’ icons



Discovery

With this being a product led project versus a market led project, the core team had mostly bypassed the discovery and definition phases in favour of using the agency’s own use of the products, as user stories/missions.

My concern was that even with the agency’s experience of the products, the marketing teams currently needed to ask developers to complete the tasks, far from the goal of marketers themselves being able to use the product on their own. It was a real challenge to get the core team to see this from the end user’s view point.

Again, because of the lack of research, personas and use cases developing the strategy behind the information architecture required heavy compromise; I preferred clear naming conventions of functions and processes whereas the CMO and CTO preferred marketing orientated naming conventions.




FORECASTER I decided to give a visual identity to the three different ways a PPC budget could be setThese ‘jelly beans’ tokens also pull through to the user's reports



Solution

Originally, my task was to just refresh the existing UI for both products separately, but with the concerns I raised about usability of platform, I was granted some additional time to conduct a small amount of user research. I conducted usability tests, interviewed a small sample of users that fit in the hypothetical persona group and audited competitive platforms.

After sharing the results of my short analysis, the team agreed to move away from the ‘like for like’ UI refresh and revisit the importance of each product’s functionality for the end user and redevelop the task flows.

I highlighted the design systems of both the Google 360 Marketing platforms and the Adobe Creative Cloud Suites as leaders of product suite design and integration, and this served as my reasoning that the two products should share a design language (initially senior stakeholders had wanted two different identities).

My goal for the design was simplicity and transparency; I wanted the products to communicate its processes to the user; what it was doing, why it was doing it, and also raise awareness of any issues be aware of. The simplified IA along with the task orientated navigation clearly show the user where they are in the platform, and what actions they can complete here. The introduction of status indicators along with the card design allowed for a simple overview and provided timely key actions for the user.

Ultimately, I believe I created a fluid design system, with structures and components that adapt to a variety of layouts, flows and products.




FEEDMANAGERThe original in-house UI for managing outgoing feeds
FEEDMANAGERMy redesign in card view, with status updates and quick access shortcuts



Delivery

I delivered a new design system for the platform, plus two prototypes highlighting the new IA and user flows for each product, albeit using a significantly extended timeframe (which was approved beforehand).

I found this a very challenging project, but it was a blessing in disguise; it served as a silver lining by further emphasising to the agency the need of UX research and strategy early in a product design project.