HSBC
Future proofing HSBC.com and its company pensions site.
💵
Role — UI
Tools — Photoshop
Agency — Possible
BRIEF
Completely redesign HSBC.com and deliver a new component driven site. Design all sub pages first, followed by the homepage and main landing pages.
My responsibilities — UI design · Dev delivery
Style
As a team we had the opportunity to set a completely new style for the homepage and main landing pages. We explored many styles for these pages and eventually chose to use striking photography and big typography to create a distinctly different, modern feel.
Sub pages
Aside from the main sections of the site a lot of the other pages were very content heavy, without much visual personality. Intoducing a new design system for spacing gave us a more breathable layout, which allowed us to make these content pages feel modern.
Creating the content pages first worked well, however it became apparent some of the styles we created at the later stages of the project when we moved onto the main navigation and homepage designs would have worked well across the rest of the site.
There was freedom to create new visual styles and elements but we had to get a balance of new creative styles that sat comfortably within HSBCs established guidelines.
Role — UI
Agency — Possible
Tools — Photoshop
BRIEF
Redesign HSBC’s company pensions site. With multiple pension schemes and a great pension offering, create a new site with less friction and more user interaction. A challenge of this project was the requirement to design the entire site using a very limited number of components.
Project responsibilities — UI design · Component mapping · AA accessible
I was responsible for UI design but I also worked with the UX designer to map out and refine the components we needed.
Style intentions
It was important to me that we created an exciting look to the site, as pensions can often be seen as quite mundane. I aimed to design a site that conveyed the idea of looking forward to enjoying your pension. Sourcing photography that gave emphasis on family time and holidays was key to this.
HSBC guidelines
HSBC has a very thorough design system for certain elements, such as font sizes, colours, navigation and tabs style. It was important I utilised these elements from the brand library and any new elements I created married up with the existing design system to create a seamless visual experience.
