It's more than a bank; it’s a financial Lifestyle
A lifestyle digital financial app helps users do all they need in one place (one-stop-shop).
Get the full UI/UX Case Study
Using the double diamond framework, showing how to embrace divergent thinking and present a new personalized experience for the end-user.
Send the complete Case Study to my email.
Design Process (Double Dimond)
The double diamond design process is not linear, so in each phase, we have to revise and edit the previous step to have a tangible outcome that considers a solid reference for the idea.
-
-
Discover
Problem definition
User research
Market research
Synthesize information -
Define
Solution definition
Persona definition
-
-
-
Develop
Information Architecture
Services flow
Feature developments
Wireframe/ Prototype
UX writing developments
UI elements/ structure
Usability testing -
Delivery
Screens Design
Prototype
Usability testing
-
Synthesize your research
Our persona is active and changeable along with the design process, so we did around 40 user interviews with more detailed inquiries to collect more details and make our persona alive.
Affinity is used here to characterize the persona that considers my project's base and the primary reference.
Information Architecture (IA)
Categories All the features under a knowable label are understood by user by doing card sorting exercises and iterating it many times to have a concrete classes and naming.
We adapted the visual design principles, giving the user the recognizability of what we meant by communicating the user's empathy.
- Unity and Harmony
- Balance
- Hierarchy
- Scale and Proportion
- Dominance and Emphasis
- Similarity and Contrast
The communication box is added to the top of this, which predicts and assists the user by displaying the needed activity with actions and the budget component according to the user's priorities.
All the above components took place on the top, using a Golden Ratio proportion to have this aesthetic & balanced view in positioning the design elements.
-
Budget Component
Was Reserved this spot according to the golden ratio proportion that took the place on the top to have this aesthetic & balanced view in positioning the design elements. It will also assist in emphasizing & Hierarchy principle in the screen design.
-
Global navigation
To maintain the accessibility of all the main functions, the best way to implement a sticky action bar that goes over the level one services is to have the easiest way to navigate and explore.
An emphasis on the dashboard gives an overall look and contains the most changed information emphasis on the dashboard provides a comprehensive eye and includes the most changed information.
-
Communication area
The communication area is the first spot where the user can see his related messages and interact. Build it on a Machine learning approach that can predict and assist user needs.
-
Balance Details
Is the first area that draws user attention, as it is used to display the financial balance status significant numbers that make user, from the first glance, to check his balance with the ability to check the details for each section.
Slider for everything you need :)
Highlights The main categories with expenses indicator with the ability to tap to see the details of each one. The editing budget is there as well by adding or changing the cap.
Speak in your user's voice :)
Talking in your user's voice keeps your messages clear and touchable, reserving the top area for announcing and communicating the messages phrased into actions that help to asset and take the right decisions.








Quick action in need
Applying gadgets for the most needed actions and updates helps for better communication.