Westech Marketing Cloud

Case study
Project intro
Updating a company's internal marketing tools, repairing client relationships, and bringing user-centric thinking to a team.
My role
Senior Product Designer
Images of product design process

Overview

Westech (14 West) is the internal tech company for a larger marketing organization. They provide tools and digital products for a group of marketing companies.

The challenge

Westech brought in a senior product designer to help modernize and update their suite of marketing tools. The clients had been using outdated digital products and were frustrated with their lack of involvement. Essentially tools have been built without any research, testing, or client input and then given to them to use. Not surprisingly these tools didn’t meet their needs and were limiting their marketing efforts.

Their workflow was also fragmented and scattered between multiple tools. WMC (Westech Marketing Cloud) was aiming to replace multiple legacy tools with a single modern product to enhance, modernize, and simplify marketing efforts.

The audience

Westech clients consist of multiple personas and the core user of WMC were marketers and production people. Details on the persona creation process can be found in this case study.

Scope and constraints

There was an urgency to replace the outdated and unstable tools creating a tight timeline. We were also dependent on integrations with other legacy tools for order processing and customer data.

The approach

There was an urgency to replace the outdated and unstable tools creating a tight timeline. We were also dependent on integrations with other legacy tools for order processing and customer data.

Research

The full product team needed a deeper understanding of our clients so we started with research.

I led the charge along with the product manager starting with client interviews and observations. Persona and Journey Map workshops were also run with internal company members first then validated and updated with client research. This helped us both speed up the process and showcase where internal company assumptions were off.  After synthesizing the results we shared the findings in styled personas and a journey map to the full company. The WMC team and other teams reference them frequently helping them understand our client's needs and frustrations.

This research made it obvious the two most frustrating phases in their journey were building the customer experience and analysis. They were struggling with the slow, hard-to-use, and unstable tools plus the fact they had to bounce from tool to tool frequently. This insight informed and drove a lot of our work on WMC.

We also ran workshops with clients to define and prioritize functionality to be included in the MVP. This type of co-collaboration was well received by our clients who had been kept in the dark with previous digital products.
WMC research images

Ideation, planning, and MVP

An updated version of a legacy app had been started previously and we were using that as our foundation. The immediate task was a lightweight rebranding, usability update, and single app Information Architecture. Combining heuristic evaluation findings and results from our research a list of update suggestions was discussed as a team. There was some internal hesitation about switching to side navigation so we did a round of A/B testing and the results were clear that side navigation not only performed better but was far preferred by our clients. Once implemented these updates plus a teaser video to increase awareness were enough for our MVP version to test with a single client.
Navigation testing and video images
As we did more testing and proposed ideas to solve usability issues we quickly ran into issues with the front-end framework. Both in the code and in the design debt from the original components was dramatically slowing the team down and some basic updates were not possible without major refactoring. The design team collaborated on a lightweight design system that could be skinned for each of our company's products. We met frequently with engineer leads during the process to ensure we were being as efficient as possible and anticipating challenges before they came up.

Collaborating with a lead engineer a new front-end framework (Vuetify) was chosen then an update plan was proposed and approved by stakeholders. This update happened alongside regular sprint work for four sprints and included tons of close collaboration with the small team of engineers working on it. Included in the update were improvements on all our main sections and we were able to roll in a lot of waiting Ux updates including an updating Journey Builder. More details on that Journey Builder later.
A few update examples
Similar content was grouped into sections and centered in our "create/edit" screens to increase input speed and allow users to skim faster. Visual buttons and content previews were also used.

After some research we identified the key metrics our clients needed and suggested a flexible metrics section.

Save and other key actions were given expected locations, priorities, and feedback.
WMC update example screens

Testing, feedback, and iterations

As we onboarded more clients to be our early adopters and set up a regular feedback schedule. Starting with weekly check-ins we would share progress, and new ideas, and collect feedback from our early adopter clients. Links to our feedback portal and roadmap were included in the product to capture more feedback and requests. Hotjar was installed so we could explore potential issues using heatmaps and recordings.

Quarterly usability sessions were run and the findings were shared with the full team. We also made sure to include a non-design team member in each session to help with notes but mainly to observe and gain more insight into how our clients worked in the product. This process allowed us to continually collect and synthesize client feedback, discover improvement areas, and provide iteration ideas.
Usability testing docs and findings presentation
A few update examples
We quickly learned our clients had a hard time finding specific items on our listing screen. Through multiple ideas and iterations we settled on a date range with quick views, more robust searching, filtering, and active filter status.

Through a period of rushed development a feature was launched with a known issue we thought could be a frustration for people. Our full screen modals for content creation and journey building included a save button. Due to backend complexity a sizable rework was needed to make this save button save the entire entity. This meant people were confused and frustrated when they had to save in the modal and on the entity "create/edit" screen. We collected lots of client feedback and recordings around this bug and proved it was slowing them down. This info helped reprioritize the issue and clients were thrilled when it was updated.

New feature workflow

A pitfall of previous products at the company was taking feature requests at face value instead of uncovering the core need. One of my missions was helping the product team get more comfortable slowing down, asking why, and taking the time to define the core need. Leading by example, asking more questions, facilitating ideation sessions, involving others in research, and more all helped grow this mentality in the team.

Depending on the feature size and complexity we had multiple paths. Larger and more complex ones would go through a feature-shaping workshop. Smaller features or enhancements only needed minor research to define. Our process was focused on collaboration and we included engineers early and often. These diverse ideas created stronger solutions. Once ideas were solidified enough within the product team we would test with clients in either full usability testing sessions (moderated and/or unmoderated), mini testing chats, or client feedback sessions. This allowed us to iterate on ideas to meet client needs better before starting to build them.

