Capital One: Homepage Redesign(s)
Phase 1: 2008 – Minor Visual Updates
While a UX Designer at Capital One I was Lead Designer and/or Design Manager on multiple homepage redesign efforts. The first was in 2009 and while looking quite dated now, at the time it was certainly a big step forward from what was there previously. Visually the homepage followed very common paradigms for a banking web site:an abundance of navigation, a traditional login badge, lists of links (additional navigation with SEO benefit), a small carousel full of marketing content, and a page layout left justified in browser.
My Role: Sr Visual Designer working within pre-designed page layout format.
Phase 2: 2010 – Designing a System
In 2010 as a lead designer on the web team I was tasked with assessing the entirety of capitalone.com as a re-platforming effort began to kick off. In doing so i reviewed over 2,500 pages that leveraged5-7 global page templates (a common practice at the time) across multiple business groups. Each business had a dedicated design team at the time and a strong desire to visual brand themselves in order to differentiate themselves from the others. The result was a lack of global branding, UI patterns including navigation, and a wide range of common content types all being presented differently. As you can imagine this practice has major impacts not only on performance and delivery but the overall experience; especially for customer of or consumers interested in shopping for multiple products.
As a result I proposed that the re-platforming effort include re-architecture of the entire site and the inclusion of a component based design system. This would allow us to remove the need for page templates allowing designers to solve for true business needs over conforming to a pre-made layout. By partnering with engineering leadership we also began thinking about component flexibility and scale whereby each module, via CMS, could align to varied grid structures (4,6,8 columns, etc) and each could have a variety of optional elements or features such as headings, images, etc.
Visually the homepage became less cluttered with links while improving SEO and resolving challenges of a multi-business company by surfacing content wells to promote products and offerings as defined by known user personas and delivered dynamically at page load.
My Role: Lead Systems Architect + Visual Designer
Phase 2.5: 2013 – Making the System Responsive
After the announcement of the Boston Globe’s responsive web design by Ethan Marcotte in 2012 we began to identify a new opportunity for our design system. The web platform was based on flexible components allowing them to scale to a variety of grid configurations and it was not long before I was able to identify simple updates to the platform whereby removing the defined 960 page container width we’d be able to easily optimize for mobile devices and release a responsive upgrade.
After many months of selling the idea to leadership and partnering with engineering again to define scope and level of effort we were given approval to move forward. With a small team in place enhancements were made to the grid system and several components over the course of only 8 weeks in order to deliver a fully responsive platform upgrade. Similar to the Boston Globe redesign we were also able to apply adaptive strategies to the platform that would identify device type beyond simple breakpoints and allow components and global UI designs to modify to align with device specific paradigms. With this release Capital One became the first top 10 banks to deliver a fully responsive web experience and one of the first fortune 100 companies to do such putting us alongside Disney, Microsoft, Starbucks, and Target to name a few.
Phase 3: 2014 – Adding a Language to the System
With support of my leadership I led an effort that challenged the existing branded guidelines which had never considered digital usage in their creation. A common practice at the time, visual standards were owned and defined by Brand/Marketing departments who based decisions on the needs of print mediums such as direct mail and other legacy deliverables.
Within the scope of this effort was redefining color palette, typography, iconography, and illustration styles that were optimized for backlit displays and mobile usage.The result introduced updated visual design styles as well as a digital design language that was applied to the existing component system. Additionally what initially created tension between the two departments resulted in a stronger partnership and evolved Brand guidelines.
*The only unfortunate outcome of this specific redesign was that due to engineering constraints the feature banner and login badge were not able to be refactored including full width background image. The was also a result of development challenges that were required to enable flexible positioning of the copy, background, optional foreground images, etc. While this image showcases the initial release of the new design language and homepage, it was several months and many iterations later before the full vision of our concept was realized.
My Role: Sr Design Manager & Strategist (Team Lead)
Phase 2: 2016 – Current
In early 2016 the full vision of our 2014 redesign effort was fully realized and delivered as I was leaving Capital One to take a new job at Snag (formerly Snagajob) to start their innovation lab. This design is still in use today with only slight modifications to dynamic content and persona driven page layouts. This too is all by design and based on the component system that I was responsible for architecting in 2010.
Want to check it out for yourself? Visit capitalone.com on any internet connected device.
My Role: Influencer