Case study

Defining a best in class customer trading experience

Services

UX/UI
Interaction design
Visual design
Design systems thinking
Product strategy
Prototyping
Art direction

Client
Citibank
Agency
W12 / TCS Interactive
Role
Associate Design Director
This is some text inside of a div block.
Case study hero image
Client
Citibank
Agency
W12/TCS interactive
Role
Associate Design Director
Deliverables
UX/UI, Interaction design, Visual design, Design systems thinking, Product strategy, Prototyping, Art direction
Shaping your wealth as a financial partner through life

Citibank, a brand with immense heritage offer a wide breadth of financial services and products to millions of customers spread all over the globe. This includes everything from traditional banking products to investing, financial advisors and mortgages.

However, the financial services industry is changing. Banks are now competing with lean and hungry startups (and scaleups) that offer products and services that are chipping away at their business model and putting user experience at the core.

This is particularly true in the area of personal investments and wealth management. To compete, Citi needed to reinvent their wealth offering to create an experience which is much more seamless, user focused and one that exceeds that of their competitors.

Challenge

We were challenged to define a ‘best in class’ customer trading experience that stands out in a crowded industry.

Outcome

We created a ‘North Star’ creative vision that defined 3 key hero journeys (and personas) and built out an expansive product experience across their mobile app and web platforms.

Defining a product strategy that meets business and user needs
To guide our approach and ensure that we met both the business and customer needs we conducted interviews with Citi and their strategic partners. This allowed us to identify their strengths, weaknesses and how best to position the product strategy. This was then mapped into an overarching approach that could then flex to the different customer tiers and persona types.
Ultimately, we felt there was an opportunity to position Citi as a transparent wealth companion that could unlock insights that were previously reserved for the wealthiest tiers. We could leverage Citi's scale and breadth to create an offering their competitors could not match. This would allow Citi to stand out from other players in the market and help their customers work towards their financial goals irregardless of their level of wealth.
Examples of modules that make up the Tyl design system
Future of Trading visuals
One dashboard for everything

There was no single place where a Citi user could see a full picture of their wealth across their retail, investments and their other Citi financial products. This fragmented view was reinforcing the siloed approach to our users financial health. To address this we created a holistic dashboard experience for everything from a credit card payment to an investment portfolio integrating Wealth with the rest of the Citi offering.

Examples of modules that make up the Tyl design system
A new, holistic dashboard
A new, holistic dashboard
Helping users ‘Shape their wealth’ through goal led investing

Our purpose is to facilitate growth, to help people, whoever they are, feel good about money and achieve their goals. These goals might be focused on saving for their first property or planning for their childrens education. Or it could even be as simple as planning for a big trip. Irregardless of the goal we wanted to provide a framework to help users achieve these goals, to break them down into tangible and measurable steps. Our portfolio builder allowed users to do just that.

iphone device showing design that asks the user to select investment style.
iphone device showing portfolio builder setup.
iphone device showing portfolio builder setup.
user testing

"I like seeing the positive and the negative as 
it helps me manage my expectations"

Testing respondent, Seasoned investor

Discovery

A space where users can explore the world of trading and educate themselves in the skills needed to invest effectively was critical. This needed to be so much more than simply a list of stocks to purchase. It needed to be richer, to educate and to wherever possible be personalised. It included content such as personalised stock lists, cause based investing based on their money personality and access to bitesized education topics.

Investment and world news visuals in devices.
Investment section visuals with expanded and collapsed header design.
user testing

“To have recommendations about what would make sense based on my habits... I think is just very helpful to have”

Sienna, Unseasoned investor

Personalised to each individual

Every user will have different goals, interests and circumstances. We wanted 
to embrace this and create an experience that was personalised and unique to each users wants and needs. To achieve this we captured insights on users spending habits, risk appetite and investment experience through a ‘money personaility’ quiz.

Tools to invest in your values

Investors increasingly want to invest in ways that match their values. We have seen this through both our research and our testing. As a result we made thematic investing and ESG an integral part and key USP of the Future of Trading experience. This allowed us to showcase new, topical and engaging ways to invest based around themes that are important to our users.

Value based investing design
Value based investing design.
Value based investing design.

This approach encouraged and gave direction to users on how they could do this and growing and evolving alongside the user. Content featured included curating relevant news based on their existing investments, promoting investments that matched their values and educating users in a wider sense on how to invest positively around their themes and values.

user testing

“I want to invest in things that I personally use and believe in as an investor. To see what companies I might be not aware of that would make a difference - align my ideas and principles. I think it’s an amazing feature”

Christine, Seasoned investor

Real time analysis

We wanted to give users a tool that gives them more granular and immersive insights that feel human, relatable and ultimately actionable. The investment Check-Up tool was the answer to this problem. It provided a detailed breakdown of users investments with real time, bespoke analysis of the users holdings along with highlighting actions that could be taken.

Investment Check-Up visuals

A user could very quickly apply a number of different lenses to their investment portfolio with data-driven views based on type, sector, performance, geography and impact. Using this tool our users could get a holistic view of how they are investing and uncover vulnerabilities and over exposures complete with suggestions on how to overcome these possible pitfalls.

user testing

“I haven’t seen anything like this (Investment check-up) elsewhere, I do Robinhood mostly and it’s very user friendly but it doesn’t go as far as this. This is super helpful…
I just learned something.”

Monique, Seasoned investor

The vision and beyond

Our vision piece enabled Citi to align on a ‘North Star’ for a seamless investment and banking experience that matched and exceeded many of the new entrants to market. Critically it enabled our client to make the case for ‘Wealth’ being a core part of Citi’s proposition and business model. From a business organisation sense this has since been implemented with Wealth and retail banking being brought together in a singular operational structure.

Impact

Our vision piece defined what a 
seamless banking and investment experience looks like obtaining buy in 
from key strategic stakeholders.

Strategic outlook

Impact

It enabled the business to align 
their roadmap and kick off additional projects aimed at bringing the vision closer to reality.

Product roadmap