Monitise (Create)
·
Oct 2014 - Sept 2015
Monitise
UI design for a shipped visual refresh of the Co-operative Bank and Smile banking app, and mobile screens for Telefónica.
Role
UI / Visual Designer
Timeline
Oct 2014 - Sept 2015
Team
Mobile design team with a visual design lead
Platform
iOS / Android
Overview
From IT into mobile UI design
Monitise Create was the mobile design arm of Monitise, a British fintech company that provided mobile banking technology to financial institutions. It was my first professional design role after a decade in IT. I joined a small mobile design team, working alongside a visual design lead and other designers on banking and telecoms apps for iOS and Android. My focus was detailed UI: the screens people actually use, designed to a high standard of consistency and clarity.
Shipped refresh
The Co-operative Bank and Smile app, released with my screen designs
Two brands, one app
A shared banking app carrying two distinct brands
iOS and Android
Detailed UI for banking and telecoms apps
Challenge
Refreshing a banking app across two brands
The Co-operative Bank and Smile shared one underlying app with different branding, and its visual design had fallen behind current iOS and Android conventions. The refresh had to modernise the interface within established flows, keep both brands distinct, and hold up in the screens people use most, such as payments, where clarity matters most.
How do you modernise a banking app's interface within its existing flows, while keeping two brands distinct on one product?
Approach
Screen-level craft within established flows
Banking app refresh
The Co-operative Bank and Smile used the same underlying app with different branding, and the team was refreshing its older visual design. My focus was detailed UI work within the established flows. Working in Photoshop, I designed the payment screens and other parts of the iOS and Android app, working on visual hierarchy, alignment and consistency so each screen felt part of one modern product.
Before and after: the screen as it was, annotated, beside an approximation of the intended design.
Left Co-operative Bank screens in the refreshed style. Right Detailed Co-operative Bank UI across key flows.
Because one app carried both brands, every treatment had to work in Co-operative Bank and Smile colours alike, so the design had to rest on structure and hierarchy rather than on either brand’s palette.
An annotated screen spec for development.
The payment sequence laid out step by step (video).
Left Smile on the same app: structure carries both brands. Right Smile screens across the flows.
Telefónica
I also designed mobile screens for a Telefónica app as part of the team, working within the visual design lead’s direction to keep a clean, consistent design language across the app.
Left Telefónica/Vivo app screens. Right More of the Telefónica/Vivo screens.
Outcome
A refresh that shipped
The refreshed Co-operative Bank and Smile app shipped with my screen designs, including its payment screens, across iOS and Android. Alongside it, I delivered mobile screens for a Telefónica app within the team's shared design language.
Detailed screen UI
Hierarchy, alignment and consistency across the iOS and Android app.
Payment screens
Clear, consistent UI for one of the app's most important journeys.
Two brands, one app
Treatments that worked for both banks on a shared product.
Telefónica screens
Mobile UI for a Telefónica app within a shared design language.
Status
Banking app refresh shipped
Banking app refresh shipped
Reflection
Detail is where trust starts
In a banking app, people judge trustworthiness at the level of a screen: whether figures align, whether the hierarchy is clear, whether the next action is obvious. Working at that level of detail from the start of my design career set a standard I've carried into every product since, from design systems to the apps I build myself.
