Embedded Files
About myPOS
myPOS is a fintech company that enables small and medium-sized enterprises (SMEs) to accept payments through various electronic channels: payment terminals, online and mobile.
The challenge
The challenge was to design a new improved version of the transaction details screen which was provided in a Adobe XD file along with the Home screen of the app for point of reference (Of course, I couldn't help myself and redesigned them both). The following paragraphs describe how the challenge was tackled.
Review of similar apps
After examined the provided screens and researched similar apps, such as Viva Wallet, Qonto, iCard, DSK Smart, PayPal, Revolut, CCBank Mobile App, m-Postbank and others. I consider the process of analysing how things function in similar products as quite important. I tried to review as many apps as possible in order to have a better understanding of various designs and flows. I spent practically an entire day reviewing and learning about the flows of various apps by installing and trying them, or watching videos and browsing images of their screens when not possible to get first-hand experience.
Secondary research
Based on the points identified in the previous two steps the relevant literature and research were reviewed for backing up the assumptions made in the previous two steps. Moreover, for guiding the upcoming user research and addressing common issues found in UX studies in relation to finance apps.
User research
The research was conducted with 6 participants (friends of mine which use online payment apps) and was separated in 3 different parts:
User interviews
Unstructured interviews were conducted. Some of the questions asked were:
Why do you use online payment apps?
What is your level of trust in such apps?
What makes you choose one app over another?
How often you use an online payment app?
What is your purpose when reviewing past transactions?
What information you look for when reviewing past transactions?
Card sorting
In order to refine the information architecture of the Transaction details screen, card sorting exercise was utilized. Participants were asked to organize the transaction details into groups and assign categories to each group. In total, 5 categories were formed. Then, they filled in a survey sorting out the categories by importance.
User review of current design
The participants were shown the provided screens, using Adobe XD’s mobile app for more realist presentation, and they were asked to express their impressions.
Research results
Based on the previous steps the following findings were identified, presented within the SWOT framework.
Strengths
The colour blue is eye pleasing and suits a finance app. This is very important because between 62% and 90% of the people assess products based on the colour alone (Morton, 2019).
Screens are detailed and informative.
The font used (Roboto) provides good readability. Roboto is also used as the default font on Android devices.
The graph on the home page shows information that is relatively clear compared to some other apps.
myPOS’s Transaction Details screen does not include elements that can be distracting (e.g., animations, colourful icons etc.), which is also the approach from all other online payment providers reviewed. Reasonably, the user shouldn’t be distracted when reviewing complex data.
Weaknesses
The design looks cluttered, more white space can be utilised, as reducing the amount of “visual noise” improves comprehension (Fadeyev, 2009; Bank & Cao, 2014). Even though this means that more content has to be placed below the fold, this would not be an issue because people have natural proclivity for scrolling/ swiping, especially on mobile (Fessenden, 2018; Collins, 2020).
The tappable areas are too small. According to Material Design guidelines, touch target size should be at least 48x48dp, and separated by at least 8dp of space (Google, 2021).
Some icons are not labelled which increases the user’s cognitive load (Weinschenk, 2011). Consequently, the users are left to use the click and explore method of finding out what things do. However, this method is more common and specific to younger users, or tech-savvy users (Formanek, 2020). Having in mind that the app is targeted to business owners, it is very likely that this group includes older generations and non-tech-savvy users, which are less likely to click/ tap around due to fear of making irreversible mistakes (Bittner, 2019).
Opportunities
Although the colour blue is nice, more colours can be used to convey meaning, e.g., today’s transactions – income in green, expenses in red.
Provide option to share or print transaction details.
As the main purpose of visiting the Transaction details screen is repeating the transaction, the “MAKE AGAIN” button can appear as floating action button (FAB).
The graph could be more interactive for more engaging experience.
Threats
People tend to trust traditional well-established financial institutions more compared to newcomers or alternative payment providers. This places yet another burden on such mobile apps. Common methods for gaining user’s trust that can be used are: being completely honest and transparent with them, conveying security and safety policies, providing constant feedback, communicating and preventing errors etc. Nevertheless, this topic is vast and should be subject to further studies and discussions.
Results from card sorting
Based on the card sorting exercise the following structure was build, sorted by importance:
1) Amount of Transaction (M = 5.3)
- Amount
- Transfer amount
- Exchange rate
- Fee
2) Sent to (m = 4.6)
- Amount
- Transfer amount
- Exchange rate
- Fee
3) Date (m = 4.5)
- Transaction date
- Estimated execution on
4) Sent from (m = 2.3)
- Account name
- Account number
5) Other (m = 1.5)
- Reference line
- Transaction reference
Note. m = arithmetic mean/ average
Designing solutions
Based on the findings from the research, four different solutions for the Transaction details screen were designed.
Version 1
Version 2
Version 3
Version 4
The different versions were evaluated, considering the findings from the research, the one which provided the most relevant, meaningful and consistent experience for the users (Version 4) was finalized into high-fidelity prototype.
High-fidelity prototyping
The following describes the changes from the original design and the rationale behind them.
Transaction details screen
Firstly, the Transaction screen as it is the focus of this design challenge (see on the next page):
Redesigned Transaction Details Screen
1) Option to share transaction details was added (via social media, email, and print). Sharing options would also allow sharing transaction details easier with Customer Support, when a transaction problem occurs.
Furthermore, the design of the icon is the common one used for Android devices (I assumed that the app is for Android because the status bar in the provided file is for Android). It should be also noted that the back and sharing buttons are presented as icons and not labelled which contradicts with the statements made earlier regarding icons. However, in this case the back button and sharing button are so intrinsic to Android devices that they do not need labelling. Everyone using Android device is most likely familiar with the meaning of these icons. That being said, in respect to iOS devices its native buttons should be used. Alternatively, "More" buttons (three dots) can be used for all operating systems.
2) Transaction status was added to communicate transaction’s execution (Successful, Pending, Failed). If the status is failed, the reason for the failure and how the user can resolve it should be communicated.
3) The information was fragmented and grouped into few categories to make it more scannable and “digestible” for the users. The Transaction details were arranged according to users’ mental model established through user research.
4) The button “MAKE AGAIN” was made floating action button (FAB).
Home screen
The overall UI was given more space to “breathe”, and the tappable areas were enlarged for easier and more confident taps.
Redesigned Home Screen
1) Icons for support and switching accounts were substituted with labelled buttons to convey better clarity. Further, the navigation bar should be temporarily hidden when scrolling down for more immersive experience, and reappear when scrolling up.
2) Today’s transactions were made clearer by using colours.
The blue background with white text does not pass the contrast ratio test of at least 4.5:1, that is why it was substituted with white background and dark blue text which provides a far better contrast ratio of 14.1:1.
As a central piece of the home screen, the graph was designed to be more interactive, hence more engaging for the users.
3) Main action buttons were enlarged, and hidden items were made accessible via horizontal scroll.
4) The transactions displayed were labelled as Recent Transactions.
5) The filter was made more discoverable which also allowed utilizing wider search field.
6) Recent transactions were grouped by date, as “chunking” information together into groups makes it easier for assimilation.
Moreover, the containers of the transactions were enlarged to make them appear less cluttered and easier for tapping. The design followed the Material Design guidelines for three-line items in lists.
When there are no transactions to be shown (e.g., first use of the app), this area should be used as opportunity to help users get started promptly, therefore reducing the chance for abandonment. The average digital banking app loses around 70% of its users within a day after the installation, and 85% of its users within the first 7 days (Statista, 2020).
7) Bottom app bar icons were simplified in order to make them more easily recognizable.
Preference testing
After completing my high-fidelity prototype, the two designs (existing and redesign) were integrated into Google Forms survey and send to 5 people (not the same tones hat participated in the use research) which were asked to indicate which design they preferred.
Existing Home Screen
2 VOTES
Vs.
Redesigned Home Screen
3 VOTES
Existing Transaction Details Screen
1 VOTE
Vs.
Redesigned Transaction Details Screen
4 VOTES
Regardless of the results, it should be noted that preference testing leads to a bias in favour of factors, such as visual design, or whether it seems familiar, or a personal preference (such as disliking a certain colour). In reality, people do not look at two versions and make decisions on which one they prefer visually (Travis, 2019). Hence, it would be more beneficial to be conducted a usability testing with interactive prototypes, or A/B testing with live versions of the app. These methods provide more significant data because they are based on user behaviour, instead of user preference.
Limitations
I wasn’t able to use these particular screens of the app because access is provided only to businesses. Also, the provided XD file didn’t contain any interactions besides the one related to the task. As result, this led to some design assumptions, for example, that the slider indicators, below the graph, change the timeframe that the graph displays. Likewise, this applies to the similar business apps that were reviewed.
Furthermore, the user research could benefit from more participants, also within the target group (i.e., business owners), and from different cultural backgrounds as the app is used across many countries. In this aspect, cultural design considerations also require further research.
Finally, as discussed in the previous section, more reliable testing was not possible because of time and resource constraints. Due to the same limitations more UX/ UI deliverables couldn’t be produced.
Conclusion
I enjoyed working on this design challenge which gave me the chance to learn more about information architecture, user research, and visual design, and the company itself. I would be glad to see the redesign implemented and test it on live, as such kind of validation is critical in any project and far more unbiased.
Page updated
Google Sites
Report abuse