IXD103 Project 01 – Design application (user interface application and book application )

Having done some experimentation with the design of my bank card, I move on to the design of my banking app. In this exercise, we were asked to replicate other existing bank app layouts but put in our own branding. In this way, we did learn how

At first, I have no idea where to start. More specifically, because there was an overwhelming amount of bank user interfaces that I could potentially replicate, I didn’t know which ones I should choose.

So I started with the basic, with the opening screens, which all bank apps would have;

The left side is Monzo’s user interface, and the right side is my replication.

The font I chose was Noto sans. I chose it for a few reasons;

  1. clean sans serif matches the sans serif of the wordmark and is web safe, suitable for online reading
  2. this font is developed to suit many languages across the world including Korean and Japanese which have limited font choices. If the brand does ever decide to expand into another country, the Noto sans can prove to be universal and useful.
  3. Comes in a variety of thicknesses which is useful for visual hierarchy
  4. I read while in research ( Dr. Mark Womack –What Font Should I Use?) that while sans serif is suitable for small bodies of text, it is usually not suitable for larger paragraphs. I don’t think I need to worry about this in my bank app as I don’t think large chunks of text will be used; but for my bank landing page, the related family members of Noto Sans include Noto serif, which could be useful for larger chunks of text on the webpage.

Next, I did some research on bank apps, and there were a few articles which were very helpful. My favourite resource is an article from Medium which gave the links to 10 different case studies of banking apps, and another article called “Banking app design: 10 great patterns “by justinmind.com.

After reading some of the studies, I noticed that a lot of these apps share some common functions. 1 is the wallet function, and the other is a daily summary of transactions. I decide to incorporate these 2 functions into my app;

( On the left is a template from Fimga called Monzo app concept, and on the right is my replication. I chose this template because of how clean and simple the wallet function is. I also really liked that in the traction section, it shows daily spending and how much money you out left to spend in the month with a visual meter)

While researching, I came across a screen design which incropated triangles into its spending summary. I really liked this idea as my own brand has a focus on triangles;














While I was designing my bank user interface, I continue to look up triangle designs online. I am fascinated by the patterns, and one day when I was looking at fabric pints on Pinterest I came across this;














And this pattern inspired my book design;

Leave a Reply

Your email address will not be published.