GPHD135 Journal #1: UI vs. UX

Shane Kerr
5 min readFeb 4, 2021

Bank of America: Mobile App

Bank of America Interface

From previous courses that I haven taken, I understood UX/UI design as separate entities. Initially I thought UX “User Experience” was what you feel/experience in the design. UI “User Interface” in comparison I believed are solely the visuals/what you see in the design.

After reading this weeks article “The 3 Big Differences Between UX And UI Design” from https://usabilitygeek.com/big-differences-ux-ui-design/ written by author Alan Smith, I realized that my understanding was actually pretty accurate, however I also learned more proper details about UX/UI design.

Don Norman

The first thing I gathered from the author was that UX was actually coined from Don Norman. Don explains that UX is about the entire experience that the user has with the product, the company, and the services.

This definition is very close to what I believed UX to be.

In addition, I also learned from the author what the actual definitive roles are for a UX designer:

  • Content/Strategy: Customer Analysis, Competitor Analysis, Product Structure/Strategy.
  • Prototyping and Wireframing: Prototyping, Testing/Iteration, Development, Planning, Wireframing.
  • Analytics and Execution: Coordination with Developer(s), Coordination with UI Designer(s), Analysis and Iteration, Tracking Goals and Integration.
User Interface design

On the other end, I learned from the author that UI has an artistic component as it relates to the design and interface with the product. It affects what the end-user sees, hears, and feels. UX has more of a social component for market research and communicating with clients to understand what their needs are.

Other information I learned from the author about UI is the definitive roles are for a UI designer:

  • Look and Feel: Branding and Graphic Development, User Guides/Storyline, Customer Analysis, Design Research.
  • Responsiveness and Interactivity: Adaptation to All Device Screen Sizes, Interactivity and Animation, Implementation with Developer, UI Prototyping, Implementation with Developer.

Further reading on the differences between UX/UI, allowed me to understand that while I see them as separate entities, not everyone identifies them that way. Instead, I discovered that many people/businesses see the two entities overlapping.

The author actually points out something that helped me understand why this is technically wrong. The author identifies that while we all disagree on this topic, we can all agree on with little controversy as stated below:

  • Yes, the terms are related.
  • Yes, the terms can overlap.
  • No, they are not interchangeable — no matter how often people use them interchangeably.

I have learned that they overlap, but they are different, you cannot interchange them. UX/UI designers can do both of them as part of their job but they are actually separate entities and must be performed differently when handling a UX/UI job.

Bank of America UI

One real world example of UI verses UX would be the Bank of America Mobile app.

I use this app all the time for my own personal banking, almost every day so I am very familiar with its design.

When you initialize/open the app you are are greeted with an nice UI of the company logo, letting you visually see what you are connecting to which is followed by an interface that allows you to sign in to your account. An UX adaptation of this is the experience that you have signing in, for me it is successful, because I have the ability to type or utilize Apple’s ability of face identification.

Whether you are signing in to check your money in your account, transfer or pay, the app has many great and legible design solutions. If you are just checking the money in your account the UI is very bold, colorful and simplistic enough for you to easily identify. This allows the experience, UX in the app to be smooth as you transition to the account when you tap it and can then move to more UI showcasing the payment history for that account.

Accounts, dashboard & paying through mobile
Depositing checks

Another example of Bank of America showcasing great use of UX/UI would be how the app allows you to deposit a check.

The UI is very successful as it uses easy to see the photo icons which helps create a visual association for us. With the UI doing its job, we can identify that we are taking a picture, followed by the title/call to action.

The UX comes into play when you are done taking your necessary pictures of the front and back of the check, selecting accounts. The UX is very nice because then it connects/waits for approval from Bank of America and allows you to successfully deposit a check from your mobile phone instead of waiting in a long line.

Transferring, accounts & login
Previous version of login and pay history

Applications like the Bank of America mobile, allows us all an awesome visual and user experience that truly helps us all out with banking/financials.

Although Bank of America mobile is very successful it does have some flaws for both UX/UI.

My personal negative of Bank of America mobile is that I believe that the app doesn’t show users which accounts are joint and which are not. This can be a frustrating experience for users and should be addressed. There is not a clear visual design implication, which is why users like myself can get confused and have to really do some searching to figure out. Possible solutions would be to simply create an tag on the account that says “Joint” or something else and then organize it visually through the hierarchy.

Overall I learned from the article that this is an extremely important topic to have with employers, clients and anyone asking you to perform the roles of UX/UI because some people/businesses expect you to do either both or one of the other.

--

--