Lessons learned and Resolutions
-
The UI induced some cognitive overload that trying to visually communicate too many features. I must reduce several visual elements that attempt to convey too much information. Conversely, common elements such as a chevron to indicate an element is clickable must be used when applicable
-
Focus on the specific user task instead of potentially overwhelming the user with additional features on the same screen. I must keep adhere to an intuitive and efficient information architecture to provide the user navigation to other features.
- Onboarding animations can distract the user from the intended message. I need to replace animations with a simple graphic and text to convey key features.
- Some UI elements that do not include text may be ambiguous and therefore ignored. Instead, I should use more established design patterns such as button with descriptive text.
Initial onboarding was heavily focused on animations to tell a story about key features. However, this became more of a distraction. Instead, simpler static screens were utilized to share a concise message. Furthermore, the UI was reduced to eliminate clashing and distracting elements. Finally, a simpler navigation was used to help the user focus on the onboarding copy.
The original wallet view provided options for viewing financial cards and passes/tickets. However, the intent of further iterations intended to provide options for other items that could be carried in the wallet. However, the UI of the second iteration included UI that presented significant cognitive overload and while attempting to follow a consistent theme. Once again, the latest iteration followed a simpler and cleaner interface that was much more functional and simpler for the user to navigate.
-
Measure dimensions and font sizes of popular apps within Adobe XD to get a better idea of how I should modify the size of my visual elements. Also, make effort review various screens on actual target devices instead of just relying upon protoyping software preview screens.
-
Focus on the specific user task instead of potentially overwhelming the user with additional features on the same screen. Intuitive and efficient information architecture should simple options for navigation to other features.
- Use more negative space and use separators to create contrast in order to highlight distinct features and functionality
- Implement UI enhancements while being mindful of cognitive overload and distractions that do not contribute to usability
Transactions and Accounts view iterations
The account and transactions views intended to provide a list of transactions per account. Further iterations clarified debits versus credits as well as providing transaction category information. In the third iteration, the card was modified to more closely resemble the look and feel of the physical card associated with the account. Since the user could scroll through the accounts transactions, the space used to depict the card was considered to provide a better relationship to the digitization of an actual wallet and less of an abstraction the UI of cards in the earlier iterations.
The fist iteration of Pay Person focused on depicting a card and account information while the remaining view allowed for locating a recipient. Further iterations focused on locating a user as well as providing an option to make a payment to an entity such as when paying a bill. The UI was further improved with modifications to alignment of payment source information as well as the copy and color of the overlapping buttons at the top. The latest iteration provides a cleaner flow while also managing a variety of navigation choices a user may follow for this task.
The original wallet view provided options for viewing financial cards and passes/tickets. However, the intent of further iterations intended to provide options for other items that could be carried in the wallet. However, the UI of the second iteration included UI that presented significant cognitive overload and while attempting to follow a consistent theme. Once again, the latest iteration followed a simpler and cleaner interface that was much more functional and simpler for the user to navigate.
-
Measure dimensions and font sizes of popular apps within Adobe XD to get a better idea of how I should modify the size of my visual elements. Also, make effort review various screens on actual target devices instead of just relying upon protoyping software preview screens.
-
Focus on the specific user task instead of potentially overwhelming the user with additional features on the same screen. Intuitive and efficient information architecture should simple options for navigation to other features.
- Use more negative space and use separators to create contrast in order to highlight distinct features and functionality
- Implement UI enhancements while being mindful of cognitive overload and distractions that do not contribute to usability
The account and transactions views intended to provide a list of transactions per account. Further iterations clarified debits versus credits as well as providing transaction category information. In the third iteration, the card was modified to more closely resemble the look and feel of the physical card associated with the account. Since the user could scroll through the accounts transactions, the space used to depict the card was considered to provide a better relationship to the digitization of an actual wallet and less of an abstraction the UI of cards in the earlier iterations.