Pictet Asset Management
UI & UX Design / Animation
A website for one the leading independent asset managers in Europe.
Headquartered in Switzerland, Pictet Asset Management is one of the few genuinely independent asset managers in Europe. With over 740 employees, including 320 investment professionals, they operate from 17 centres worldwide. While working at Huge, I was part of the design team tasked to create an MVP for the group.
Designed for three types of investors.
The website caters to three types of investors: institutions, intermediary investors and individuals. Upon entering the website from whatever source, the goal is to funnel the user into their user segment as quickly as possible. For instance, opening pictet.com will immediately direct you your country homepage (geographically detected by your browser). On this page you should be prompted to immediately select your investor type and be taken to the segment homepage - a hub for dynamic and curated content relevant to your investor type. Alternatively, on the country homepage you can browse articles which are specific to all investor types. If you open an article specific to Individual Investors, you will be prompted to confirm your profile or change to Institutional/Intermediary.
A hub for original tailored content
The segment homepage offers a steady mix of curated and dynamic content relevant to the selected user segment. The goal of the page is to present articles and product relevant to their investor profile.
Users reach this page by selecting their investor type from a country homepage. For example, accessing pictet.com redirects to pictet.co.uk if accessed from the UK. On this page the user is encouraged to select a user segment (institutional/intermediary/individual) and reaches the Segment Homepage.
Establishing Pictet's brand
The magazine section of the website consists of articles which fall under one of the three Content Groups. While these are currently being developed in collaboration with Pictet, they could sound something like 'Helping your clients', 'Learning about funds' and 'Feel smart' and are accessible at all times from the global navigation. The goal for these categories is to help users who have a general goal but want to browse within a specific vertical.
The article pages are built using Sitecore. The website Editor simply chooses the type of module they would like to add and insert content. Depending on the length and the type of needs the article has, the user can select from one of three templates: short, medium and long article. The resulting article page gives the editor a lot of flexibility over how to style the page and can choose from a wide range of supported media.
Since the purpose of the website is to keep the user engaged while browsing the website, there are various UI elements intended to keep the visitor reading or browsing even when the content he's currently viewing fails to keep him interested. A related content side-menu is available at all times in order to quickly find related articles within the selected content group.
Chapter Jump Links—This feature is specific to the long article template, where the curator needs to separate the content into chapters in the CMS. The reader is able to jump to a specific section when scrolling down as the collapsed sub-nav gets swapped out with a chapter title drop-down menu.
A better fund browsing experience
The purpose of the Fund Centre is to enable users to quickly find Pictet's funds. They are able to search by name, ISIN or share class but can also filter by criteria in order to narrow their search. Being able to select sub-classes is not in scope for the MVP but will be developed after the launch.
The SERP groups funds into expandable compartments. Since PAM's digital gateway enables us to separate the share class information from the fund name, we are able to display it underneath the fund name and not part of it. Long fund names have always been a challenge with financial websites and in this case, it allows us to truncate the long names because the key differentiator is written underneath and still visible even on small devices. Fund title above, share class below in grey text.
Clicking/tapping any of the listed funds takes you to the fund detail page. The displayed information on this page varies depending on the selected investor type. For instance, an intermediary investor may want to know more about how to present the fund to the client, while for the individual investor, there may be stricter legal requirements such as risk factors involved with investing. Several markets have unique laws which require variations in the page's content. With the module system we've designed, it's relatively easy choose and edit the information.
In Pictet's case, the fund detail page should act like a brochure. Display only the relevant information, since all the minute data can also be seen on more technical websites like Morning Star or Bloomberg.