Redesign of NatWest.com
Position
New brand language (named Pearl) is all about instigating a more conversational approach to money / less scary, more about possibilities
Problems
Branding agency focused on print and marketing with very little online exploration
Possibilities
Take new visual language and explore designs that are fun, contemporary and adaptable
Branding agency styleguide
My first homepage explorations…
Pros Contemporary
Cons Purple is too dominant / Level of detail affects content comprehension
Illustrative header variant
Pros Purple to white split improves hierarchy / White section easy to scan
Cons Too much emphasis on purple section / Purple section level of detail is too high and distracts from content
Pros Hero easier to scan / Low cognitive load
Cons Purple section looks too simple / Torn edges as dividers feel too amateurish / Text hard to read in purple section
Photo header variant 2
Pros App section is much easier to comprehend
Cons Purple panels behind nav are too dark in relation to nav buttons / Overall content doesn’t flow well due to text alignment and number of columns
My final homepage + New global nav + New footer design
Pros Hero easier to scan / Low cognitive load / Column alignment improves page comprehension / Colours work as subtle enhancers and dividers
Cons TBC
Photo header variant 1
Illustrative / Photo header variant
Old design next to New ‘Pearl’ design
Conclusion + Results
This was a dream project to work on!
The overall aim of the redesign was simple, apply the new visual language to NatWest’s homepage.
In addition, we had to resolve issues of visual balance and inconsistent spacing in the current live design which affected visual consistency, hierarchy and comprehension.
I had to make sure two key factors were observed during the design process; 1 The new design was a faithful reflection of the new visual language and 2, the layout was engaging and of low complexity.
I suggested implementing the new NatWest serif font (initially reserved for Hero components and marketing only) into the Type Stack as a header font, to ensure the overall design was not only distinctly NatWest, wherever a user might be on a page, but to also make sure content was super easy to process, scan, and faithful to the new visual language.
Finally, efforts were made to ensure the new designs would not incur any significant Dev effort that might impede the ambitious launch date, which we hit by the way.