Feature development

Another benefit of early and often collaboration with engineers is that hand-off was much smoother. We stopped calling it a hand-off completely but that is another topic covered in this article.
Features were organized and prototyped following our Figma file structure then documented and dropped into Jira or ProdPad along with a walkthrough video explaining the functionality, animations, and anything else necessary.

Once development began I was always open for quick chats and working sessions with engineers. These chats fixed issues well before being deployed, reduced review time, and again strengthened the solution. We created an environment where engineers felt comfortable challenging the design and speaking up when something didn’t sit well with them.

Outcome and learnings

All clients have been onboarded and we’ve received a lot of positive client feedback directly to our team, through surveys, and from stakeholders.

One of our success metrics is our Product Perception Survey. Twice a year we send it to our clients. Each product has an overall score which is the cumulative result of individual questions around overall satisfaction, ease of use, compared to other tools, and co-creation.

The results of our first survey were clear there was improvement over our legacy product:

Average overall score per product

2/10

Legacy E-Comm Product

8/10

WMC
Some client feedback we've received
“WMC is the best example of WT to affiliate collaboration on a new product… These products are 10x better and more usable when these two groups with different expertise work together.”
"The UI is really straightforward and streamlined. Simplified and intuitive."
“This has been the best new product integration I have been a part of…”
“I love this app! Compared to the others, it's snappier. Everything seems to flow quicker but not too much that it's jarring."
Survey screens and findings
What we learned
We’ve learned that repairing a damaged client relationship is possible with involvement, transparency, co-creation, and research. Other legacy systems limited a lot of our solutions so we started involving other teams earlier in our process.

A major lesson learned was to be more inclusive with all clients. We spent too much time in the early days focusing primarily on our domestic clients (early adopters) and the results were painfully clear in our product perception survey. Our domestic clients rated us an 8/10 on our co-creation question while the international groups were a 4/10.

These findings were highlighted to the WMC team and we decided to start an international client check-in and include them in more usability testing sessions. The next time we ran our product perception survey their response on co-creation went from a 4 to a 6/10.

Details and examples

Journey Builder

A major feature of WMC was the Journey Builder where our clients could set up a customer marketing journey. We inherited a slightly updated version from a legacy app that only supported half the functionality we needed and have a ton of usability issues. We evolved it over many iterations and it went on quite the transformative “journey”. Pun intended.
Journey builder before and after screens
Research and planning
We discovered some journey building pain points during our journey map and persona research. To round this learning out we ran usability testing sessions on the existing journey builder. We combined these findings with the future thinking feature list from stakeholders and our research of industry leading journey building tools. Our overall challenge was to provide an expected, natural, and clear journey building experience that supported the essential marketing functionalities in WMC.
Ideation and testing
We wanted to modernize the experience while making it easier to build and follow complex journeys. We also didn’t want too drastic of a change so our clients would still feel comfortable and confident.

Exploring multiple options and sharing ideas early and often with the design team, product team, and engineers we worked up to a prototype that could be tested with clients. We settled on a full screen drag and drop interface with color-coded journey step “blocks”. The structure was designed to be a scalable framework that would support the more complex future features like merging journeys, dynamic content, and new journey step “block” types. We ran multiple usability testing sessions and found no major issues but uncovered a lot of enhancements and improvement opportunities. The findings were shared with the team and we decided which improvements would be worked into the MVP version and which would wait until later sprints. Our new Journey Builder launched alongside our updated front-end framework as the first major version update to WMC.
Continuous testing and iterations
We collected feedback on the journey builder every other week from our client syncs and ran usability testing sessions. These findings were shared with the WMC team, prioritized, and brought into the backlog to go through our design process.

One client had a lot of feedback and concerns related to their workflow. We designed and ran a workshop to collect these concerns and gather feedback on upcoming Journey Builder enhancement ideas.
Journey builder planning images
Dynamic content ideation
One pain point discovered in our client journey map was not being able to serve dynamic content to customers allowing more personal and relevant content. We created a task to explore solutions to this challenge. We defined the need, experience principles, researched competitors with great experiences, and ideated on solutions. Collaborating with engineers, stakeholders, and our internal CDP product team we settled on an idea to add filters within the journey builder to split traffic based on customer profile data. This connection also doubles as a foundation for future AI/ML marketing decisions within the journey.
Journey metrics
Another pain point was the lack of metrics across the full customer journey. The collaborative and tested solution is shown here.
Journey builder dynamic content planning and screens
Outcomes and learnings
The client feedback on this updated journey builder was overwhelmingly positive. They rated their comfort level in switching to the updated version as 8/10.

We learned our MVP was a bit too light and by skipping features like merging journeys we increased frustration and time to build complex journeys. We assumed our early adopters would build simple journeys and we would have implemented these enhanced features by the time they were building more complex versions. This assumption was wrong and we had to reprioritize journey enhancements a few times creating client frustrations.

We managed these frustrations in a few ways. We ensured they knew their frustrations were heard and taken seriously and involved them in feature prioritization. This allowed them to vote on features that were most important to them. We also designed a lighter-weight solution to reduce the manual work creating complex journeys. A copy & paste node feature was designed and tested that would speed up their workflow until we implemented the full merge journey functionality. By collaborating with engineers again we designed this solution so it reduced the engineering estimate by 20 story points.

Cart options

Clients had been struggling with an outdated and unnecessarily manual way of adding items to their order pages. We updated it to support a more focused, flexible, and faster workflow.
Cart option screens

Version control

All content within WMC supported a simple and clear version control, something the clients had been asking for.
Version control screens