Top

Current Work

👋  Hi, I’m Simon,
a product designer with focus on user experience and interaction design based in Toronto. I currently work at Tangerine.

Tangerine onboarding

At Tangerine, I've led design for the Client experience with a focus on growth, activation and growing number of strategical campaign projects such as Chequing, Saving, Mortgage, Investment and more. I collaborate closely with various cross functional teams and lead design from UX/UI perspective in marketing. The goal is to provide the best digital experience for human become more financially secure through better budgeting and personalized insights. Throughout learnings and multiple user testing, we ensure to create delightful experiences with empathy for users.


Visitor Sites Structure Redesign 2.0

Overview
On this project, I collaborated with an agency and senior digital manager for whole visitor site restructures. My main responsibility was to oversee the redesign of the structures from a UX/UI design perspective and take ownership afterwards, ensuring that the new design works cohesively across different user scenarios.

Responsibilities
Design Strategy
User Experience
UI Design
User Flow Mapping
Qualitative Research
Quantitative Research
Prototyping
User Testing

Team
1 CS Director
1 Senior Digital Manager
1 Product Designer
1 Project Manager
1 CS Leads & Specialist
1 Frontend Developer
1 Analytic Team
2 Backend Engineer
1 QA & UAT

Problem
Based on the users' feedback from VOC (Voice of Clients), we created the sprint questions to solve the problem:

  • "What’s the best way to explain Tangerine to new clients that it's a digital bank? – not like the other banks"

  • "Will new clients be able to find the right information easily and quickly about the products?"

UX metrics reference:

  • Use of search or navigation

  • Time on task

  • Error rate

  • Disconnection flow rate

  • Site-categorization is very confusing to users. (Categorization & Browsing for products)

  • Design are not accessible

  • Irrelevant information for users need

Map out the problem

problem map
 
  • Redesigning the content structure to optimize engagement and drive conversion on our product pages for users based on feedback, and update our site to reflect Tangerine’s transition to financial catalyst.

  • Defining page objectives, take inventory of content, propose new content structure for all core pages to optimize usability

  • Making it easier for users to find what they are looking for, integrate SEO strategy to increase site traffic, improve online experience, drive higher application starts

7 users segmentation research

  • Growing Graduate

  • Extravagant Employee

  • Happy Home-owner

  • Sensible Saver

  • Classy Couple

  • Prudent Parents

  • Relaxed Retiree

7 profile users.png

HMW (How Might We)

This includes homepage, product categories, product detail pages and other widgets.

HMW

IA (Information Architecture)

  • Categorization & Browsing

  • Home Page

  • Product Section Page

  • Product Category Page

  • Product Detail Page

VS4_IA.png

Sketches for Solution & Story Journey

 Home

Home

 Product detail page

Product detail page

Product Cards

  • Users can look at all products or filter by category

  • Users can select to learn more about specific products or view pages about entire product categories

  • Users can quickly scan to determine which savings account meets their needs

  • Additional promo merchandizing space

product categories
product cards

Group Brainstorm

VS7_Sketch.jpg

High Fidelity Prototype – Samples

VS10_prototype.jpg

Design Component Library

designcomponent_short.jpg

User Testing
It was a great and thrilling experience to see actual users interacting with the design with great feedback. It’s indispensable for taking direction on MVP #2 and elaborating on the KPIs – I’m excited for more of UCD.

Positives

  • Usability passed within the design

  • Users understood where to navigate through

  • Like the idea of the dashboard for the key highlights of the products

  • And were able to do their own estimated calculation

Negatives

  • Users didn't understand fully about how the digital product features work (IE. Left to spend and Goal before they initiate an action)

  • Wanted to find out where users can do chat 1:1 with one of associates.

Finalproto.jpg

Takeaways

communication.png

Cross-functional collaboration

  • Communicate effectively and efficiently with cross-functional roles such as developers, PMs, researchers, writers and agency

  • Avocate for users’ needs and convey design rationale with solid foundation

dev.png

Design for product development

  • Trades-offs and technical concerns during product development, such as accessibility, internationalization and edge cases

  • When we take an ownership, ensure to know what the expecting outcome is after the deliverable work from the agency

  • Speak DEV language from usability standpoint

perspective.png

Form opinions from multiple perspectives

  • Working with people of different functional roles/teams allowed me to understand how designers work differently in different contexts, and how I could further iterate on myself as a UX professional

 

FAQ_1.jpg

FAQ

