SYAFIQ K. DESIGNS
UOB Mobile Banking
Methods: Wireframing, User Flow, High-Res Mockups, UI Specifications & Documentation
Tools: Adobe Illustrator/Photoshop, Microsoft Excel/Doc
Type: Client Project
Timeline: 6-12months
Challenge:
During the peak of when smartphone apps were ubiquitous; most brands felt the need to grasp the opportunity to engage and move to the next level with their consumers/users. The challenge for the UOB was not only to translate the entire online web features to a whole new mobile experience, but to also make it simpler, smarter and more intuitive for their new users.
Role:
Working with 2-3 other teammates, we were tasked to design from scratch the mobile banking app for UOB. We had to understand how the banking app work for our target users, adapt the same structure from online (desktop) to mobile. We had to first research the online banking on desktop and then design wireframes and user flows; while keeping in mind improvements that could have been made to make the experience smoother for our users.
1
2
3
4
5
Discover
Define
Develop
Design
Next Steps
Understanding UOB's internet banking:
UOB's internet banking has been quite a success following the years after it was launched. However with the rise of mobile smartphones, the need to cater to mobile banking becomes more and more. Most international banks, such as Standard Chartered Bank, have already launched their mobile banking apps and are progressing to equip yet even more features to their arsenal. UOB's goal is to incorporate all the featues (if not more) from their internet banking to their mobile banking app.
We first did a some research by interviewing the client team responsible for the internet banking and some of the responses gathered were:
Consistency:
Similar user flow with the internet banking, since certain programs and functions would be easier for the developers to follow, thus cutting time and costs.
Make it look premium:
Our client has expressed that they want the app looking as classy as UOB's branding
(i.e. look as polished as
their competitors')
Make it easy to use:
Fucntionality and navigation should not only be easy to use, but shorter steps should/could be considered.
Desktop to mobile observations:
Keeping the 3 points we mentioned above in mind, some observations must also be considered and addressed since we are designing a desktop to mobile experience. Some of the visuals, text, processes, instructions, etc. might not be suitable or recommended for mobile since they may be too overwhelming (note that we are just designing for mobile). We also looked at how we can improve the entire usability using the Heuristic Analysis. We listed some of the observed findings and recommendations here:
1
2
3
4
5
Discover
Define
Develop
Design
Next Steps
Projected persona:
No user interviews were unfortunately conducted back then since it was not accounted for and agreed in the cost and design process between the client and the design team (ie. we were not responsible for managing the costs of the business). However, we managed to gather basic information on the users who were already using UOB internet banking. Thus the persona presented here is a projected persona to understand their habit, lifestyle, goals & frustrations better, to further help us in the ideation process.
We understand with this limitation we were not able to get a comprehensive understanding of the user needs and frustrations; therefore in the future, we would definitely propose testings to further validate the design.
Thomas, 28, Consultant, Singapore
"I use my mobile phone 24/7. Would be a great convenience if I can do all my online bank transactions here."
Goals:
• Wants to be able to use his phone to make payments
• Wants to be able to save his family's or friend's account numbers on his online for future transactions
Frustrations:
• Dislikes hassle and hard to understand
online processes or steps
• Dislikes not being able to find the features or functions he has been using in the desktop version
Problem:
Thomas needs a mobile banking app that is easy to use because he constantly on his mobile phone and needs it for online and transactions.
Solution:
We believe by designing a mobile banking app, Thomas will have the utmost convenience of making payments and transactions online.
How Might We:
-
Create seamless navigation and flow for the users?
-
Make the app easy to use without the need for tutorials or onboarding guides?
-
Improve the number of steps/processes from the desktop version?
1
2
3
4
5
Discover
Define
Develop
Design
Next Steps
UOB's unique selling point:
During the initial meetings with the client, we were informed that UOB would want to sell their app as the first mobile app in Singapore that allows users to withdraw cash from automated teller machines (ATMs) without the use of their bank cards.
This was a feature that was imperative for us to highlight in our design.
Learning from a competitor:
There were not many competitors that had already released online banking apps. However, one competitor, Standard Chartered Bank(SCB), has already released its mobile banking app, Breeze, a year or two beforehand. Studying its app back then, allowed us to understand a few things when designing for UOB's app.
One of the things worth mentioning was that SCB retained the same iPhone UX/UI elements. This was to ensure that users would have a sense of familiarity when using the app.
So what should we focus on?:
Based on our client's business goals, our UX recommendations, persona's goals and considerations from their competitor's product, we have mapped out what needs to be focused on in terms of priority and how much they would impact the business/users using the MoSCoW method:
Must
Should
Could
Won't
-
Highlight the UOB's USP
-
Seamless user flow and navigation for users
-
Make the app easy to use without the need for tutorials or onboarding guides
-
Improve the number of steps/processes from the desktop version
-
Retain the same iPhone UX/UI interactive elements
-
Recommend to have shorter copywriting suited for mobile
-
Steer away from the existing internet banking features
-
Change the branding identity
Before getting started:
We worked closely with the developers to align on the sitemap (taking reference from the desktop internet banking. This allowed us to discuss with the stakeholders and prioritise which pages we should focus on designing/building first. An example of the sitemap shown below:
1
2
3
4
5
Discover
Define
Develop
Design
Next Steps
Wireframes:
Wireframes were immediately created (taking refrence from the internet banking's sitemap) to give us a sense of the navigation, functionality and
how the information & visuals would be laid out. An example shown here showing the loading screen for first time users:
Improvements made:
Based on the MoSCoW method above, some of the improvements made were:
1) Condensing menu list
When we tested the first version, our internal participants have addressed that the menu right after the loading screen was too confusing, too many options for them to choose from and they have no idea where to locate where they should go.
We decided to group some of the options into categories so users could locate what they want to do easily.
2) Introduce an alternate 'swipe' mode
Our client has expressed that the list for the menu was too lackluster and underwhelming for the first screen that users would see. However they still wanted to keep the list as an option.
We addressed that by having an alternate 'swipe' mode, so that we could present eye-popping visuals and information of the selected menu. We tested with our clients & participants and they expressed that they prefer the swipe mode much more than the list mode.
Based on that, we decided to make the swipe mode as the first thing that users would see, and the list mode as the secondary option. This mode also allowed us to highlight UOB's USP better.
3) Simplifying the processes/copywriting
As mentioned in the MoSCoW method, under 'Could', we recommended to have shorter copywriting suited for mobile. As shown below, we decided to simplify the steps. Instead of having the words for the steps from the desktop version, we amended them to numbered steps.
From wireframes to mockups:
After we have ironed out all the necessary functionalities and navigation with the clients and participants for testings, we moved on to creating high fidelity(hi-fi) mockups. As you can see below, we ensured the mockups look as close as possible to the wireframes created.
Keeping the UI icons consistent:
We proposed icons that were to be used mainly for the navigation bar. Initially, we sourced out similar look and feel icons and proposed a 3D version for the client to select during the mockup stage. However, after some considerations, we recommended for UOB to not change from the 2D version, as they have a clean aesthetic which prevents users from getting distracted from the main context and focus of the app.
The client took our recommendation and we carried out testings with our internal participants to check if the icons caused any confusions for navigation. Almost all of the participants had no problems navigating and relating to the icons on the navigation bar, we allowed us to move forward with the hi-fi mockups.
Adaptation for Android, Blackberry & WAP:
One of the challenges we had was adapting from iOS screens to Android, which was then adapted for Blackberry and Wireless Application Protocol(WAP). It was rather complicated as we had to take into account the different screen sizes and resolution, while still maintaining legibility; especially for Blackberry and WAP.
Some of the solutions were to increase the font sizes and prioritise what we would want to display on Blackberry and WAP mobile phones. We had to remove certain images and icons to make room for some information and content.
UI Documentation:
All the UI elements that were created had to be documented to assist and facilitate the developers working on the app. First, we had to splice the graphic UI elements into .PNG files and secondly we included a supporting document which indicated the size and name of the .PNG files. We also had another separate document to specify what is the spacing needed to layout the elements within the screen. These were all done to ensure that whatever the UX team created was consistent to the final design.
Recapping What We Learnt:
-
We learnt how lo-fi, mid-fi and hi-fi wireframes/mockups could have various levels of impact with not just the navigation and functionality of the app, but also with the feel and experience of the users using the app. In essence, hi-fi UI mockups tend to give the users a more realistic experience closer to the final product.
-
We felt that it would have been a great benefit to have more participants (preferably external parties) for the user testings. Even though we had several rounds of iterations and improvements, we felt that because we constantly tested with the same internal participants, there tend to be a bias with the validation of the design.
1
2
3
4
5
Discover
Define
Develop
Design
Next Steps
What's next?
-
As previously mentioned, the next plan would be to further validate and improve the navigation and functionality with more user testings with external participants.
-
We would also be expecting new adaptations for iPad and possibly newer models of smartphones.