Techcombank F@st Mobile App is facing the challenges of user interface design, performance issues, and irrespective degree of functional requirements. Because the number of Techcombak app users has been increasing significantly, the necessity and significance of redesigning the Techcombank F@st Mobile App are needed to deliver excellent customer service and satisfaction.
The growth of E-commerce in the online payment field has been spectacular in 2018. In order to compete with other opponents under the fierce competition in a market, the bank service needs to be focused, adapting to the trend of the market and meeting customer expectations. The second largest bank of Viet Nam –Techcombank has proven its position among top 5 leading banks on financial and banking services. Unfortunately, the top 5 of best banking applications did not include the name of Techcombank F@st Mobile App
The process of this project include 3 different stages as display below:
There are several payments services on the home screen provided a one-touch function that is extremely fragmental. These functions should allow users to do the transaction by the categories. However, the order of icons creates a confusing for the users to comfortably pick their choice of transactions.
The same issue happens with other banking services such as Savings, Invest, Loans and Insurance. The fragment again contributes fundamental frustration for users when performing desired actions. Moreover, these features are not functional on the application because the application only takes users to the webpage where the relevant information is shown. Then these central spaces on screen should not betaken by the unnecessary features.
Moving to the next usability wall, the navigation bar is where the main functional features could be placed is now covered with the redundant payments choices.Furthermore, the dimension and quality of the icon as well as the text are placed against the basic guideline of designing app UI from both Apple and Google. These issues is creating a huge effect of frustration for users whenever they want to navigate through the app.
Lastly, the extensive list of categories in toggle would be reconstructed for better management. For example, the ’’Register of FaceID’’ and ’’Smart OTP Setting’’ could become the subcategories of settings function. The unorganized structure runs agains tusers and making them leave the app very quickly.
According to Vienam E-commerce Association report, the mobile banking applications from Vietcombank, Viettinbank and VP-bank are on the top of customers’ satisfaction beyond the others in 2017 and 2018. Then, taking into account of these applications used on the go, the comparison between Techcombank F@st Mobile Application with these competitors is worth conducting.
The banking services in Vietnam have several common services that can be applied for all financial organizations. However, the main certain points to help these applications stand out from the others are the visibility scale and appropriate organizing of the application’s features. Customers find flexibility, user friendliness and reliability when using these apps.
Following Nielsen’s 10 general principles for interaction design, the competitive analysis below placed Techcombank F@st Mobile Application against the others by using scale 1(lowest) to 5(highest) point system.
Figure above clearly shows that the Techcombank F@st Mobile Application fared below the average for usability interactions.
After the analysis, there are few adjustments can be produced to redesign the UserInterface of the Techcombank app such as reconstructing the home screen, editing the navigation bar and reorganizing/grouping similar kind of functions. However, these are just assumptions. The research needs to continue to expose the users’ opinion.
Subsequently, the affinity mapping is carried out with the use of customer’s references, particularly collection of pain-points and set of questions which need to be solved. The technique is an effective and efficient way of collecting1similar or part-similar problems and questions then carefully organizing them into different groups that eventually produced a big picture. With the contribution from the marketing research team, the author finally explored the completed affinity map. The target population is customers who have been using the Techcombank F@st Mobile App; and they are divided into three different age group. As display in the figure below, group blue includes cutomers from age 18 to 30. The older group is displayed by red color and the age of this group is from 31 to 50. Lastly, senior group preresents the customers over 50.
Responses were obtained from Affinity map can be organized into several aspects that had to take into consideration for the new User Interface design. The list of aspects included:
The main personas were created based on aspects that were discovered in the section above.
Minh Vy-the assistant manager represents the young age group of customer who tends to find their convenince in every aspect of daily life. A tech-savvy person who are really hard working and organized. Hence, she expects to review the day-by-day transactions and fund status consistently. Moreover, the app should allow her to pay several type of bills by the end of month without many efforts. The current application, however, produces many steps to complete the payment. The main functions are fragmental and display very limited information.
Moving to the next persona, the graphic designer in middle age has a small family. His daily purposes are totally different than other groups of customers. The married man has to have different accounts for several goals such as saving or payment for childrens. This type of people desirably wants to use the easy and mobile-friendly app that could help them handle numerous accounts.
Last but not least, the elder taxi driver who will be soon retired. He represents an older age group in society who are hard to adapt a new technology. The daily income from his job is the main reason why he will use the app. Thus, the customer expect the app has to be easy to understand and intuitive to use. Unfortunately, the current app is creating the big frustrating to him and he urges to see the big different in the new app.
To further understand the whole user experience before doing wireframe, I created a user journey map to consider what specific personas will face when using existing application based on the pain points from real customers that has been discussed in affinity mapping.
Based on the analysis results, the 2 by 2 matrix were conducted to carry out specific features. By categorizing them into different areas of the matrix, the information architecture and hierarchy of the new Techcombank app was revealed.
The activity diagram was used to construct the new architecture for the application. The process demanded the contribution from author and developers.
After creating the information architecture, the next challenge was to start the prototyping phase. As its simple and convenient, the paper prototyping was a suitable method to use for the first low fidelity wireframe. The process of drawing followed by discussion and reiteration. During this time, several options were created and test out with members from the marketing team and the developer team. The testers in this phrase were very limited based on the short testing period as well as various technical and informative aspects. However, the feedbacks from testers were very valuable for choosing the right wireframe idea and eliminating the unsuitable options.
The unsuitable wireframes, however, did contribute some elements and perspectives to improve the process of design. Furthermore, by combining the advantages of each version, the final low fidelity wireframe would be essential to build a high fidelity prototype.
The Login Page presents the Techcombank logo along with Techcombank symbol as a pattern was used in the background. On the top right, the language switch is placed to help users choose between English and Vietnamese. The input fields including username and password are indicated in the center, followed by the option for new customer.
Navigation is the most important factor to enhance usability and user experience for the new application. Due to the current frustration and redundant features in the toggle that were discussed in previous chapter, the toggle was removed and the new navigation bar was built to please the new purpose.
The Main Screen helps users to review most attractive information that was pointed out from the previous chapter. The pain point such as uncategorized session and fragment of features have been solved by combining and moving these features to another tab.Moreover, the main account, current cards as well as recent transaction are clearly presented.
The main screen is now liveable and functioned. The place of toggle on the top left is now “Sign Out” and the Setting places in the top right corner. The new dashboard helps users to accomplish the goal by providing them the main account information including account number, balance and ability to edit avatar. Users are also given a ability to check their current cards or latest transactions.
By introducing ’’My Wallet’’ that includes all the accounts and cards of user, the problem discussed about lacking of information has been solved. Firstly, users easily check all of their available accounts with available balance and account number. Furthermore, the transfer button allows user an opportunity to perform quick action for payment service. Secondary, the card field provide a list of cards and their basic information such as current balance, valid date, type of card and last 4 digit of card number.
By tapping to specific account, the account overview is displayed with account label and lastest transactions. The button of transfer is still existed in this page to create the convenience for users whenever they want to use quick action. The transaction list gives users a chance to review their transaction by showing a typeof it with suitable icons, color indicator and date of purchase. The amount is showing on the right side with red color for balance spending and green color for balance receiving. The search function on the top right corner will lead users to search page where they can perform their search action.
Card overview function provides customer full information of their card from status, available balance, account for usage to cardholder name. Moreover, Card Overview allows users to block their card in case of lost, stolen or other emergency cases.
No more lacking of information and boring summaries. The Transaction Details not only gives you a new live able design but also provides enough information needed for your reviewing. The Transaction Details can be accessed by tapping transaction in AccountOverview or simply choose the lastest payment in Main Screen.
In order to solve the main problem of fragment, the new Payment screen was created to combine all the payments service of Techcombank and list them in logic order.These services now have new icons and color labels and are ready to perform actions for users. Moreover, the Search bar is appeared to help people search for their desired services. For each payment type, there are some minor differences.
These screens have simply placed some information about additionals or promotions.The introduction of these screens did help to accomplish the goal of reorganizing. The users from testing session found some interesting about these functions. However, they also stated that these were not very important to them and they would like to see it as the extras to check in their spare time. For instant, the promotion screen provides many good deals that may attract users’ attentions. By tapping to the news, user will be directed to suitable webpage which shows details of the promotion.
Planning the research and design process help me narrow down the core of challenge in order to pursue the desired goals
The users’ test, therefore, were a crucial part in helping developing the result. I came to realize the importance of users’ testing and how essential iterations are to achieve a good result.
The value of constantly validating and iterating is significant in product design. Using theories, related projects and resources did help to pursue the primary goal of the project. Besides, these valuable documents sharpened and enhanced the author’s knowledge and skills for future endeavors.
