PRODUCT REDESIGN
BUILDING A NEW DESIGN SYSTEM
PRIMARY TOOLS
Sketch | Illustrator | InVision
MY ROLES
UX Lead – Design System | UI Design
THE TEAM
Global UX Team
Project Overview
Temenos, a market leading provider of banking software, required a complete overhaul of their digital banking platfom to modernise the look-and-feel, interaction design and user experience of the product on web and mobile.
New design principles were put in place and we ran a multitude of design sprints to develop a design language that meets the requirements of the industry.
I led the creation of the design system, including a new component library that can be used by designers and engineering. We also built a comprehensive documentation so anyone can start using the design system to build products.
PHASE ONE
Foundations
Design Centre of Excellence
The Design CoE was created to infuse experience design with company strategy, becoming a core part of the product creation process. The goal is to be trend setters instead of trend followers. A good design will deliver good business results.
The Mission
To make banking complexities simple
The Vision
To confidently design best in class digital banking experiences through customer understanding, collaboration and innovation
Design Principles
The following core principles have been put in place to measure the designs against. These principles have also been used to validate with users and score designs.
Consistent
Deliver a consistent experience across all channels and eliminate confusion between user tasks.
Innovative
Innovate by always looking ahead to find undiscovered customer needs and never settling for the status quo.
Engaging
Design personalized and engaging experiences that drive repeat usage and build loyalty.
Visually Appealing
Create memorable first impressions through crisp and clean designs using the latest user interactions.
Intuitive
Design for simplicity, following best practices and human interface design guidelines, to reduce friction for any customer type. Less is more.
Customer-centric
Put the customer first. Following a design thinking approach, we help customers accomplish banking tasks by creating solutions optimized for their needs.
Functional
Help customers achieve their banking goals efficiently through designs that are practical and useful rather than just attractive.
Design Process
The process was derived from design thinking methodologies and built to incorporate multiple cycles of ideation, prototyping and validation from users. We started with responsive and repeated the process for mobile.
PHASE TWO
Research & Ideation
A library of existing user feedback and research from previous projects was used to give a foundation to the redesign. This feedback kickstarted the project itself.
Experiments – Bank of Life
We took our first inspiration from a previous Design Lab project we created called Bank of Life. The aim is to go beyond the traditional definition of what a bank or a financial service is throug leaning into other fields, like social media, art, pop-culture, video games, anthropology, and science fiction to name a few.
Design Trends and Patterns
Scanning the landscape and finding design attributes that would fit the purpose of the product in the best way.
Ideation
UX Team generated potential ideas for a new UI theme.
Themes
The ideas were consolidated into 4 themes and tested with users based on Engagement, Intuitiveness, Visual Appeal, Innovation and Functionality.
Testing and Voting
First we validated the 4 main themes and based on user feedback we combined the designs into one main theme through several design sprints. The process and results of testing is outline in the Validation section.
PHASE THREE
User Interface
After validating the main theme with users through multiple rounds of testing we arrived at the final designs. The following screens show the existing designs vs the Next Gen user interface in both web and mobile.
Login Screen – Web
Updated layout with higer focus on the sign-in area, updated imagery and time of day greetings make this a more pleasant experience.
“This feels very familiar, and it’s clear what I need to do.” – Tester
“If I trust you with my money, I would like it to look as professional as possible.” – Tester
Testing Feedback
Login Screen – Mobile
Friendly, time-of-day greeting creates engagement. Expanding menu with helpful, common actions. Contrasting sign-in area and background image is visually more appealing and more customizable for branding.
“The imagery looks nice here. It’s a nice looking sign in screen, and functionally, it looks exactly like I would expect it to. I do like the color scheme here a lot.” – Tester
Online Banking Dashboard
Redesigning the dashboard was one of the main tasks. A revised navigation, new colour palette and better use of spacing delivers much more modernised look with easy scanning. The module-style layout enables the dashboard to adapt to multiple retail banking variations and also applicable to business banking and wealth management.
Dashboard Features – Web
Testing Feedback
Next Gen Dashboard – Mobile
One of the goals was to make the web and the mobile experience consistent and recognizable, so similar UI elements were used to what is available on web. On the mobile versions native animations were also implemented for better interaction design.
Before
After
Next Gen Dashboard Features – Mobile
Dashboard Modules
A dashboard built from the ground up, with context-driven cards that each contain a feature on its own. This enables future-proofing and experimenting with new ideas in a form of add-ins.
Account View – Web
Before and After
Testing Feedback
Card Management
Complete overhaul of card management, introducing new features, an updated interface, and a much better experience. Below is and example of before and after.
PHASE FOUR
Component Library
Usability for Designers
Building the component library in Sketch, I wanted it to be very easy to use for anyone who picks it up to design screens. For this reason I wanted to make sure the design system has:
Logical Naming Conventions
Responsive Components
Well structured overrides
Ease of use, like building with LEGO
TEMPLATES FOR COMMON SCREENS
LIBRARY ACCESS IN SKETCH CLOUD
REGULAR FEEDBACK AND UPDATES
DOCUMENTATION AND TUTORIAL VIDEOS
An example of the screen break-down analysis
A sampling of the design system components
Well Structured Overrides
Design System Showcase
Created and narrated a set of design tutorials to be used by the global design team.
Software used: MacOS screen recording, Final Cut Pro, home studio for sound (Blue Ember Mic + Focusrite Scarlett 2i2)
PHASE FIVE
Validation
Users Tested
Hours of Testing
Test Sessions
Each tester reviewed prototype screens the main journeys. Several questions about likes/dislikes were asked along the way. After reviewing all screens, testers scored the designs for our Design Principles:
Engaging | Visually Appealing | Intuitive | Innovative | Functional
Test Format
- Unmoderated, virtual tests
- 337 total tests
- 88 hrs of recordings
Audience
- Half ages 24-39, half 40yrs+
- North America, Europe
- Income $75k+
Design Principles Scoring | Audience: 24-40 yrs – Millennials
Engaging
Does it feel personalized and tailored to your needs?
- Current Designs 73%
- Next Gen Designs 89%
Intuitive
How user-friendly was the look, feel, and layout of the pages?
- Current Designs 86%
- Next Gen Designs 90%
Visually Appealing
Did it create a good first impression?
- Current Designs 75%
- Next Gen Designs 93%
Innovative
Compared to other banking sites you’ve used
- Current Designs 75%
- Next Gen Designs 93%
Functional
How easy is it to achieve user goals and how practical is it?
- Current Designs 92%
- Next Gen Designs 93%
Design Principles Scoring | Audience: 40 yrs+
Engaging
Does it feel personalized and tailored to your needs?
- Current Designs 63%
- Next Gen Designs 87%
Intuitive
How user-friendly was the look, feel, and layout of the pages?
- Current Designs 80%
- Next Gen Designs 85%
Visually Appealing
Did it create a good first impression?
- Current Designs 61%
- Next Gen Designs 87%
Innovative
Compared to other banking sites you’ve used
- Current Designs 49%
- Next Gen Designs 83%
Functional
How easy is it to achieve user goals and how practical is it?
- Current Designs 85%
- Next Gen Designs 88%
User Feedback Examples
PHASE SIX
Documentation
To help design more efficiently with engineering, I begin overseeing the documentation for the design system which has much more detailed information for each UI pattern and component. This was to be created using Madcap Flare to integrate with Temenos’ own internal documentation website.
Defining the Audience
Even though the primary goal was to provide a documentation of the design system to designers and engineers it was also used as a tool to support other stakeholders within the company.
Content Structure
To serve a wide audiance, each looking at the documentation for different reasons we needed a well structured content so anyone can find what they need with ease.
Example Screens
Since we had to adapt to an already existing DOCS system there was little wiggle room for design improvement, but to make the most of what we have a few CSS/JS “hacks” were used to increase usability, eg. icon search / hover tooltips for detailed info / photo zoom etc.
