About the project
During my time at Else, I had the opportunity to work in an embedded team at T. Rowe Price, a global investment management firm.
The marketing teams at T. Rowe rely on running large advertising campaigns to attract a variety of investors to invest in their products. We built a toolkit to allow the marketing teams to craft their own campaign landing pages, accompanied by a playbook to guide teams on best practices.
I was leading the visual design on this project from late 2019 to mid-2020, collaborating closely with a lead UX designer who was in charge of the overall user experience. While we worked together on most aspects of the project, I was solely responsible for the visual direction, building systematic components, and communicating with stakeholders from the global marketing teams across EMEA, APAC, and North America.
I also played a key role in developing a new design language and methodology for component creation at T. Rowe. This was a significant milestone in establishing an enterprise-wide design system and my contributions were influential in shaping future design initiatives at the firm.
Problem
Expensive microsites
When building a landing page for a campaign, the marketing teams had two options: microsites or legacy templates.
The stand-alone microsites were built by external agencies with huge spin-up and overhead costs. Furthermore, these microsites were disconnected from the T. Rowe CMS and CRM.
Inflexible, non-responsive, illegible, inaccessible templates
The other option was to resort to utilising legacy templates from the current, dated T. Rowe website, historically intended for ‘Collections’ — an editorial curated selection of their own Insight article links and Fund links. These low-spec pages were very inflexible, non-responsive, and often forcing the publishing team to use workarounds, often sacrificing elements such as accessibility.
Lack of performance tracking
The legacy template had little way to track the performance of the campaign.
Underwhelming destination
These pages were being used as the intended destination for substantial enterprise-level advertising budgets, but the big reveal at the end was underwhelming, in comparison to the design in the journey leading up to it.
Duplicating components for each variant
Historically, T. Rowe would create new near-duplicate versions of each component, as each new variation or requirement came in. This replication was obviously costly to the business, but also made it hard for teams, who did want to reuse components, hard to choose the most appropriate.
The challenges and opportunities
No, you’re not able to talk to end users
T. Rowe is in the early stages of digital transformation, and its’ design maturity shows. As an example, there has always been a barrier to the end user, whether it’s financial advisors or institutional investors, we’ve always struggled to gain access.
A global company
As a global company, T. Rowe Price needed a solution that could meet the unique localisation needs of its diverse user base. One important aspect of this was ensuring that the design included an additional typeface for languages such as Chinese, Japanese, and Korean.
‘No dev required’ attitude
As with many places, development capacity was limited, so we had to be considerate with our design choices, working with as much existing code as we could do. The release would also be limited, so defining an MVP would be crucial.
Expand the visual design language
Due to the low design maturity at T. Rowe, we thought that the work we did here would expand TRP’s visual language into new areas and steer the visual language for the future.
Outcome-oriented campaign user journeys
We put together user journeys and flows for campaigns, that were more oriented toward conversion outcomes, something which the existing solution had been particularly weak on. These were highly influential for the campaign archetypes that were developed later.
Campaign best practice & landscape/lateral review
Several exercises were done to better understand the competitor landscape as well as to establish a sense of the various business and departmental work streams associated with planning, creating and deploying campaigns.
Similarly, data analytics is still in its early days at T. Rowe, and our benchmark, UK Financial Intermediary, lacked the high volume needed to make robust hypotheses.
The lead UX designer worked on the research for campaign best practice, then we worked together on the landscape & lateral review together.
We’re unable to talk to users
Although we haven't had the opportunity to consult with financial advisors or institutional investors, we have been able to gather valuable insights from our internal teams. In particular, the marketing and publishing teams have provided crucial information that has guided our decision-making process.
Given the poor performance of the current solution, we were confident that any improvements we made would have a significant impact. We were able to draw on our professional experience to make informed design decisions.
Through this project, I gained a deeper understanding of risk management. Our confidence in the success of our redesign was bolstered by the fact that campaign landing pages are a widely used design pattern. We didn't need to reinvent the wheel, but rather build upon existing best practices.
Marketing teams requirements…
We conducted requirements gathering workshops with the marketing teams around the world. We extracted specifics insights that would help us formulate some templates.
It became apparent that each marketing team had unique requirements, which made it difficult to create a fixed set of templates. As a result, we needed to ensure that our templates were flexible enough to accommodate these variations. However, despite these differences, we identified that each team shared similar campaign goals.
Given these similarities, we sought to apply a structured approach to the campaigns. By doing so, we aimed to provide a framework that could be adapted to meet the specific needs of each marketing team
Publishing team workshops
We regularly collaborated with the publishing team to gain insights into how they built campaign landing pages with the existing experience.
During these sessions, the publishing team took us through the entire process and helped us identify pain points both in the process itself and in the CMS. This provided us with a more comprehensive understanding of the challenges and enabled us to develop potential solutions that could improve their workflow.
Four campaign archetypes
Through research and discovery, we identified four principle campaign types. All with conversion at their focus, but each with slightly different goal.
Awareness, consideration & decision
We combined the 2-5-10 model with in-page zoning to help establish a system for creating emphasis within each campaign landing page.
Zones represented the likely mindset of the visitor, and where they likely were in the customer lifecycle. This framework would be usable via a mix of templating and guidance in the playbook.
While I didn't lead this aspect of the project, I gained valuable insights into the importance of in-page zoning and the importance in this instance.
A bit like Squarespace, but inside Adobe Experience Manager
Our solution then was four campaign archetypes, but in order to provide our teams with the necessary flexibility, we recognised the need to design a set of interchangeable components that could be seamlessly integrated into any page. It was essential that each component was capable of functioning effectively when placed next to any other.
Together with the UX designer, we began wireframing the first campaign archetype. During this process, we carefully analysed the components we created and identified opportunities to consolidate them.
We also created variants of components too, this was a big enabler to reducing the amount of components needed. I learned a lot here about the inner workings of how components links up with the CMS, and how content operations is effected too.
Impactful components, for maximum conversion
Whilst wireframing the landing pages, it became evident that the headers and conversion modules were the key elements that needed to be most impactful. The headers were crucial in providing a unique identity to each archetype, while the conversion modules played a critical role in achieving the ultimate goal of the campaigns. As a result, I made a conscious decision to prioritise the design of these elements during the subsequent design stage.
Keep users in the campaign journey
We recognised the importance of creating a distinct and separate feel for the campaign pages, which would allow users to focus solely on the message conveyed through the campaign story. To achieve this, we minimised the use of links to other areas of the T. Rowe site, including only where it was deemed necessary. This approach ensured that users remained engaged with the campaign content without being distracted by other site elements.
Branding aware, not branding adherent
While remaining aware of the T. Rowe Price branding, we adopted a design language that was not strictly bound by branding guidelines. This approach gave us the freedom to create a visually compelling and coherent new design language, without necessarily conforming to the look and feel of existing TRP sites.
It was great because we didn't have to stick to the old T. Rowe site style which feels outdated.
Responsive design is new to T.Rowe Price
The most valuable part of the design was the responsive nature. As majority of the traffic comes via social, mainly Linkedin, I had to ensure the storytelling was as compelling on all devices.
Automated image library
When I began designing the headers and conversion components, I realised that using the right imagery would be crucial in telling the campaign story effectively.
T. Rowe Price typically uses stock images for their campaigns, but I found that the current image library was too limited. To give the publishing teams more control, we suggested expanding the library and introducing some automation to make it easier to browse and choose better quality images.
We worked closely with the marketing and publishing teams, and it was a great learning experience for me to see how imagery works on a larger scale.
To help the publishing teams choose better quality images, I defined two types, textural images and content images.
Stakeholders check-ins
Regular check-in with the marketing teams enabled us to initially understand the scope of the campaigns and gather requirements for the project.
At first led by the UX lead, but as we progressed into the design phase, I conducted the sessions. During this phase, I presented our progress and demonstrated the design capabilities as an exercise to get buy-in and build excitement — which by the sounds of their voices, and their praise — was attained. This was also an opportunity for the teams to feed back and where we attained some valuable insights that had previously gone unsaid.
A smarter system. An empowered team.
As part of our push to help modernise the approach, reduce the demands on an already over-stretched dev team, and put publishing capabilities back in the hands of the publishing team, we focused on building flexible components, each capable of supporting multiple uses, themes, layouts and styles.
Each component adapts dynamically based on the presence of optional content fields and style options.
AA accessibility
Whatever imagery, video or text the publishing teams uploaded, we had to adhere to the AA accessibility standards. Sometimes compromising on more elegant solutions, we were still able to achieve the dramatic moments we hoped for.
Japanese, German, Italian, no problem
Each component was tested in both latin and non-latin typefaces. Not only was the typeface a challenge, but also ensuring all components look visually balanced when translated. Stark contrast in word length between German and Japanese were the extremes.
Primary and secondary conversion components
During one of the early stakeholder workshops, we discovered that each team had a slightly different approach to the conversion components. Some wanted prospects to call relationship managers directly, while others preferred email. And then there were some who wanted to display both options.
So, I came up with a way to handle these varying preferences by designing a logic for the conversion components. I created a hierarchy between the primary and secondary methods of contacting T. Rowe, which allowed us to cater to each team's needs.
Hero the people behind the products
Given that investors entrust their investments to portfolio managers, we wanted to emphasise the importance of the personal relationship between them. To achieve this goal, we decided to feature the portfolio managers prominently in the design, placing their images in the hero section and other relevant components throughout the page, rather than just using small avatars.
This in turn, influenced a photography brief to capture high-quality images of all the portfolio managers.
Influential for the beginning of a new enterprise-wide global design system
This project demonstrated a smarter system, a new design language, and a new way of building components for T. Rowe. It was influential for the beginning of a new initiative; an enterprise-wide design system, later named ‘Beacon’.
Many of the components for the campaign toolkit were brought into the design system and have been expanded and modified to become suitable for all teams.
The playbook
A Playbook is being created to introduce the new campaign toolkit and to help onboard marketing and publishing teams in how to get the best out of it. Content moves from base campaign experience principles to guidance on good, outcome-oriented planning, working with components, pre/post-launch processes, through to thinking beyond the campaign landing page, working with AEM’s Analytics for measuring performance and Target for dynamic campaign optimisation.
Although I left the project before the playbook was completed, we documented the details of what was to be included in the playbook through the duration of the project. The main challenges were to decide what components needed what level of flexibility and how much control should we give publishers in the CMS.
Impact
The toolkit has been adopted in all 42 countries that T. Rowe operate in. The publishing team in each of these countries has now saved tens of thousands of dollars outsourcing agencies to build microsites for each campaign.
Since I left, I have also heard that the speed in which the publishing team was able to create a campaign managed to prevented a client worth approximately 1 billion dollars, from departing T. Rowe.
Project learnings
From Sketch to Figma
This was the first project we did in Figma and I handled the transition from Sketch.
Mental models for components
Because of this project, I am now able to better create mental models to structure components from a design, publishing, and backend point of view. I have a deeper understanding of how components work.
Localisation
This was the first time I had designed with localised fonts in different languages. I learned how to text minimum and maximums using languages like German and Japanese, ensuring the design works for all versions.
Authorable or hard-coded
Throughout the project, I was constantly making decisions about who should have control of a particular part of the experience. For example, should hard-code character limits, or should we address them in the playbook? I learned to consider different factors, such as the needs of the content authors and editors, the technical limitations of the system, and the overall goals of the project.
Confidence in the solution without user research?
Although we didn’t have access to users, we had high confidence that our solution would be a significant improvement on the current experience. For this reason, and because of the flexible nature of our components, we were happy to ship our designs and planned to test and iterate on them once released. Obviously user research would have been so much better, but it isn’t always required to make an impact with a project like this.