Projects

HSBC.com

Brief

To redesign HSBC.com from the ground up. To create a website that allowed the user to navigate and drill down to find relevant information easily. The website also had to be designed and built in a way to give the content editors enough flexibility to create content in the future.

Process

I headed up a small team of two UX designers working our way through twenty three templates and thirty seven components in an extremely short space of time. We used Sketch for the wireframes. We presented to clients and gathered feedback on a weekly basis. Designs (not wireframes) were annotated using Keynote. We had two rounds of user testing, the first was conducted in-house and the second was conducted by Bunnyfoot. The site had to adhere to and pass AA accessibility standards. I presented to and liaised directly with the dev team to field questions and resolve issues.

Mobile nav wires

1 of 6

Collage of mobile screen mockups showing HSBC website menu navigation for sections like Our Approach, Risk and responsibility, and Financial crime risk.

Students and graduates template

2 of 6

HSBC students and graduates page offering job search, job quiz, program options, student profiles from UK, USA, India, and upcoming campus career events in Manchester and Abu Dhabi.

Media gallery filters

3 of 6

Series of screenshots showing a media gallery filter interface with dropdowns for Media Type and Category, checkboxes for filter selection, apply filters button with animation, loading spinner, search bar, and filtered item counts.

Annotations global nav

4 of 6

Diagram explaining C3 Global navigation for desktop, showing the HSBC homepage header with labeled links for logo, navigation menu items, online banking, contact, and search icon.

Annotations global nav mobile

5 of 6

Screenshot of HSBC mobile global navigation menus from homepage to L4 menu, showing hierarchical menu items and a smiling woman on the homepage.

Annotations media gallery

6 of 6

Presentation slide titled 'T1 Media gallery' explaining how the media gallery works with labeled categories including images, links, and load more options, featuring example images of HSBC headquarters and lion statue, with detailed instructions on usage and CMS requirements.