Overview
When we first had the first redesign website, we wanted to restructure FAQ navigation for better user flow, integrating the SEO strategy to increase site traffic and setting up structure to allow for search and enhanced features in the future.

Responsibilities
UX Mapping
Wireframing
Prototyping
User Testing

Team
1 Senior Digital Manager
1 Product Designer
1 CS Leads & Specialist
1 Analytic Team
1 Frontend Developer
1 QA & UAT

Problem
Based on VOC and feedback as (Error click rate and disconnection flow rate):

  • How do users prefer to search for answers? – Tangerine Clients and Prospects who want to self serve using the Website.

  • Can we build a stronger search functionality?


HMW

FAQ_HMW.jpg

User Flow

FAQ_flow.jpg

Sketches for Solution

FAQ_sketch1.jpg
FAQ_sketch2.jpg

Prototypes

FAQ_proto.jpg

Usability Testing
We conducted usability testing for MVP #1. As we gathered prominent insights and feedback on the system as well as the interactions with the prototypes, One of the positives are users were happy about the populated searches through the engine (Google) and able to quickly find what they were looking for. On the negative side, users wanted to find out more questions by product category when they didn’t know what to add in the search.

What I would have done
To provide a bit more clarity for users, I would’ve approached with the design (right side) and it allows even for new customers to navigate to find their question for answers through the Tangerine product category.

FAQ_whatif.png

Takeaways
Put more focus on user experience research and knowing what are the UX metrics – The most importance is understanding the user empathy, needs and motivations of others. Since this was only for first phase, going forward with phase 2, hoping to have more opportunities and time for us to have learnings from each product owners and SNS (call centre) from users perspective. Perhaps, adding a chatbot can be another solution for us since we wanted to ensure that users can find the answers and proceed with their forward banking experience.

 

Calc_overview.jpg

Enhanced Calculators 2.0

Overview
Everyone felt strong that we needed to revisit the existing calculators since there were a lot of confusions and challenges from users feedback. I led design for all calculators with a focus on a better experience. The goal was to design simpler and practical for users.

Responsibilities
Visual & UX design
UI Design
User Flow Mapping
Data Research
Prototyping
User Testing

Team
1 CS Director
1 Senior Digital Manager
1 Product Designer
1 Project Manager
1 CS Leads & Specialist
1 Frontend Developer
1 Analytic Team
1 Backend Engineer
1 QA & UAT

Metrics

  • Time on task (IE. Too many input fields required and types of calculators)

  • Click rate drop & errors (IE. tools should take suers on a journey)

Problem

  • Can we improve customer engagement and acquisition? – also helping with financial planning for young spenders?

HMW

Cal_HMW.jpg

Calculator proposal & solutions
Based on the current daily average traffic data and complexity of the product calculations, we have done:

  • Widgets
    embedded on page, simple version of a tool which allows users to toggle with 1-2 inputs. No strong CTA as it’s on the page with existing CTAs.

  • Standalone
    separate page with more content/copy supporting it, has more input options or questions, very clear CTAs. SEO and advertising point here.

Calc_proposal.png

IA
This is the new 2.0 categorization & browsing for the visitor site. The widget calculators will be embeded to the PDP and the standalone calculators will be a separate page, focused on the user flow.

Calc_IA.png

Overview and design consideration

  • Savings & Chequing
    All these calculators will be widget calculators since they are simpler than investment and mortgage calculators. The calculation is easier than before. By only few clicks, users will have the desirable result. It’s cleaner and easier to understand the functionality.

  • Investment
    For Investments, the main changes were to revise the benchmarking tool to remove the benchmark (just do a comparison against another FI), and to make it more forward looking in terms of average rate of return versus it being a reverse looking view. One of the key points in Investments was that users wanted to know what the difference was between us and competitors, and what they needed to invest in to reach their goals. The Investing tool uses Morningstar as their data feed.

  • Mortgage
    - Include stress test calculation of 2% to more accurately reflect affordability.
    - Strong CTA to schedule or request a call for a Mortgage Account Manager to contact you.
    - Mortgage payment schedule (in a comparison form) can be a powerful tool for the MAMs on a call. It can demonstrate the value and difference of the rate between us and another FI.

UX Flows (IE. Savings widget)

Calc_flow.png

Sketches & Wireframes

Calc_sketch1.jpg
Calc_sketch1.png

IE. Savings & Chequing

Calc_sketch2.png

Prototypes

Widgets

Calc_proto.jpg

