This is week two of my Designber series in which I'm dedicating the month of December to improving my UI/UX skills, and also to teaching people the importance of good design.
For this week's challenge, I took myself out of my comfort zone (which is website design) and took on the challenge of redesigning the Tim Hortons Double Double Visa card. I chose to redesign this card because it is a product I use myself, and therefore have personal experience with it as a user. It was also a great product to redesign because I could focus more on user experience design, rather than user interface design.
The difference between the two is a fine line and people often confuse the two. User interface (UI) design is focused on what the product looks like. This has to do with the theme of a product. For example, Bootstrap is a UI theme; it has a good, generic look and feel, and therefore good UI design. Although products build with Bootstrap will have good UI design, good user experience (UX) design is not a given. UX design focuses on how the users interact with a product. This include user flow through an product, organization of content, and the positioning of UI elements such as buttons, lists, etc... Bootstrap has no preference for UX because it is meant to be generic. This means that UX is left up to you and it could mean the difference between having a good product people love to use, or one people hate.
In my Tim Hortons Double Double Visa card design, I decided to change the user flow by having the card be Visa by default. This makes the use of the card easier because the user no longer has to press a button in order to use their card as a Visa -- they only have press a button when using the Tim Cash feature. I also pushed the button closer to the center because it makes for an easier press of the button when holding the card naturally.