trowe_edited.jpg

T.Rowe Price

Corporate site redesign

Client & task

Year

2021-2022

Location

Remote (London based agency)

T. Rowe Price Group, Inc. is an American publicly owned global investment management firm that offers funds, advisory services, account management, and retirement plans and services for individuals, institutions, and financial intermediaries. Working with Else London we were tasked with:

  1. Use the new design system "Beacon" that was recently created by the agency to create new components. Document them for developers.

  2. Restructure the page flows and visual design for the company's corporate website

  3. Define two customer journeys 

Shape 1.png

Working with a UX designer and a product manager we defined a series of customers that use the corporate site. Using these findings and experience takeaways/design principles already created by Else London wireframes and module structure was created for each core page for two journeys, Prospective Client and Prospective Associate & Press. We created a mandatory and optional module structures for each page with detailed annotations for the client.

 

We used the company's newly created design system, named Beacon to create this new structure. This was the first time using the Beacon to create page designs, so some of the components needed design tweaks and changes to fit the need. We created a system to manage this, which was the module table with links to the Beacon files, any similar developed pages and which principles the modules touch upon and all the module variants. This evolved with each page and became quite a useful document. We had numerous design checkin and critiques with the design manager and other designers to challenge and improve the work. Once we were happy with the pages we worked with the client to prioritise the module development and created detailed documentation for developers. In total we created a suite of 13 new pages across two customer journeys on four different breakpoints.  

The solution

The process

Template structures

Working with the UX designer we defined the template structure for each core page. We aimed to make the structures flexible for the internal team to update when needed and customise to their needs. The mandatory modules hit upon the experience takeaways/design principles predefined by Else and were an important part of the brief.  principles

Page templates 1_4x.jpg

The module table

The module table became an integral part of the project as it became a point of reference for developers, designers and product managers to quickly view all the components and variants. It also helped us clean up any similar components explored within Beacon and simplify the components used in the designs. Their status and which page they are on was included along with the experience design principles, visual references, Beacon references and code. To get the table to the final state took a lot of collaboration and iterations within the team, as we were dealing with quite a complex task. 

Module table zoomed.png

Full page designs

In collaboration with the UX designer we came up with new full UI page designs and interaction specs for 13 pages for T.Rowe Price's corporate site. Being a highly established company the brand guidelines were set in stone, however we could be creative in creating and adapting the modules from Beacon to create a more fun user experience. The homepage was the place where we wanted the user to find where they need to go quickly and have a visually pleasing experience.

We created a new module that showed more content on hover with smooth user interface interaction and was flexible to house 2-5 blocks of content. An important part of the project was to ensure that we have 4 breakpoints for each page designed. This level of detail and collaboration took us several months to complete. The client was very happy with the new designs and was presenting them to the wider company as a benchmark that should follow. 

Homepage_0.5.jpg

Ready for dev components 

We worked with the corporate product manager to prioritise the components that are most used throughout the pages and have the most influence. We chose 8 components and documented them to a high level of detail and ran the developers through the document. It was also important to check the components and rules with the Beacon design team to ensure we were all on the same page. Once the 8 high priority components were created, we then did the same for the remaining low priority to leave the client in a fully complete designed stage. 

The final additional deliverable was the playbook that was more for the content creators with rules on how to use the modules and character counts for each. 

light 1.jpg
light 1.jpg