Planning and Research Redesign
Responsive web design for the Planning and Research section of the T. Rowe Price personal investing site.
The planning and research section had over 130 pages of outdated legacy content in need of redesign. Some of the content was still relevant and the Personal Investor agile team took the following steps to reimagine the planning and research content.
Role: UX Designer
Team: Product Owner, Project Manager (UX Scrum Master), 3 UX Designers, 1 Content Strategist, Business Analyst, Development Scrum Master, 3 AEM Developers, 1 Web Content Specialist
Exploratory User Testing: Testers were asked the same set of questions across T. Rowe Price and competitor sites. They were asked to think back to the last time they visited a financial website. One key finding was large financial decisions were triggered by significant life events.
Competitive Analysis: Four competitor websites were evaluated to determine if similar content is offered and how that content is organized. All four offered content similar to T. Rowe Price with no real differentiation.
Affinity Mapping: UX Team facilitated an SME workshop by documenting and forming clusters of topics that emerged in the sticky notes written by key SME’s.
Content Mapping: Four topics identified during the stakeholder workshop. While working with a content strategist, we engaged additional stakeholders to identify messaging for each topic, and also to collect feedback to understand future content needs at T. Rowe Price.
DoGo Mapping: As a team we generated as many user stories based on collected user research. Starting from the personal investor homepage, we discussed all of the places the user would probably go to get the information or complete the task they needed.
Two bigger site architecture adjustments emerged from this exercise. We created a new node for life events and the placement of where the stages in retirement page should be.
Nodes and Pages: After nodes emerged from the DoGo session, we were able to pull out what nodes could become pages and how content would be connected. As a result we were able to condense down 133 pages in the planning and research section to 30 pages.
Final Site Map: After DoGo mapping we were able to agree on the information architecture for the planning and research section of the site.
Wireframe Phase: We created all of the wireframes using a virtual whiteboard Miro. This allowed for greater collaboration where multiple designers could work on wireframes at the same time. As a team we were able to create wireframes for 30 pages in several days.
Detail of retirement planning section wireframe.
UI and Template Development
Page Template creation: Page designs and templates were started without page content. These are some of the design samples of how we started laying out page templates.
UI exploration of Title and breadcrumb treatment: This is a design solution to ensure page H1 heading was still at the top of the page. Since these pages were going to be maintained by a web content team, we had to consider multiple scenarios of how the webpage might appear after being altered by marketing initiatives.
Promotion Component: One of the design considerations was how to incorporate promotional content throughout the redesign pages. This was an exploration of how to treat or place promotional content on page templates.