SBV values design and takes the road
to digital transformation

Digital tranformation

Product design

UX Research

UX Design

Information Architecture

Branding

Web/mobile application

2021 - 2022

2021 - 2022

2021 - 2022

SBV Connect

SBV Connect

SBV Connect

Context

SBV - "We are in the business of keeping physical cash flowing, adhering to quality standards, ensuring that people are safe, managing systemic risk and, most importantly, adding value to the banks we serve"


SBV, a key provider of specialised services to central and commercial banks across South Africa, Lesotho, and Namibia, partners with Tiltshift, a digital product design accelerator, to undergo digital transformation. Recognising the evolving landscape with the rise of digital payments and the impact of COVID-19, SBV seeks to adapt its business model to enhance customer engagement and digitisse its services.


Tiltshift collaborates with SBV on strategic planning and product development to ensure the company remains competitive and relevant in a rapidly changing market.



Problem - solution

Problem - solution

Problem - solution

The SBV Connect project involved designing a new digital portal that empowers their customers with a one-stop solution to access SBV’s services, support and information.


In order improve on the customer experience. The main challenges identified from the research, were lack of visibility, control and engagement with their customers.


Therefore, the opportunity was to create a customer portal that provides a service-oriented toolbox with underlying architecture that modularises our service offerings, standardising them in the back end while personalising them to our customer.

Solution

The SBV Customer Portal offers a digital gateway to SBV's services, enabling seamless management of transactions, billing, services, and analytics. It empowers customers with control and access to real-time information for consistent and efficient results.

Insight

Insight

Insight

SBV embarked on a significant journey to digitise its operations and try achieve digital transformation, finding that this transition was more substantial than anticipated. We came to acknowledge and communicated this to SBV who are new to digital transformation, that it can be a gradual process, there is also a crucial need for a mindset shift as the company aligns its pace with new digital solutions.

Simplified
user experience

BPM Optimised

Scalable &
responsive
design system

Client
SBV

Company
Tilt Shift

Role
Senior Product Designer

Year
2022-2023

Industry
Financial Services

What we did

Business requirement workshops

Business requirement
workshops

User Research

User Journeys

Task flows

Wireflows

Wireframes

Brand research

Design Systems

Product developement
actvities


Following an agile process that goes through iterative sprint cycles. The following gives examples of different design activities we did.

Information trees

To understand the structure of information within a particular epic, we would map high level logic trees to under flows

Customer journeys

Data form interviews is sorted into key insights based on the customer journey, these insights are collated and aligned within the team

Task flows

For different user scenarios we would map out the different users and how they interact

Wireframes

Wire framing through a series of iterations from low fidelity to utilising the design system components in high fidelity

Role and responsibilities

  • Designing a B2B portal/web application on the basis of BPM software for task management and financial services

  • Taking ownership of the CX Journeys, Wire-flows, Information Architecture, Low-medium-high fidelity Wireframes, and UI

  • Running co-creation workshops with the client to align on the business requirements and gain insights into the product needs

  • Working with the product lead to define the business objectives, to have clearly defined scoping

  • Planning, designing and conducting user research in the exploratory phase of the project

  • Defining the profiles, jobs to be done, high level tasks, activities and interactions, while considering positive and negative flows

  • Developing the design system, while designing the interfaces in UI and prototyping these with users to get feedback

  • Owning pieces of work within the workstream and leading product owners, mid-level and junior designers to help implement aspects of that piece of work

  • Doing inspirational and competitor analysis for new components and best practices within industry

  • Planning sprints and higher level methodology to guide user-centered design practices and agile workflows

  • Assisting with product strategy, to define planning of realistic deliverables depending on timelines, feasibility and human resource capacity

Product developement actvities

Following an agile process that goes through iterative sprint cycles.

The main process we followed was the following:

Following an agile process that goes through iterative sprint cycles. The following gives examples of different design activities we did.

Information architecture

To understand the structure of information within a particular epic, we would map high level logic mind maps

Customer journeys

Data form interviews is sorted into key insights based on the customer journey, these insights are collated and aligned within the team

Task flows

For different scenarios we would map out the different users and how they interact with each other.

For different user scenarios we would map out the different users and how they interact

Wireframes

Wireframing wouold could through a series of iterations from lowfidelity to utilising the design system in high fidelity

The process and what happened

In the early stages of the product we were required to build the first MVP of the portal. However, because the architecture and business process modelling had already been established by the company and development team and there had been no specialised design intervention. We saw many flaws in the IA and task flows. Therefore, we had to go through series of workshops to define the company goals and do research on the user needs. This process involved a series of workshops with users to understand the following:


  • Information architecture

  • Features and stories

  • User profiles roles, rules and logic flows


As the project became more established, we took a more structudre approach as there were many challenges around alignment. The process that follows outlines this planning and process:

Objective

Objective

Description

Description

Activities

Activities

Creating alignment on the project vision

Creating alignment on the project vision

A detailed analysis of the product vision and current structure of SBV services and processes, from understanding how the concept was selected and prioritsied to envisioning the architecture.

A detailed analysis of the product vision and current structure of SBV services and processes, from understanding how the concept was selected and prioritsied to envisioning the architecture.

• Client Selection and and prioritization of project

• Developing initial vision

• Initial requirements envisioning

• Understanding setup environment

• Understanding of the business strategy

• Client Selection and and prioritization of project

• Developing initial vision

• Initial requirements envisioning

• Understanding setup environment

• Understanding of the business strategy

Setting a roadmap for continuous development

Setting a roadmap for continuous development

Every project can be broken down into blocks, consisting of sprints. Sprints usually are around 2-3 weeks. The main aim of a sprint is to develop backlog items over a period of time defining responsibility, collaboration and resource allocation.

