Online Banking Redesign

Responsive website redesign and native app design

Background

With a recent rebranding, Qudos Bank was looking to have its Online Banking experience entirely redesigned, and make complete use of responsive web design. A team of UX designers, visual designers and developers were gathered to deliver the entire Online Banking experience within 5 months.

Challenges

  • 112 user stories would need to be delivered by the end of the 5 month delivery period.
  • The hard deadline of 5 months was due to the fin-tech partner of Qudos Bank requiring business processes to be locked down in preparation for build.
  • Design had to be creative as possible whilst sticking to business process requirements from the out-of-box solution by the fin-tech partner.
Numerous business stakeholders and designers collaborating together in an effort to resolve an issue during a design workshop

There’s nothing quite like getting your most important stakeholders collaborating together in a workshop

My role and activities

  • At a senior role capacity, Gordon led work streams covering everyday transactional banking, lending applications as well as wealth management.
  • Supported by a mid-level designer, Gordon was responsible for leading a stream of work at a time for each sprint, managing business stakeholder interactions, research, design and customer testing activities.
  • Concepts, wireframes and prototypes were fleshed out in collaboration with other designers.
Gordon presenting at one of the many end of sprint showcases to the project team at Qudos Bank

Presenting final designs at showcase is one of the best ways to bring stakeholders along the journey, and creates an Agile team culture

Approach and solution

An Agile approach

  • During the 5 month delivery phase of the project, UX designers worked 1 sprint (2 weeks) ahead of the visual design team, who in turn worked 1 sprint ahead of the development team.
  • Visual designers were responsible for adding the high-fidelity polish to the wireframes, and building the component library.
  • UX designers worked in collaboration with the visual designers and developers, in order to discuss the introduction of new components, re-use or expand existing components and create more visually compelling UIs.
Example of the Design wall set up for the project. Note the mixture of draft and completed designs that were used to promote discussion amongst the team.

Building a CX wall allows you to walk stakeholders through the week’s progress: anything learnt, any updates or issues that need resolution

Sprint cadence for the UX designers

  • New user stories were picked by each work stream of designers.
  • UX designers dived deep into researching for the user stories, analysing competitors and other industries for insights and inspiration.
  • Product owners and business analysts from Qudos bank would support in gathering the requirements and business processes. Subject Matter Experts (SMEs) from Qudos Bank would also provide invaluable information to help flesh out the designs.
  • UX designers would then ideate numerous concepts, and at times run workshops for more complex user stories.
  • Upon agreeing on a design direction, the team worked towards creating interactive prototypes in preparation for customer testing during the 2nd week of the sprints.
  • Designs would then be refined post-customer testing, with the week culminating in the end of sprint showcase to the wider project team.

Example flow diagram that would assist in the design process, as well as ensure business processes were being followed


Example wireframe designed in Axure, in preparation for a prototype build for customer testing

Results

CX designs, a component library and front-end build were successfully delivered to Qudos Bank by the deadline.

Qudos Bank Online Banking dashboard with visual treatment