User Testing
Since it was more for enhancing the calculators, we’ve simply tested with 5 customers on usability and ensuring that the deliverable messages were clear. On the negative side, we haven’t fully been able to assess for accessiblity – which it would be coming in our work pipeline later.

Takeaways
Prioritizing and address the trade-offs – It was a short timeline. It was a practice for how to focus on what really matters the most from UX perspective and tried workaround within the timeframe.

 

Chequing Campaign

Overview
We've launched a new campaign for prospects to Tangerine Chequing Account by giving $100 Bonus to their account.

Process
Collaborating with strategy team and CS Lead, we created its journey flow and based on the flow - I worked on the wireframes and prototypes to provide the visuals to share with the stakeholders. During the development, we ensured that all CTA buttons are being tracked for the performance of the page, so we could eliminate confusion towards task completion from the learnings.

Challenges & Learnings
Because we had a limited support from IT during the development and also given by a short timeline, we won't be able to provide a full continuous journey to the secure page through the promotion. From accessibility standpoint, we haven't fully made it (between AA and AAA) since it can reflect on the global design system change.

Responsibilities
UX Mapping
Wireframing
Prototyping
Social Creative Assets

Team
1 Senior Digital Manager
1 Product Designer
1 Social Media
1 CS Leads & Specialist
1 Analytic Team
1 Frontend Developer
1 QA & UAT

CHQ_gif1.gif

Campaign Strategy & User Flow

chq_flow.png

OOH Advertisement

CHQ_creative1.jpg
 

Mortgage Campaign

Overview
With this launch of a mortgage campaign, we needed to target both prospects and Clients.

Process
Similarly, I collaborated with the strategy team and CS lead on this campaign and I provided the information architecture, wireframes, and prototypes for the activation. I also had to support the creative assets to support the experience as well.

Challenges & Learnings
We had a small AB testing about the hierarchy on the page. Based on the data, we found out that people had more engaging clicks and hovering when they saw the offer at the top instead of the value proposition. Another point, I wanted to raise is that there isn't any values in having the animating transition between the titles.

Responsibilities
UX & IA Mapping
Wireframing
Prototyping
Social Creative Assets
Animating GIF

Team
1 Senior Digital Manager
1 Product Designer
1 CS Leads & Specialist
1 Analytic Team
1 Frontend Developer
1 QA & UAT

Tangerine_Mortgage.gif
Mortgage_overview.png

Campaign Strategy & User Flow

mortgage_wide.png

Email Promo Newsletters in English and French

Mortgage_SecondEmailBanner_EN.gif
Mortgage_SecondEmailBanner_FR.gif

Insight Cards in secure site

insightcards_desktop.png
 

Investment Product

Overview
I led design for enhancing the product page by adding the dynamic investment calculator and social contents for more insights to users. After the launch, I've worked on couple of the campaigns (cross-sell and up-sell) and helped with implementing the iFrame of the social content survey (The Great Investment Voyage) to Forward Thinking Blog page. On the survey page, we wanted to ensure that users can have the continuous experience through either getting in touch with the advisors, sharing the post, or learning more about the product – instead of getting trapped in the survey pages.

Process
There were many stakeholders I worked with throughout this project. I collaborated with the CS lead and developers closely and during the concept stage, we had about 3-4 iteration of different interactive ideations. With each iteration, we gathered many feedback as we could to shape the next design with the focus on ease of use and eliminating confusion towards task completion.

Challenges & Learnings
One of the feedback that we had was there were too much copies to digest on the content. We didn't have a good UX writings in order to engage more clicks from users. With the Investment area, we would need to ensure that the writings are concise and easy for everyones to understand – especially for the immigrants.

Responsibilities
UX & IA Mapping
Wireframing
Prototyping
Social Creative Assets

Team
1 Senior Digital Manager
1 Client Experience Team
1 Content Team
1 Product Designer
1 CS Leads & Specialist
1 Analytic Team
1 Frontend Developer
1 QA & UAT

Investment_product.png

Overall Flow

investment_flow.png

Content Survey iFrame Implementation

FT_survey.png
FT_investment2.png

Insight Cards in secure site - Activation

Investment_insightcards.png

One of Sketches

Investment_sketch.jpg

Forward Thinking Blogs for the campaign

ForwardThinking_Resources.png
articles-carousel.gif

A quick concept for navigating through the articles when it's on mobile

It's always a challenge when there are too many scrolling on mobile screen from usability standpoint.