Every project can be broken down into blocks, consisting of sprints. Sprints usually are around 2-3 weeks. The main aim of a sprint is to develop backlog items over a period of time defining responsibility, collaboration and resource allocation.

• Defined business objective and requirements

• Selection and clarification of items

• Defining backlog and sizing items

• Defining timelines

• Defining way of working and reviews

• Determining teams capacity

• Defined business objective and requirements

• Selection and clarification of items

• Defining backlog and sizing items

• Defining timelines

• Defining way of working and reviews

• Determining teams capacity

Putting the project in context & understanding the problem

Putting the project in context & understanding the problem

User research covers a wide range of methods that places people (users) at the centre of the design process and your products. You use user research, to inspire your design, evaluate your solutions, and measure the your impact.

User research covers a wide range of methods that places people (users) at the centre of the design process and your products. You use user research, to inspire your design, evaluate your solutions, and measure the your impact.

• Defining users

• Defining research plan and what we want to learn

• Recruitment and scheduling

• Implementing interviews

• Synthesis data and review

• Report and analyse findings

• Defining users

• Defining research plan and what we want to learn

• Recruitment and scheduling

• Implementing interviews

• Synthesis data and review

• Report and analyse findings

Process of visualizing how a customer interacts with the business

Process of visualizing how a customer interacts with the business

The main goal of Journey mapping is a understand the current process of how the customer or user would engage with a product to achieve a specific task or job to be done.

The main goal of Journey mapping is a understand the current process of how the customer or user would engage with a product to achieve a specific task or job to be done.

• Defining users and profiles goals

• Defining end to end process at higher level

• Defining touchpoints and system interactions

• Defining users and profiles goals

• Defining end to end process at higher level

• Defining touchpoints and system interactions

Evaluating research data and journey to prioritise opportunities

Evaluating research data and journey to prioritise opportunities

The main aim of identifying painpoints is to uncover opportunities for improvement. This may be roadblocks or inefficient processes to reach goals. Therefore, it is analysis of the frictions and frustrations at hand.

The main aim of identifying painpoints is to uncover opportunities for improvement. This may be roadblocks or inefficient processes to reach goals. Therefore, it is analysis of the frictions and frustrations at hand.

• Highlight pain points and frictions

• Ideating potential solutions or opportunities based on the As-is Journey map

• Highlight pain points and frictions

• Ideating potential solutions or opportunities based on the As-is Journey map

Mapping a ideal state journey based on the customers needs

Mapping a ideal state journey based on the customers needs

The to-be journey is a future state map to communicate your product vision, how that relates to your product roadmap and customer services, as well as well as future improvements.

The to-be journey is a future state map to communicate your product vision, how that relates to your product roadmap and customer services, as well as well as future improvements.

• Setting the goal for the future state • Defining touch points and system interactions

• Setting the goal for the future state • Defining touch points and system interactions

Documenting the functional attributes that enable the team to convert ideas into design features

Documenting the functional attributes that enable the team to convert ideas into design features

The main aim of the design requirements is to describe exactly what the users want the system to do and the conditions that make it satisfactory.

The main aim of the design requirements is to describe exactly what the users want the system to do and the conditions that make it satisfactory.

• Defining epics features and

• User story mapping and writing up stories

• Aligning and Writing up the acceptance criteria

• Defining epics features and

• User story mapping and writing up stories

• Aligning and Writing up the acceptance criteria

Designing a system that offers a exceptional experience to the user

Designing a system that offers a exceptional experience to the user

Wireframes (pages) and design elements need continuous engagement and feedback to meet the needs of users and the business. It aligns with what makes sense and where things may not. User testing can take place at various levels, before anything is built.

Wireframes (pages) and design elements need continuous engagement and feedback to meet the needs of users and the business. It aligns with what makes sense and where things may not. User testing can take place at various levels, before anything is built.

• Preparing prototypes

• Planning on what we want to learn and want to test

• Deciding on methods of engagements

• Recruitment for testing

• Analysing test results and reporting • Analysing test results and reporting •Suggesting recommendations for improvement and making changes

• Preparing prototypes

• Planning on what we want to learn and want to test

• Deciding on methods of engagements

• Recruitment for testing

• Analysing test results and reporting • Analysing test results and reporting •Suggesting recommendations for improvement and making changes

Building UX design into the design system

Building UX design into the design system

The main aim of the UI design is translate the User Experience through a scalable design system. The design system considers the style guide, how the components and sections will be built. How they respond to different devices and environments.

The main aim of the UI design is translate the User Experience through a scalable design system. The design system considers the style guide, how the components and sections will be built. How they respond to different devices and environments.

• Developing interactive and responsive screens.

• Working from wireframes and aligning with design system

• Prototyping for further refinement

• Developing interactive and responsive screens.

• Working from wireframes and aligning with design system

• Prototyping for further refinement

Takeaways

SBV's digital transformation faced hurdles like management issues and inexperience. Effective communication with clients about product development scope, aligning with digital standards, and managing expectations is crucial.

Initial challenges stemmed from delayed design integration in product development, with designers joining 18 months later to enhance UX. This highlights the common issue of design not being prioritized from the start, leading to inefficiencies and the need to redo work without a UX perspective from the outset.

Initial challenges stemmed from delayed design integration in product development, with designers joining 18 months later to enhance UX. This highlights the common issue of design not being prioritized from the start, leading to inefficiencies and the need to redo work without a UX perspective from the outset.


Delayed design integration in product development hampers UX and leads to rework. Prioritizing design involvement from the start ensures alignment, enhancing efficiency.


Close collaboration with a product lead is vital for success. They uphold the strongest client relationship, ensuring alignment between planning, ideation, research, business goals, technical feasibility, and user insights.

© Ideaflow Studio. 2024