Download the complete Case Study

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.