Visual Design
A redesign of the VR bank was long overdue to be fully accessible & to keep up-to-date with the latest design trends.
Atruvia is a subsidiary of the VR Bank Group and serves as its IT provider. The Volksbanken Raiffeisenbanken network consists of over 700 independent banks, as well as other entities such as insurance and credit companies. Atruvia offers a wide range of services to these banks and partners, including a tailored design system that allows clients to easily customise the framework to match their branding and style. The product is divided into multiple touchpoints, including the online banking platform, the B2B business management tool, and the website CMS.
My primary task was to redesign the entire logout section of the banking websites, focusing on both the logged-out and logged-in states. Given the low UX maturity at Atruvia, another key objective was to enhance UX awareness and best practices within the teams.
As the lead designer, I was fully integrated into a classic SCRUM environment, collaborating closely with multiple teams composed of developers, product owners, business analysts, and Scrum masters. Due to the complexity of a fully customisable website builder for over 700 branches, three Scrum teams were involved in the process.
The project faced several significant challenges that needed to be addressed. The existing branding had critical accessibility issues, particularly with the use of orange as an action color that didn't meet contrast requirements. The legacy systems were outdated and required replacement to support modern banking operations effectively. User experience was compromised by inconsistent designs across different touchpoints, creating confusion as users navigated between the old website design, updated online banking interface, and badly integrated iFrame sections. Managing multiple development teams simultaneously added complexity to the project coordination. The organisation's low UX maturity was evident in the absence of established UX integration processes, often resulting in Product Owners making design decisions without proper user experience consideration. Additionally, implementing the new design system required careful balance between various stakeholder needs while maintaining focus on delivering an optimal user experience.
My design process began with a comprehensive kick-off workshop where stakeholders and I established the current state of the project, set clear milestones, and defined deadlines. To better understand the project ecosystem, I created a stakeholder map that clarified dependencies and responsibilities among different teams and departments.
Working closely with stakeholders and partners was essential to balance their business requirements against actual user needs. I collaborated with the research team to gather user data that helped prioritise features effectively. This information became the foundation for developing detailed customer journeys that examined different entry points to the banking website—from Google searches and social media to direct website access.
A key challenge identified was the excessive number of clicks required to complete common tasks like applying for housing credit or insurance products, resulting in high drop-off rates. I focused on streamlining these journeys by minimising necessary clicks and prioritising high-value user tasks.
The technical constraints of the Adobe Experience Manager (AEM) content management system required careful consideration in the design approach. I needed to create a system that was restrictive enough to maintain brand consistency across hundreds of banks, yet flexible enough to allow for individual customisation.
Based on the established customer journeys, I created initial template drafts and worked with Business Analysts and Product Owners to refine feature stories in JIRA. I then developed design system-based prototypes customised for specific use cases. These prototypes underwent user testing, with feedback incorporated to improve user flows.
The implementation phase involved significantly simplifying information architecture, developing personalised start pages based on user data, and creating component-based sections in AEM. I produced detailed wireframes for both frontend and backend elements, working closely with development teams throughout.
Perhaps most importantly for long-term success, I established a structured JIRA process that integrated design as a standard part of the development workflow, ultimately raising the UX maturity level across the organisation.
