Scotiabank | Design portfolio

UI Kit - Scotiabank

The problem

Scotiabank needed us to be able to produce their emailings on demand. They also wanted us to redesign them visually and conceptually to make them more accesible and attractive to a their audiences.

My role

As a the UX UI Designer my dutties were:

1 ) Together with my team, carry out a careful investigation of the clients that Scotiabank already had in the city of Lima and in the provinces of Arequipa, Trujillo and Cuzco, all of them in the country of Perú, in order to determine opportunities for improvement in the user experience when receiving emails from from the bank.

2) Work with the marketing team in various brainstorming sessions, share our findings with them to help them come up with better strategies for each type of client.

3) To create a UI kit to help accelerate the production of the emails while keeping every piece consistent with the brand image.

The process

Data revision, script writting, interviews and surveys

Empathizing

1) Data revision: My team and I reviewed all the data that the previous consulting agencies had already gathered about the users and results of past emailing campaigns. We clasified the information, detected patterns and extracted what we thought could help us achieve Scotiabanks goals. Based on what we found we decided to investigate each type of client to challenge the client clasifications that the previous consulting agencies had constructed.

We identified two types of clients that needed to be researched more in depth: a) the senior citizens, which tend to be digital detractors, distrustful of emails and online banking.

b) Small business owners, who tend to mistrust banks in general, and because of socio-economic phenona that occur in Perú, they tend to remain illegal for a long time, borrowing from friends, family or unbanked sources.

2) Script writting: After that, we wrote scripts for the interviews and the surveys. We wrote scripts of in depth interviews for the senior citizens, the small business owners and for gen Xers and millenials who take care of senior citizens and help them use online platforms.

3) Interviews and surveys: The service designer, the marketing team and me interviewed 100 + people from the 3 groups mentioned. We also sent out surveys to thousands of clients thanks to the wide data base gathered by the bank. The data visualization team took care of making the graphics look good and easy for us to understand the survey data.

Crafting personas

Defining

With the new data gathered we crafted buyer personas and user personas.

Buyer personas

a) The senior digital detractor: We created one buyer persona for the type of senior citizen that needs asistance using their smarphone, but can use their computer from time to time. We found out that they preffer to go to the bank to do their operations, mainly to pay loans, ask information about products or for complains. They take their time to read every email they recieve. There are some words that can be triggering for them, anything related to debt, or words they dont understand and sound harsh and corporative.

They are very vulnerable to phishing and other types of scams, that is why sometimes they go to the physical bank with pictures on their phone of their computer screen showing an email, just to check if it's a legitimate email form the bank or a scam, they also ask family members about it.

b) Small business owner: The small business owner from Perú came mainly from three provinces: Lima, the capital city; Arequipa and Trujillo. They were used to a different type of brand image than the main Scotiabank's brand image, they were more familiar with CrediScotia.

There was a significant percentage of them that had not attended college and their highest level of education was that of a high school diploma.

We identified the main reasons they asked for loans, which were mostly related to rural type of businesses in Trujillo and Arequipa, but in Lima they were related to real state.

The benefits we were offering to them were to generic, they had deep motivations related to education and family. The marketing team would work on more detailed buyer personas from small business owner in each region based on our research.

User personas

a) The GenZ helper: Mainly sons and daughters or close relatives of the senior digital detractors. They helped download the bank's app, they sometimes acompanied their elder relative to the bank and were the ones their relative called to confirm if they were being scammed or not. In many cases it depended on them if the senior digital detractor accepted a loan offer or decided to terminate a product of the bank.

Brainstorming and brainwritting

Ideate

We had various brainstorming sessions. The first one was moderated by an agile coach. We were separated in 5 groups, we made sure that at least one person of the design team was in each group. Each group consisted of mostly the marketing team, some groups had members of the business team and growth hackers.

The next brainstorming session was actually a brain writting one. I was the moderator. The groups included developers, members of the design team and growth hackers. I decided for it to be a brainwritting session because developers have good insight on the product yet are reluctant to participate in brainstorming conversations. It turned out to be a success, ge got excellent ideas from that session.

The copywritters and the ux writters created new texts for the emails, social media publicity campaigns and website banners based on the results of the brainstorming sessions.

Wireframing, testing of the wireframe, ui kit, high fid. prototyping and testing

Prototyping
and testing

We created wireframes and tested them using maze. At the same time I was working on the UI kit. After that first testing we made adjustments and added the styles to the wireframes, then we tested them again. We had to use infobip, an omnichanel messaging platform, to create the final emails that would be sent, this limited our capacity to innovate in a visual sense.

Typographies

Since the platform Infobip didnt have the official Scotiabank typographies we chose two typographies that resembled the one Scotiabank currently uses: Poppins Bold and Circular TT.