T Rowe Price
Understanding business needs to deliver an efficient framework for productivity
2024
T Rowe Price
Understanding business needs to deliver an efficient framework for productivity
2023
T Rowe Price
Understanding business needs to deliver an efficient framework for productivity
2023
Overview
In 2023 I collaborated with T. Rowe Price to refine their information architecture (IA) of their design system, Beacon. This initiative spanned approximately three months, involving close coordination with T. Rowe Price's design and product development teams. As a globally recognised investment management firm, T.Rowe Price relies on Beacon to ensure the consistency, efficiency and brand integrity of their digital client experiences. As Beacon evolved, so did the challenges in maintaining a user friendly scalable IA that could meet the growing needs of the design and development teams. My role as the Experience Architect was to analyse and restructure Beacon’s IA with the aim of enhancing accessibility, adoption and effectiveness to ensure a streamlined access to resources and tools for all teams. This redesign resulted in significant productivity gains and full adoption by T. Rowe Price's design community.
Overview
In 2023 I collaborated with T. Rowe Price to refine their information architecture (IA) of their design system, Beacon. This initiative spanned approximately three months, involving close coordination with T. Rowe Price's design and product development teams. As a globally recognised investment management firm, T.Rowe Price relies on Beacon to ensure the consistency, efficiency and brand integrity of their digital client experiences. As Beacon evolved, so did the challenges in maintaining a user friendly scalable IA that could meet the growing needs of the design and development teams. My role as the Experience Architect was to analyse and restructure Beacon’s IA with the aim of enhancing accessibility, adoption and effectiveness to ensure a streamlined access to resources and tools for all teams. This redesign resulted in significant productivity gains and full adoption by T. Rowe Price's design community.
Overview
In 2023 I collaborated with T. Rowe Price to refine their information architecture (IA) of their design system, Beacon. This initiative spanned approximately three months, involving close coordination with T. Rowe Price's design and product development teams. As a globally recognised investment management firm, T.Rowe Price relies on Beacon to ensure the consistency, efficiency and brand integrity of their digital client experiences. As Beacon evolved, so did the challenges in maintaining a user friendly scalable IA that could meet the growing needs of the design and development teams. My role as the Experience Architect was to analyse and restructure Beacon’s IA with the aim of enhancing accessibility, adoption and effectiveness to ensure a streamlined access to resources and tools for all teams. This redesign resulted in significant productivity gains and full adoption by T. Rowe Price's design community.
THE PROBLEM
T Rowe Price had a placeholder Information Architecture (IA) for their design system. This IA needed a redesign to improve its efficiency and accessibility for design and development teams.
THE PROBLEM
T Rowe Price had a placeholder Information Architecture (IA) for their design system. This IA needed a redesign to improve its efficiency and accessibility for design and development teams.
THE PROBLEM
T Rowe Price had a placeholder Information Architecture (IA) for their design system. This IA needed a redesign to improve its efficiency and accessibility for design and development teams.
Understanding the space
To address the IA challenges in Beacon, I started off by doing my foundational desk research on understanding best practices for information hierarchy, labelling conventions and user accessibility of design systems. By studying how leading organisations structure their design system assets and benchmarking the existing design systems on Knapsack, I developed a thorough understanding of the problem space.
Understanding the space
To address the IA challenges in Beacon, I started off by doing my foundational desk research on understanding best practices for information hierarchy, labelling conventions and user accessibility of design systems. By studying how leading organisations structure their design system assets and benchmarking the existing design systems on Knapsack, I developed a thorough understanding of the problem space.
Understanding the space
To address the IA challenges in Beacon, I started off by doing my foundational desk research on understanding best practices for information hierarchy, labelling conventions and user accessibility of design systems. By studying how leading organisations structure their design system assets and benchmarking the existing design systems on Knapsack, I developed a thorough understanding of the problem space.
Carbon Design System
Carbon prioritizes accessibility for various user groups, such as designers, developers, and product managers
Carbon Design System
Carbon prioritizes accessibility for various user groups, such as designers, developers, and product managers
Carbon Design System
Carbon prioritizes accessibility for various user groups, such as designers, developers, and product managers
Atlassian Design System
The IA prioritises clarity and consistency, with a hierarchy that flows logically from foundational elements (e.g., colors, typography) to complex components and patterns.
Atlassian Design System
The IA prioritises clarity and consistency, with a hierarchy that flows logically from foundational elements (e.g., colors, typography) to complex components and patterns.
Atlassian Design System
The IA prioritises clarity and consistency, with a hierarchy that flows logically from foundational elements (e.g., colors, typography) to complex components and patterns.
Working on Knapsack
Knapsack is a design system management platform built for enterprise digital production. At the time of this project, it was still in its MVP phase, so it offered only its most basic features. Since they were very open to collaboration, it proved to be a great opportunity to work alongside Knapsack to suggest new features and prioritise their build to improve the IA for Beacon.
By getting approval from key stakeholders at T. Rowe Price, we successfully communicated with Knapsack’s product team to suggest features and eventually build them at later stages.
Working on Knapsack
Knapsack is a design system management platform built for enterprise digital production. At the time of this project, it was still in its MVP phase, so it offered only its most basic features. Since they were very open to collaboration, it proved to be a great opportunity to work alongside Knapsack to suggest new features and prioritise their build to improve the IA for Beacon.
Working on Knapsack
Knapsack is a design system management platform built for enterprise digital production. At the time of this project, it was still in its MVP phase, so it offered only its most basic features. Since they were very open to collaboration, it proved to be a great opportunity to work alongside Knapsack to suggest new features and prioritise their build to improve the IA for Beacon.
Sample build of Beacon on MVP version of Knapsack
Addressing fragmentation & improving accessibility
By analysing the existing information architecture through the journeys of multiple users, their objectives and their channel of communication, I found a lot of repetition of information and duplicate versions of pages. This kind of a framework would not only be difficult for a user to find assets but also to edit or update the information at later stages. Some pages also had names that didn’t match their content, which made it even harder to find what you’re looking for.
Addressing fragmentation & improving accessibility
By analysing the existing information architecture through the journeys of multiple users, their objectives and their channel of communication, I found a lot of repetition of information and duplicate versions of pages. This kind of a framework would not only be difficult for a user to find assets but also to edit or update the information at later stages. Some pages also had names that didn’t match their content, which made it even harder to find what you’re looking for.
Addressing fragmentation & improving accessibility
By analysing the existing information architecture through the journeys of multiple users, their objectives and their channel of communication, I found a lot of repetition of information and duplicate versions of pages. This kind of a framework would not only be difficult for a user to find assets but also to edit or update the information at later stages. Some pages also had names that didn’t match their content, which made it even harder to find what you’re looking for.
Selin
Designer
Lacey- Mae
Developer
Elli
Copywriter
Users
Objective
New user onboarding
Viewing accessibility requirements
Finding specific components
Channel
Web
Mobile
Email
Web
Mobile
Email
Web
Mobile
Email
Web
Mobile
Email
Selin
Designer
Lacey- Mae
Developer
Elli
Copywriter
Users
Objective
New user onboarding
Viewing accessibility requirements
Finding specific components
Channel
Web
Mobile
Email
Web
Mobile
Email
Web
Mobile
Email
Web
Mobile
Email
Selin
Designer
Lacey- Mae
Developer
Elli
Copywriter
Users
Objective
New user onboarding
Viewing accessibility requirements
Finding specific components
Channel
Web
Mobile
Email
Web
Mobile
Email
Web
Mobile
Email
Web
Mobile
Email
Defining the users, their primary objectives and the channel they needed the assets for to create a basic journey.
Defining the users, their primary objectives and the channel they needed the assets for to create a basic journey.
Defining the users, their primary objectives and the channel they needed the assets for to create a basic journey.
I then noted down metrics to compare for later, such as how many clicks it took for the user to achieve their goal. I also created a mockup of the existing architecture on Figma to visualise the issue to better communicate it to the stakeholders.
I then noted down metrics to compare for later, such as how many clicks it took for the user to achieve their goal. I also created a mockup of the existing architecture on Figma to visualise the issue to better communicate it to the stakeholders.
I then noted down metrics to compare for later, such as how many clicks it took for the user to achieve their goal. I also created a mockup of the existing architecture on Figma to visualise the issue to better communicate it to the stakeholders.
Creating low fidelity prototypes of the existing architecture on Figma to visualise the issues to stakeholders
Creating low fidelity prototypes of the existing architecture on Figma to visualise the issues to stakeholders
Creating an improved IA
The main issue with creating a centralised navigation for a design system was that the use case varies even within the same discipline visiting the same page. For example, for an assigned task as a designer you may need to find a button, banner and badge for a website page (needing to switch between different components in the same channel). In another instance, you might be needing to look at development specs of a button and its accessibility constraints (focus on a singular component across multiple channels and access its accessibility requirements & global details).
In both cases, they view the details of a button, but they need to access different information after. It proved to be particularly challenging to create a system that would offer a solution that would be efficient for both pathways.
Creating an improved IA
The main issue with creating a centralised navigation for a design system was that the use case varies even within the same discipline visiting the same page. For example, for an assigned task as a designer you may need to find a button, banner and badge for a website page (needing to switch between different components in the same channel). In another instance, you might be needing to look at development specs of a button and its accessibility constraints (focus on a singular component across multiple channels and access its accessibility requirements & global details).
Creating an improved IA
The main issue with creating a centralised navigation for a design system was that the use case varies even within the same discipline visiting the same page. For example, for an assigned task as a designer you may need to find a button, banner and badge for a website page (needing to switch between different components in the same channel). In another instance, you might be needing to look at development specs of a button and its accessibility constraints (focus on a singular component across multiple channels and access its accessibility requirements & global details).
Mapping out rough flows within the information architecture
Mapping out rough flows within the information architecture
I proposed a new IA that organised the main navigation into three groups: global content, primary content, and secondary content. Within primary content, users could still access global content and vice versa, which helped address previous issues. By prioritising and renaming items in the navigation, I made the IA more accessible. I also removed unnecessary pages and used features like linked navigation and tabs to reduce duplicate information.
I proposed a new IA that organised the main navigation into three groups: global content, primary content, and secondary content. Within primary content, users could still access global content and vice versa, which helped address previous issues. By prioritising and renaming items in the navigation, I made the IA more accessible. I also removed unnecessary pages and used features like linked navigation and tabs to reduce duplicate information.
I proposed a new IA that organised the main navigation into three groups: global content, primary content, and secondary content. Within primary content, users could still access global content and vice versa, which helped address previous issues. By prioritising and renaming items in the navigation, I made the IA more accessible. I also removed unnecessary pages and used features like linked navigation and tabs to reduce duplicate information.
Communicating the idea
To talk about the proposed architecture with stakeholders and user groups, I had to visualise the structure. Since the architecture was quite complex, it was imperative for me to showcase it in a way that was easy to understand and refer to.
Communicating the idea
To talk about the proposed architecture with stakeholders and user groups, I had to visualise the structure. Since the architecture was quite complex, it was imperative for me to showcase it in a way that was easy to understand and refer to.
Communicating the idea
To talk about the proposed architecture with stakeholders and user groups, I had to visualise the structure. Since the architecture was quite complex, it was imperative for me to showcase it in a way that was easy to understand and refer to.
Making prominent differentiation between navigation items and pages in the information architecture with contrasting colours
Making prominent differentiation between navigation items and pages in the information architecture with contrasting colours
Stakeholder engagement: Collaborative iteration for scalability
It was time to present the proposed information architecture to various teams to gather their insights and feedback on the solution. I started with presenting the IA to Knapsack’s product team. This helped highlight the feasibility of the new architecture. Discussing potential opportunities for their product updates also proved to be helpful for the future scalability of Beacon. After iterating the IA in response to their newer updates, I could present the journey to the users.
Stakeholder engagement: Collaborative iteration for scalability
It was time to present the proposed information architecture to various teams to gather their insights and feedback on the solution. I started with presenting the IA to Knapsack’s product team. This helped highlight the feasibility of the new architecture. Discussing potential opportunities for their product updates also proved to be helpful for the future scalability of Beacon. After iterating the IA in response to their newer updates, I could present the journey to the users.
Stakeholder engagement: Collaborative iteration for scalability
It was time to present the proposed information architecture to various teams to gather their insights and feedback on the solution. I started with presenting the IA to Knapsack’s product team. This helped highlight the feasibility of the new architecture. Discussing potential opportunities for their product updates also proved to be helpful for the future scalability of Beacon. After iterating the IA in response to their newer updates, I could present the journey to the users.
Low fidelity wireframe prototypes of proposed architecture
Low fidelity wireframe prototypes of proposed architecture
The primary users
Collaborating with developers, designers, product owners, copy and CX teams, motion designers, and product managers was essential in refining the IA. Through eight targeted sessions of six users each, I validated the primary use cases for each team and demonstrated the new pathways they would follow on Knapsack.
These discussions allowed me to gather feedback on edge cases, explore ‘nice-to-have’ features, and identify opportunities for scalability. By incorporating their insights and iterating through multiple rounds, I developed a navigation structure that effectively met the diverse needs of all teams.
The primary users
Collaborating with developers, designers, product owners, copy and CX teams, motion designers, and product managers was essential in refining the IA. Through eight targeted sessions of six users each, I validated the primary use cases for each team and demonstrated the new pathways they would follow on Knapsack.
The primary users
Collaborating with developers, designers, product owners, copy and CX teams, motion designers, and product managers was essential in refining the IA. Through eight targeted sessions of six users each, I validated the primary use cases for each team and demonstrated the new pathways they would follow on Knapsack.
One of the edge case scenarios was the ask to include principles and practises for research and testing within Knapsack's architecture
One of the edge case scenarios was the ask to include principles and practises for research and testing within Knapsack's architecture
One of the edge case scenarios was the ask to include principles and practises for research and testing within Knapsack's architecture
Prioritising accessibility from the ground up
One of the key business needs from the architecture on Knapsack was to have all of the accessibility guidelines be easy to find. For this, I worked with Hassell Inclusion, the accessibility consultants within T. Rowe Price, to create a system that worked for them and for all teams that needed to refer to the guidelines. I had completed a Digital Accessibility Foundations course by W3C Web Accessibility Initiative (WAI), so it was easier for me to communicate and be proactive with Hassell’s accessibility considerations. This made the process a lot more streamlined as I had built accessibility into the architecture rather than approaching it as an afterthought.
Prioritising accessibility from the ground up
One of the key business needs from the architecture on Knapsack was to have all of the accessibility guidelines be easy to find. For this, I worked with Hassell Inclusion, the accessibility consultants within T. Rowe Price, to create a system that worked for them and for all teams that needed to refer to the guidelines. I had completed a Digital Accessibility Foundations course by W3C Web Accessibility Initiative (WAI), so it was easier for me to communicate and be proactive with Hassell’s accessibility considerations. This made the process a lot more streamlined as I had built accessibility into the architecture rather than approaching it as an afterthought.
Prioritising accessibility from the ground up
One of the key business needs from the architecture on Knapsack was to have all of the accessibility guidelines be easy to find. For this, I worked with Hassell Inclusion, the accessibility consultants within T. Rowe Price, to create a system that worked for them and for all teams that needed to refer to the guidelines. I had completed a Digital Accessibility Foundations course by W3C Web Accessibility Initiative (WAI), so it was easier for me to communicate and be proactive with Hassell’s accessibility considerations. This made the process a lot more streamlined as I had built accessibility into the architecture rather than approaching it as an afterthought.
Testing the architecture
With the IA iterated and refined based on user feedback, it was ready for a final review by key stakeholders, including the Design Systems Lead. My solution addressed their core concerns of feasibility, scalability, and efficiency, making the product ready for testing. We planned to validate the architecture’s effectiveness through tree testing, using card-based classification to assess how well users could navigate the new structure.
I conducted one last round of quick meetings with team representatives to finalise the test questions and ensure clarity before passing the project to the development team for implementation. Once the tree test was prepared, I handed the project over to the internal design team to conduct testing, marking the conclusion of my involvement within the project.
Testing the architecture
With the IA iterated and refined based on user feedback, it was ready for a final review by key stakeholders, including the Design Systems Lead. My solution addressed their core concerns of feasibility, scalability, and efficiency, making the product ready for testing. We planned to validate the architecture’s effectiveness through tree testing, using card-based classification to assess how well users could navigate the new structure.
Testing the architecture
With the IA iterated and refined based on user feedback, it was ready for a final review by key stakeholders, including the Design Systems Lead. My solution addressed their core concerns of feasibility, scalability, and efficiency, making the product ready for testing. We planned to validate the architecture’s effectiveness through tree testing, using card-based classification to assess how well users could navigate the new structure.
The outcome
The redesigned IA launched successfully in early 2024, receiving strong positive feedback from the T. Rowe Price teams. Quantifiable results included:
The outcome
The redesigned IA launched successfully in early 2024, receiving strong positive feedback from the T. Rowe Price teams. Quantifiable results included:
The outcome
The redesigned IA launched successfully in early 2024, receiving strong positive feedback from the T. Rowe Price teams. Quantifiable results included:
hours saved by designers and developers in 2023
of product teams building with Beacon Components
of the design community having adopted Beacon at level 1 or greater
hours saved by designers and developers in 2023
of product teams building with Beacon Components
of the design community having adopted Beacon at level 1 or greater
hours saved by designers and developers in 2023
of product teams building with Beacon Components
of the design community having adopted Beacon at level 1 or greater
Alison Macarthy
Project Manager at T Rowe Price
“Congratulations on smashing the IA work on Knapsack. Picking it up so quickly, effectively getting it to a solid solution. Making a great impression on the client and handling them so well. An absolute pleasure to work with! Well done on your first project with us Nilanjana, I'm excited to see what else you can do!!”
Alison Macarthy
Project Manager
T. Rowe Price
“Congratulations on smashing the IA work on Knapsack. Picking it up so quickly, effectively getting it to a solid solution. Making a great impression on the client and handling them so well. An absolute pleasure to work with! Well done on your first project with us Nilanjana, I'm excited to see what else you can do!!”
Alison Macarthy
Project Manager
T Rowe Price
“Congratulations on smashing the IA work on Knapsack. Picking it up so quickly, effectively getting it to a solid solution. Making a great impression on the client and handling them so well. An absolute pleasure to work with! Well done on your first project with us Nilanjana, I'm excited to see what else you can do!!”
Reflection
I love to work on ‘wicked’ problems- the number of stakeholders and users proved to be exactly that, and I found it engaging to navigate the intricacies of enterprise architecture. I took every available opportunity to create a successful framework- it was liberating to have the autonomy to propose collaboration with external teams and design the outcome to be resilient. It was also a good challenge to grasp the design system and its workings within the span of a couple of days. I’m excited to take on more projects that push my abilities and offer challenges as rewarding as this one.
Reflection
I love to work on ‘wicked’ problems- the number of stakeholders and users proved to be exactly that, and I found it engaging to navigate the intricacies of enterprise architecture. I took every available opportunity to create a successful framework- it was liberating to have the autonomy to propose collaboration with external teams and design the outcome to be resilient. It was also a good challenge to grasp the design system and its workings within the span of a couple of days. I’m excited to take on more projects that push my abilities and offer challenges as rewarding as this one.
Reflection
I love to work on ‘wicked’ problems- the number of stakeholders and users proved to be exactly that, and I found it engaging to navigate the intricacies of enterprise architecture. I took every available opportunity to create a successful framework- it was liberating to have the autonomy to propose collaboration with external teams and design the outcome to be resilient. It was also a good challenge to grasp the design system and its workings within the span of a couple of days. I’m excited to take on more projects that push my abilities and offer challenges as rewarding as this one.
Let’s
Collaborate
Whether you’re interested in knowing more about a project,
have a question, or just want to say hello, I’d love to hear from you.
Nilanjana Mannarprayil
©
Fiveblueelephants
2024
Let’s
Collaborate
Whether you’re interested in knowing more about a project,
have a question, or just want to say hello, I’d love to hear from you.
Nilanjana Mannarprayil
©
Fiveblueelephants
2024