Table of contents

1. Summary

Standard Chartered Bank wanted to improve its ATM & Branch Locator web app with the aim of reducing costs and improving customer satisfaction through improved usefulness, efficiency and user experience. The end result was a significant transformation in the user experience through the application that resulted in cost savings and increased customer satisfaction.

2. View the live application

https://www.sc.com/sg/atm-branch-locator

3. My role

This was a one month long one man project. As UX lead for this project, I authored the proposal, planned, managed and executed the project.

4. UX Process

5. Activities

6. Deliverables

7. The old app vs. the new app

8. Requirements definition and secondary research

The initial phase consisted of validating project requirements and goals, discussing the process, timeline and deliverables, and gathering any further requirements as well as user feedback from the client. Initial research findings and concepts were shared and concepts with the client to build in early trust in our capabilities of delivering a world-class web application.

This was also the phase I presented findings of an ATM locator functionality mapping exercise for five other banks operating in Singapore and their rankings based upon their features.

I also created customer and Customer Service Representative scenarios and shared gaps in their current ATM locator, and other ATM locators that used the Google maps API. I shared the opportunities we had with the new ATM locator and scenarios to illustrate how we could go a step forward and build delight into the interface.

Early proposed features included approximate time required to travel by foot or car and routes for both mediums, Google Street View
integration so users can find their way to the location with ease and accuracy, and an innovative augmented reality version for tablets where you could point the tablet to see ATM’s and branches close to you (which did not make it due to budget constraints).

9. Low (paper) to high fidelity (interactive) prototyping

Once we had agreement upon the scenarios, I created user flows followed by paper prototypes This rapid prototyping method was much faster than hitting a prototyping application straight away. As expected, the iterations were extremely quick and we were soon at a stable state for me to go ahead and create a high-fidelity prototype in Axure, which emulated everything from realistic location auto-suggest to zooming of maps.

After a few short iterations, it was time to validate the usability of the application.

10. Usability testing

Usability testing was to be done with Customer Service Representatives in the Standard Chartered Malaysia call centre. I prepared the usability test recruitment email script for the clients to send out. Since the call centre was a highly secure environment where Customer Service Representatives deal with a lot of sensitive information, it was not possible to use a screen sharing application for the usability test.

I thus set up a telephone call with the participants and used the ‘think aloud’ protocol, not only to verbalize their thoughts as is it’s goal, but to tell me what they were looking at and doing since I could not see them. I hosted the prototype behind a password-protected page which I would tell them how to access once we were together on the conference call.

• effectiveness through a pass-fail criteria.
• Efficiency was informally measured through the relative speed I felt the participants were completing their tasks.
• Subjective satisfaction was again not formally measured through a SUS questionnaire

The test was a success. Efficiency and subjective satisfaction were high too and the Customer Service Representatives felt that the new app (some thought that the prototype was the real application) was a huge improvement over the current one.

11. Communicating specifications and managing visual design

I annotated the prototype so it could be used as a specifications document by the developers. One important step here was that I walked the developers through it so they felt comfortable with the specifications that were provided.

Our partner then created the front-end code for it after which we took a style brief from the client along with the Standard Chartered
Breeze app style guide and worked with the visual designer to create the visual design for the app.

Getting the clients to agree on the visual design involved a lot of to and fro. I played a crucial role in expediting this process by using following a more flexible path to coming to agreement on terms with what was required but at the same time making the clients provide very specific details of what they had in mind through mood boarding.

12. Outcome

The new Standard Chartered ATM locator launched in September 2012.

The result was an ATM locator that resulted in tangible cost savings and increased customer satisfaction through an app that was quicker and easier to use than before.

This led to a repeat opportunity to design the admin interface modules where I lead and conducted a discovery phase, ideation, prototyping, specifications and visual design.