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.