Advanced investing
Project: ČSOB
Channel: cross-channel apps
Timeline: 2023 - 2025
Role: Leading product designer
Tool: Figma
Team: Asset management, branch advisory & SLAM team
Problem: Due to the transformation in the back-end systems, it was necessary to rebuild certain contracting & investment processes for both internal and external users.
Solution: Adaptations in the contracting & investing processes and development of new user-friendly apps for multi-channel use.
KPIs
-
Improvement site visits measured by unique seassion outside of campaign seasons
-
Enhance conversion rate for button events & support client acquisition
-
Increase the completion rate of long-term PPC discoveries
-
Support the conclusion of the frame contract by the non-investors in the mobile app
-
Boost pure & digital-assisted regular investing in the mobile app
Business requirements
-
Modern & engaging pages to improve conversions in the mobile app for new investors
-
Set an engaging & light/playful tone on the pages, not to overload, to show benefits and encourage clients to invest
-
This web shall support the branch advisory
-
Organize a discovery hackathon with the SLAM team & several business partners from Asset & trainers to iterate a wide group
Situation
After several years since the last redesign, the business partners concluded that it is time to adjust the strategy for approaching clients who haven't invested yet. This meant the reflected investment pages needed to align as well.
Business objective
-
Increase awareness among new investors
-
Enhance app conversion rates
Context
Challenges
Constraints
-
Wide scope & high business expectations to narrow into a realistic delivery within a peak season by the year end - this was a subject for negotiation within the planned hackathon
-
Potential impact of running digital campaigns connected to the pages
-
Different perspectives of SEO and business partners from Asset & the advisory support
-
Limiting brand & technical front-end development regarding business wish of gamification aspects
UX approarch
Enhance the user experience for non-investors while ensuring that the content remains educational and engaging, encouraging clients to consider their first investment.
Discovery
SLAM Hackathon
Two days full of data reviews & discussions, wide brainstorming & feedback, design thinking
Team: Digital sales, SEO/PPC/GA analytics, Asset product, UX/UI, Segment, Brand communication & Advisory trainers
We learned that ...
Data mining provided clear evidence regarding existing pages, showing that:
-
Visitor rates declined by approximately 20% during periods without campaign exposure.
-
More then 65% of visitors browsed the pages on the mobile device
-
Heat mapping and recording indicated a dead click rate of around 17%.
-
Depth of scroll measured on a drop-off by 25% under 50% of the page
-
The conversion rate fluctuated between 2% and 3% based on the designated button events.
-
Most visitors opted not to consent to cookie usage, with consent rates at around 60%
We learned that ...
Our target personas are young adults, active & living in town, single / with young family, beginning their careers, feeling responsible for their own well-being, experienced in building savings but uncertain about starting with investing.
We agreed on that ...
Segment strategy prioritized non-investors before actual investors.
We updated that ...
Keywords list anew to be the building blocks for design scope.
We figured out that ...
Our stratedy & directions should result into (re-)design of:
Onboarding page for covering basics of investing
-
What is investing?
-
How to invest?
-
Why to invest & myths to overcome?
-
Compared to savings?
-
Where to invest? Comparing popular products (shared funds vs. stock & ETF),
-
Same gamification to include?
Page with all investment offers presented at glance
Campaign pages with a high business priority (Regular investing, One-off investing, AI fund)
Redesign of Investment & Inflation calculations
Investment section in the Main menu to be reinvented
Design
Trade-offs
Being in the extensive discussions and iterations with business partners in the hackathon and beyond, I stressed some UX recommendations about what to reconsider in the sake of the best possible user experience & feasible delivery:
-
Scope prioritization
-
Release timing
-
Priority information placement
-
Gamification features
Scope prioritization
Agreed on design bundling for onboarding & offer pages first. Secondly, go for campaign page adaptations. And last to go with the calculations pages.
Release timing
Significant pressure & expectations on swift content material creation put on product & brand partners and limited front-end development capacities, gave a new perspective on why to adapt a release timing.
Information placement
Wide ideations showed business tendencies to overload the content structure. This had to be narrowed to the most important blocks with cross-referencing to other web parts (FAQs, blog, pages).
Gamification features
Business partners preferred to incorporate more playfulness into the page features. However, this had to be deprioritized & put on-hold due to various technical and brand dependencies.
Key UX directions
-
coverage of customer journey phases: Awareness & Evaluation
-
represention of the mental model for building trust in investing & clients' confidence that they can start investing
-
principle of progressive disclosure limited exhausting details and enabled effective page structure
-
connecting this page with other related reference web areas (other investing pages, current accounts, documents & blogs) and with the investing process in the mobile app
-
from the behavioral perspective, this is the right place to trigger a conscious decision on how to establish a healthy routine, if not habit later, for clients' finances & their safe future life
Call-to-Actions
Primary CTA: Invest online to open an overlay above the page to indicate the next action, either for a non-client or client. This CTA is to be considered a proof of closed conversion on the page for desktop. Regarding mobile devices, this CTA, together with a deeplink to the Investments in the mobile app to be part of the full conversion funnel.
Secondary CTA: I need advice to redirect (non-)clients to the contact form for coordinating an advisory appointment.
Additionally, various cross-links to reference content on other pages or section anchors like FAQs.
-
Mobile version:
-
clients directed through a deeplink into the investing in mobile app, or an option to open the app store to download the app
-
non-clients offered cross-linking to the current accounts to get onboarded first
-
-
Desktop version:
-
clients directed towards a mobile app to invest by using a QR code
-
non-clients offered with cross-linking to the current accounts to get onboarded first
-
UX decisions
I wanted to put myself in the shoes of those who have never dared to invest. I empathized with their long-term needs and desires to grow their finances, while also considering their own concerns and uncertainties. This led me to the obvious structure reflecting the mental model & customer journey of a complete beginner in investing.
-
What does it mean to invest? Provide a crisp definition of investment.
-
Why should I start investing? Short-listing of the main benefits for a real life. This is to address main reasons for achieving long-term positive impacts & results in client's life.
-
Why consider certain investing opportunities with us? High-level teasing data about the company and successes to confirm credibility & build trust.
-
How to invest correctly? Compile a useful set of steps on how to proceed in the best way.
-
How is investing different to savings? A short tip message to explain key differencies with cross-linking to a dedicated blog.
-
How to win over various investment myths? Are all statements circulating in the air really valid, or are some of them just misinterpretations? This was a potential subject of gamification.
-
Cross-link to the full investment offer. This is a redirection to the second reference page.
-
Blog & FAQs to ensure everyone finds more details upon own interest & level of knowledge.
Onboarding page "How to invest"
Mobile-first approach
A keen focus on essential information units ensures a clear & concise site structure.
Any unnecessary details or redundant parts from business brief were avoided.
SEO recommendations
Focus on search results, page optimization & ranking, keywords & content strategy.
Sufficient guidance to inform UX concept & foundation for design.
Product content
Extensive & detailed explanations and subject-matter presentations with heavy structure.
Missing the significant areas relevant to clients.
Key UX directions
-
coverage of customer journey phases: Evaluation & Purchase
-
providing the complete selection of active investment offers grouped upon meaningful categories
-
presenting sufficient descriptions that drive quick engagement with products & decision in users' hands
-
incorporating a subtle behavioral guidance, both for hesitant non-investors and educated investors, about how to read through the product offers
Call-to-Actions
Primary CTA: Cross-links to the listed process & product pages or tools
Secondary CTA: Potential click-to-banner for a limited offer
UX decisions
In the past couple of years, we produced a significant number of product pages and campaign pages. As a result, there is a need for a single location to find them all listed. Insights gained from a discovery round helped inform my decisions on how to structure this information. This page is primarily designed for investors searching for concrete solutions. Therefore, it should present a clear collection of options for them to choose from. On the other side, a small part of customers may not be convinced about their motivations. These customers need to find guidance on where to start.
-
Types of investing process - Provide the process pages of Rounding investing, Regular & One-off investing
-
Step-up labels pinned on each investment type - For guidance for non-investors & inexperienced investors on what the recommended investor's path is.
-
Overview of the Investing solutions - This aims on more advanced investors who are driven by their experience & curiosity at once. Therefore, here is recommended to nudge them by feelings & appeal to their lifestyle.
-
Tool & calculations - If the customers know what option they choose but prefer to play with numbers or simulations this is useful connection to such tools for investments.
-
Teaser area? The inclusion of a teaser area was more a desire expressed by business partners than a decision based on user experience. However, I understand the importance of attracting clients with special, limited-time offers. This consideration should be balanced with the primary purpose of the page and the conversion KPIs.
Investment offer page "Where to invest"
Mobile-first approach
A keen focus on essential information units ensures a clear & concise site structure.
Any unnecessary details or redundant parts from business brief were avoided.
SEO recommendations
Focus on search results, page optimization & ranking, keywords & content strategy.
Sufficient guidance to inform UX concept & foundation for design.
Product pages
Complete collection of the investment products, services, or solutions.
Having in search what site map exist now and how to upgrade it.
Final reflextions
This project was my final one at ČSOB. Therefore, I covered only the first UX part of the design process, and the second part from the mockups through the usability testing to the design finalization I handed over to my successor.
Still, from the UX perspective, I managed to cover:
-
Business kick-off
-
UX contextual research & competitors' research
-
Discovery hackathon
-
Reflecting insights & feedback
-
Review of business brief
-
Building UX page structure
-
Preparing wireframes & semi-mockups
-
Internal feedback collection
-
Adaptations
-
Presentation of the final versions of semi-mockups to the sponsor
-
Hand-over
Looking back at the project a couple of months after its release, I am pleased to find that the majority of the design has been implemented exactly as per my proposals. Of course, I expected some adaptations from a UI perspective and spotted a few additional trade-offs, which I assume are due to technical limitations. This encourages me that my hypothesis and UX approach were on the right track. Apparently, this also confirmed the usability testing with final mock-ups for clients.