{"id":72,"date":"2020-03-22T12:07:55","date_gmt":"2020-03-22T15:07:55","guid":{"rendered":"http:\/\/patricksilveira.com.br\/portfolio\/?p=72"},"modified":"2022-02-12T08:49:08","modified_gmt":"2022-02-12T11:49:08","slug":"xp-client-page","status":"publish","type":"post","link":"https:\/\/patricksilveira.com.br\/portfolio\/xp-client-page\/","title":{"rendered":"XP Inc. Client&#8217;s page"},"content":{"rendered":"\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<h2 class=\"has-text-align-right\" id=\"the-project\">The project<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<div class=\"wp-container-1 wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>As with any decision process, you need data. The old interface presented all the data needed to make decisions but in raw format. To interpret the performance of a portfolio the client needed to use external tools, like a spreadsheet, and input formulas and values. Many relied either on their advisors or did mental calculations. Few users had the knowledge or energy to prepare and update a spreadsheet to help them manage the performance of their assets. <\/p>\n\n\n\n<p>Growing the user base also led to increased interaction challenges, such as the need to deliver an improved digital experience to (1) reduce reliance on advisors to execute investments tasks and (2) help clients with their portfolio management.<\/p>\n\n\n\n<p><strong>The use of User Experience Design is considered a key factor to democratize investments as it helps reduce barriers to newcomers from outside the finance sector, by easing the tasks, reducing errors and presenting complex data in a friendly way. <\/strong><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<h3 class=\"has-text-align-right\" id=\"my-role\">My role<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>Project leader with a team of 3 UX designers .<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-larger-font-size\"><strong>Our challenge was to design a new client page that delivered a friendly user experience for both new and experienced investors.&nbsp;<\/strong><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-container-2 wp-block-group has-border-background-color has-background\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns alignwide center\">\n<div class=\"wp-block-column\">\n<h4 id=\"project\"><strong>Project<\/strong><\/h4>\n\n\n\n<p>Redesign the client\u2019s page for XP Inc. the largest brokerage firm in Brazil, with 300.000 clients at the time.<br><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h4 id=\"solution\">Solution<\/h4>\n\n\n\n<p>An interface based on portfolio management with tools to reduce common errors and that adapts to different levels of investment expertise.<br><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h4 id=\"impact\">Impact<\/h4>\n\n\n\n<p>Improved user satisfaction. It set the ground for future investment interfaces.<br><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<h3 class=\"has-text-align-center\" id=\"findings\">Findings<\/h3>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<div class=\"wp-container-3 wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>We talked to different investor profiles, from the newbie to the professional daytrader, to map their investment journey and understand how they made investment decisions.<\/p>\n\n\n\n<p>We identified 4 user personas based on their dependence on an advisor and their level of investing expertise. By organizing these different profiles we started mapping their biggest pain points when managing their investments. A second task was to understand how the present interface was used and what influence it had on their decisions. <\/p>\n\n\n\n<p>We analysed how users managed their investments through the optics of good investment practices, such as portfolio management strategy and Daniel Kahneman&#8217;s bias concepts, and prepared a list of design concepts that needed to be implemented to help reduce common investment errors.&nbsp;<br><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:37.5%\">\n<h3 id=\"main-issues\">Main issues<\/h3>\n\n\n\n<p class=\"has-drop-cap has-normal-font-size\">1.<strong>Information Paralysis:<\/strong> with too much information the average user paralyses trying to make sense of what is important and postpones whatever decision he needs to make. <br><\/p>\n\n\n\n<p class=\"has-drop-cap\">2. <strong>Focus on individual assets performance:<\/strong> when considering the performance of individual products, users reacted more frequently to performance, leading to over-trading or anxiety. <\/p>\n\n\n\n<p class=\"has-drop-cap\">3. <strong>Using mental calculations to analyse portfolio:<\/strong> Users needed to use a spreadsheet to analyse their portfolio performance and balance, what few did, leading to an incomplete or wrong view of their assets.<br><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:62.5%\">\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped\"><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-larger-font-size\">How can we <strong>help investors move from an individual asset perspective to a portfolio management strategy?<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<h4 class=\"has-text-align-right\" id=\"interface-objectives\">Interface objectives<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>Reduce overreacting (investment frequency)<\/p>\n\n\n\n<p>Provide comprehensive information to their investment decisions.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<h4 class=\"has-text-align-right\" id=\"our-solution\">Our solution<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<div class=\"wp-container-4 wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>The new interface included a series of new tools to help users in their investment management. <\/p>\n\n\n\n<p>First, we used 3 layers to display all information needed for each task: (1) analysing the portfolio and the balance between different assets, (2) checking an asset class and each product high-level view information and (3), analysing each product performance. <\/p>\n\n\n\n<p>Introducing a new perspective of a portfolio based management XP also helps their advisors as it&#8217;s easier to set up more diverse strategies, with better results and better risk management. <\/p>\n\n\n\n<p>Second, we prepared an interface that would substitute the need to use a spreadsheet, with easy to understand graphs and indicators. By organizing values visually and using percentages, we aimed at reducing any cognitive overload of mental calculations, which is always prone to errors. <\/p>\n\n\n\n<p>And third, we also helped new investors, that had no access to exclusive advisors ( under 50k in AUM) to set up a solid portfolio, based on XP Inc. recommendations. <\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"has-normal-font-size\"><strong>Progressive Disclosure in a modular interface<\/strong><\/p>\n\n\n\n<p class=\"has-normal-font-size\"><strong>Visual graphs to show portfolio balance and performance<\/strong><\/p>\n\n\n\n<p class=\"has-normal-font-size\"><strong>Tools to help with analyse portfolio<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"http:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-1024x576.png\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-1024x576.png 1024w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-300x169.png 300w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-768x432.png 768w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-1536x864.png 1536w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-540x304.png 540w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01-1080x608.png 1080w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/Mobile-01.png 1921w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"805\" height=\"1024\" src=\"http:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-ipad-2-805x1024.png\" alt=\"\" class=\"wp-image-198\" srcset=\"https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-ipad-2-805x1024.png 805w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-ipad-2-236x300.png 236w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-ipad-2-768x977.png 768w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-ipad-2-540x687.png 540w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-ipad-2.png 849w\" sizes=\"(max-width: 805px) 100vw, 805px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" width=\"1024\" height=\"745\" src=\"http:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2-1024x745.png\" alt=\"\" class=\"wp-image-201\" srcset=\"https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2-1024x745.png 1024w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2-300x218.png 300w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2-768x559.png 768w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2-540x393.png 540w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2-1080x786.png 1080w, https:\/\/patricksilveira.com.br\/portfolio\/wp-content\/uploads\/2020\/03\/VISAO-GERAL-DESK-2.png 1486w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Portal de Clientes XP\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/A2pq-xAQfKA?start=21&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-fill\"><a class=\"wp-block-button__link\" href=\"http:\/\/patricksilveira.com.br\/portfolio\/\">Back<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The project As with any decision process, you need data. The old interface presented all the data needed to make decisions but in raw format. To interpret the&hellip;<\/p>\n","protected":false},"author":1,"featured_media":81,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"template-full-width-cover.php","format":"standard","meta":[],"categories":[4,6],"tags":[],"_links":{"self":[{"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/posts\/72"}],"collection":[{"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":52,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":468,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/posts\/72\/revisions\/468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/media\/81"}],"wp:attachment":[{"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patricksilveira.com.br\/portfolio\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}