TIAA CONSULTANTS MICROSITE REDESIGN

Goal: Redesign a microsite, within the new TIAA brand, for plan consultants and advisors

Constraints: Utilize the new whimsical brand for a B2B, business-focused audience

Team: Product Designer, Content Strategist, Account Manager

Role: Product Designer

Tools: Sketch, Invision

Deliverables: Site map, High-fidelity mockups, Invision prototype

Timeline: 3 weeks

 

Process

First, the Content Strategist and I did a review of the existing consultants site to understand its’ existing architecture.

Some of our initial findings include:

  • Outdated brand voice and elements
  • Odd interaction design patterns
  • Repetitive content
  • Inconsistent navigation — some items lead to sub-navigation items, some lead to completely different experiences

Some of our initial solutions include:

  • Update website to current brand and design system
  • Normalize interaction design patterns (comes with new design system update)
  • Streamline and reduce amount of copy
  • Normalize navigation patterns (comes with new design system update)

These findings, among many others, influenced the information architecture we developed:

Next, we mapped the existing site copy to the new site architecture to see where the copy could live in the new site. We worked everyday with the SME to ensure that the architecture we came up with could house the proposed content.

After we received approval on the site architecture and copy buckets, we jumped right into the design phase. The Content Strategist starting working on the copy, while I started to design the new microsite. Generally, I start with low-fidelity sketches and work my way up to higher fidelity mockups, but this project was fast and furious, so I started at a higher fidelity than normal. I used their new brand and design systems to inform my design process by looking at existing components and seeing how our proposed page structure could be created with these components.

Without any copy to work with yet, I started to build out modules that were not solely contingent upon copy like the top navigation bar, hero areas, etc.

Once I received direction on the copy for our proposed site, I selected modules that supported the copy and organized them according to the copy direction and the story of the page. If there wasn’t a module that could support the proposed copy, I would work with the Content Strategist to edit the copy to help it work better with an existing module.

I worked iteratively with the Content Strategist to update the mockups with the correct copy as we moved through the feedback cycles with the client over the three week timeline. Additionally, I created an Invision prototype to show our clients how a user would navigate between the pages of the site.

View the prototype here.

 

Results

The clients were pleased with the new proposed Consultants website. It falls in line with their new brand, but does not feel too consumer-centric. The use of icons and imagery break up the pages, and allow each component to grab the attention of the user as they move down the page. The use of bright, whimsical colors has been reduced according to their brand standards, to give a more serious but congenial feel.

 

Conclusion

I’m happy with how the mockups and prototype turned out. They adhere to the integrity of the new brand, but speak more strongly to the B2B audience that TIAA is targeting. It was a challenge to thoroughly understand and apply their new design system to this project, but I quickly familiarized myself with it and turned around a really solid site. If there was more time in this project, I would have loved to explore different concepts for the architecture of the website and the final design.

Check out the live site here.