Barclays / 2015–16

Upgrading a design language that mobile and flat interfaces had quickly made obsolete.

My part: Hired as interaction designer to make the reusable patterns mobile-first, then moved onto refreshing the whole visual language, reporting to the Creative Director. Interaction and motion design.
What shipped: The modular header, the first component in the new language. The transactions table and the forms stayed prototypes: the Chief Design Officer left, and the team was partly dismantled.

Services are becoming invisible, but more human. Richer patterns were only the first step; the progressive humanisation of the interfaces was the part to design for.

A timeline from static GUI to invisible UI — The technology opportunity, as presented to the team.

For a bank the signature experiences are the account transactions and the input forms, so that is where the new language was tried first, as prototypes on a phone you could hold.

Transactions by month, by day and one by one — One transactions table that zooms from months to days to single transactions.

A loan application: eight sections, then one question at a time — Typeform’s paradigm for a much longer journey: one question at a time, resumable.

The loan application prototype on a phone.

The Barclays header in three states — The header: initial, navigation revealed, contracted on scroll.

Get one component into production early. The header was built while the vision was still being argued, and it outlived the team.