Mobile Banking App | Design Challenge
Improving DFCU Bank App main feed UX to increase conversion rates.
Redesign the mobile App main feed experience to address user's pain points
Context
Design Challenge
DFCU Bank is a leading financial institution in Uganda offering a wide range of banking products. With the disruption of the financial industry by FinTech companies has created a sense of innovation in the bank to allow it stay ahead of industry trends especially in digital transformation. We need to rethink main feed UX to increase conversion rates for our main digital activities.
Project Overview
Project Core Team
This was a solo project done within a week including UX research, wireframing, mockup design and prototyping. Note that this project was limited to the main feed page UX of the App
Project summary
Project
DFCU Bank App
My Role
UI/UX Designer
Category
Banking
Duration
One Week
The Problem
Increasing product offerings has created scalability issues
The current design comes with it's scalability and accessibility issues
Poor scalability
The layout and navigation were not optimized for a rapidly expanding product offerings
Unintuitive interactivity
The navigation process to most activities/products is confusing with the most prominent issue being the lack of a "back navigation" button
Hard to discover
Users struggled to find core offerings that matched their preferences including the bank's promotional products
Brand design inconsistences
Lack of brand consistence in the App's user interface which might reduce brand loyalty amongst users.
The Challenge
Transform the overwhelming app's main feed experience into an engaging, delightful and scalable experience that guides users towards their main goal faster.
Design Principles
Expected improvements to meet design objectives
Designing for scalability while improving the user experience.
Redefine the navigation experience
Prioritize navigation and interactions that feel natural and intuitive for users. They should also follow a common flow to other apps users interact with for memorability and learnability.
Simplicity & Clarity
Minimize complexity and cognitive load by presenting information in a clear, concise, and easily digestible manner.
Scaleable & Flexible
Have a forward-thinking approach that ensures the app especially the main feed can readily adapt to new content, features, and user needs
Consistency & Familiarity
Create a design-system, adhere to the established platform conventions to create a predictable and user-friendly experience.
My process
It isn't as straight forward as it seems
In reality there is a lot of iteration following design critics
1
Scoping
Context
Target Users
Previous research
2
Research
User interviews
Field Observation
3
Ideation
Journey mapping
Brainstorming
Sketching Ideas
4
Prototyping
Lo-Fi prototypes
Hi-Fi Prototypes
Final Design
5
Evaluation
User Testing
Design critic
Growing painpoints
Main feed page
Initially designed to have two user types; Farmers and ESCOs, As new user types and offerings categories were added, users faced difficulty navigating the expanding collection, and the homepage's limited space hindered effective content showcasing.
Earlier main feed
Pinpointed issues
As a first time user, it's hard for me to know how to search/navigate to product offerings
I had issues going back to the main feed on various occasions because I could not find the "back" button
Having heard of the Mobiloan product, I had issues finding where it was located in the app
I had issues starting bank to bank transaction because I failed on 3 attempts to find where to start
Patching things up (digital wireframes)
First off, I needed to make it easier for users to find product offerings that align with their interests, and present information in a clear and organized manner to avoid overwhelming them. We also need to make the interface familiar with similar apps UX for easy learnability of new and existing users.
New main feed wireframe
Patching things up (digital design)
First off, I needed to make it easier for users to find product offerings that align with their interests, and present information in a clear and organized manner to avoid overwhelming them. We also need to make the interface familiar with similar apps UX for easy learnability of new and existing users.
New main feed
The improvements
Easy access to core features and product offerings through well placed icons and buttons and introduction of a navigation bar
Adherence to brand colors while adhering to accessibility standards/guidelines
Emphasizing the Mobiloan link given that it is a promotional product accessible only digitally.
Redesigning the history section UI to depict the nature of transaction (debit/credit)
Prototype
Enjoy the prototype video presentation
Prototype
Project take aways
The Power of Passive Discovery — Curating engaging content on the main feed page can drive "passive discovery," exposing users to offerings they might not have actively sought out. A balance of active and passive discovery is crucial for a platform with a growing product offerings
Influence Through Input — Having to design for simplicity first causes you to prioritize clear focus states, minimizing complex input combinations, and optimizing for directional navigation.
There is need to develop a design system to have cohesion in the various app components. This will lead to faster implementation of design changes by the development and design teams.
Interactive prototype