What I Did

Visual design
Participation in UX research and strategy

Causeway Website

Causeway Capital Management is an independently owned investment management firm specializing in equity strategies that span the globe. They apply a combination of fundamental and quantitative research disciplines via value-focused strategies. Based in Los Angeles, they manage assets for institutions located in the United States and Canada as well as Australia, Europe, Asia and the Middle East.

Causeway approached us to re-design their website in order to boost brand recognization, have better information architecture and enhance overall user experience. 

Goals

We conducted several interviews with main stakeholders including Causeway’s CEO, COO and Head of Marketing to gather their thoughts on current site performance, business goals for the new site, targeted audience and other problems they wish to solve. During these interviews, Causeway expressed their desire to build industry recognition and help the audience understand more about their true capabilities. They also wanted to become more relevant in the industry and build a stronger brand recognition. We listed four business goals for Causeway’s new website based on these insights:

Highest Viewed Pages

• Collectively, the People pages (Leadership, Research Analysts and Portfolio Managers) are the second most visited after the home page.

• The high number of views for the Mutual Funds and Strategies landing pages reflects the requirement that users click through these pages to reach individual Fund or Strategy pages.

Some Key Takeaways

• About and Contact Us: Page views of these pages bypassed the Fund and Strategy pages which are directly related to Causeway’s core business. Contact Us also had one of the highest bounce rates (66%).

• Insights: While home page promotion and direct links allow some users to bypass the Insights landing page, this page was still not in the top 10 most visited, suggesting the content could be more heavily promoted. Filtering options were rarely used—between 10 and 70 total uses for each filter over the course of the year thus far.

• People: This was one of the most visited content sections despite , indicating its overall importance to users.

Competitor Analysis

We reviewed and analyzed the websites of Causeway's competitors in the investment management world.

During the process, we focused on reviewing how the competitors broke up complex information and navigation, how they directed user traffic to most promoted content sections, and how they streamlined the user experience within the thought leadership/insights sections.

Acadian

• The Acadian site is designed around the mobile and tablet experience, with clear initial messaging and links to interior pages and a home page focus on thought leadership. Main navigation is hidden behind the hamburger icon, which could be confusing for the targeted audience group.

• Photography featuring Acadian employees is used throughout the site to both bring a more personal feel.

AQR

• The homepage leads with a single clear message, giving the user a limited set of options and a clear path to follow.

• This site contains a great deal of content, but pages are broken into manageable chunks, with graphics and photography interspersed. Main navigation items are categorized into only three buckets, which makes the content seem even more manageable.

• AQR used the term “Education” to represent their thought leadership content category and placed it as the first navigation item, which could lead to confusion for this is not a common term in the industry.

PIMCO

• PIMCO’s site is complex but still manages to be easy to navigate. The user is required to select their role upon arriving at the site and given a somewhat customized experience.

• PIMCO relies most on thought leadership (insights) content among all the other sites reviewed. They have built a very thorough filter and search system to let the user easily find the content they are most interested in.

Overall Recommendations

Based all the research, we brainstormed a number of things that we should focus on to make the new Causeway website a better overall experience. These points served as starting points for future steps.

Sitemap

We evaluated content and information architecture of the original Causeway site to create a new sitemap. The content can be broken into four big sections: Causeway funds information, Causeway investment strategy information, insights and industry thought leadership and general information about the company. There is also a stand-alone item in the main navigation that out links to a splash page for a microsite created for one of their sub divisions for extra promotion.

 Wireframes

We then sketched out the wireframes and page flow and finalized them through discussions internally as well as with the client.

Wireframe collaboration: Adam Howard

Style Guide

Current brand image of Causeway feels dated and incomplete. The client has requested to refresh their existing brand look but didn’t want to move too far from it. We made some slight adjustments to their brand colors to make them cleaner and more modern. We also kept one of their brand fonts as body text font and picked another display font for headlines for a bold yet sophisticated new expression. 

We sketched out a couple visual elements and eventually put together a style guide which served as the guideline and staring point for detailed visual designs.

Components

We designed some components including banners at the main level and sub level, tables and charts and card modules to create a cohesive design language that we can use when building out these complex pages. We can especially see this useful for the Fund and Strategy pages which we can foresee being very templated and systematic.

Origin of Name and Hexagon Graphics

Causeway got its name from the Giant’s Causeway, a geographical wonder along the coastal cliffs of Northern Ireland consists of over 40,000 basalt columns interlock in a unique topology. According to local legend, it was formed when giant Finn McCool hurled lumps of earth into the Irish Sea to build a bridge between Ireland and Scotland.

Causeway shares the symbolic value of timelessness, survival, and permanence with this distinctive bridge between lands, and the structure of their own research team reflects the interlocking columns of the Giant’s Causeway.

Causeway is very proud of its name origin and has requested us to reflect that in the visual design of the new website. We took inspiration from the overhead view of those stone columns and simplified it to be a hexagon shape, and reused that motif throughout as a strong graphic element. Photographs of the Giant’s Causeway were also used on the homepage and main landing pages as banners. 

Homepage

Homepage is the most visited page of the site and the user tend to spend a lot of time on it based on the analytics. The client want to use this opportunity to let the the user learn about the most important traits of Causeway, one of them being the “Fundamental + Quantitative” research model that sets them apart from their peers. We gave the research model its own feature and added a CTA leading to the page where it gets explained in details.

Another request for the new site was to put emphasis on Causeway’s Insights content. “Causeway Spotlight” was put on the homepage as a solution to specifically promote this section. In this module, three posts will be featured periodically to promote the stories themselves as well as to draw traffic to the entire Insights section.

Responsiveness

Responsiveness was one of the client’s top concern and we made sure the site performs well across different devices. We specifically ensured that all the complex tables and charts on Funds and Strategies pages are readable and easy to access across different screen sizes.

Funds and Strategies Landing Pages

Landing pages for Funds and Strategies sections serve as the index for all the Funds and Strategies pages. Funds pages contain information on the different funds that Causeway offers, and Strategies pages contain information on their investment strategies. These two sections have a lot of similarities in content structure so we designed them similarly. They both have card modules that contain the general info, a brief introductory video, quick links to supporting documents and a CTA to their detail pages. Funds landing page has an additional table with the basic data that the perspective audience might be looking for at first glance.

Funds and Strategies Detail Page Templates

Causeway currently offers 8 funds and 7 investment strategies, all of which has a detail page of their own. We looked at all the page content and listed out all the different types of content modules. These detail pages are all similar in structure so we designed sample templates for both Funds and Strategies pages with all the possible modules. The developers later used these sample pages as a reference and mix and match the modules to build out all 15 detail pages. 

From the analytics we found out that the number of views for Funds and Strategies landing pages is unusually high, reflecting that the user is required to click through these landing pages to switch between individual Fund or Strategy page. With this in mind, we made the headlines on individual Fund/Strategy pages into a drop down menu that includes all the other detail pages so that the user can jump around more easily.

Because these detail pages are long and full of content, we designed a side navigation that is always fixed on the left side to guide the user through the long scroll and to give them the option to jump to other sections quickly.

Insights

During the interviews, the client has expressed their strong desire to ramp up the “Insights” section in order to promote the heavy content and to become more relevant as a thought leadership role in the industry. We elevated the original experience from both UX and visual design standpoint to meet that request.

We designed an overall clean layout for this page to make the massive amount of clean organized and easy to scan through. Color background and imagery are used in the three featured posts card design at the top for more emphasis. For all the other posts, elegant typographic style are used to make the text easy to read on screen and yet sophisticated. Different CTA buttons are designed for all the different actions associated with the posts.

Improving the filter system is also a big request for this section. The analytics show that filters were barely used due to their unclarity and complexity as different types of filters were mixed together. To provide a solution, we broken down the filters into two categories, “topic” and “type”. The user can use them separately or together.

Since “topic” filters are used more often than “type” filters, we put “type” filters in a collapsible dropdown which is hidden by default to make all filters seem less imitating.

We’ve also limited the number of posts that show up upon loading to make the content presented to the user manageable.

A sample post page template with different modules was created for the developers to reference and build these modules as widgets for the CMS. The web administrator can later use these widgets to build a post page that best suits their needs. Modules include an intro summary paragraph, big and small image slots, pull quote and a “Highlights” card which allows the user to get the most important take-away at first glance.

About Us

“About Us” is the most visited page besides the homepage according to the analytics and people tend to spend a lot of time on it as well. Content about the company seem to appeal to the user a lot so we built this page as one of the most informational pages. This would be a great opportunity for the user to learn different things about the company such as key facts, company values, company history and the story behind their name “Causeway”.

Causeway’s history as a company is presented as a timeline format. Due to the large amount of information, we made the timeline a horizontal scroll to save vertical space. Depending on whether the event is a company or a product launch event, the info box will be either blue or white, making it easier for the user to distinguish them from each other at a glance.

People

“People” pages are collectively the most visited pages outside the homepage, indicating their overall importance to the user. We increased portrait size and added light color background to name and title section for more separation. This will allow the user to glance through the page more quickly and get the information they need easier.

Team members are categorized into six departments, all live under their specific tab. The user can switch between the tabs to browse under each department.

Careers

Another request from the client is to make the Careers section more robust. They want it to not only be a job posting board but also a place where potential employees can get a sense of Causeway’s dynamic culture.

In order to achieve that, a video that introduces Causeway’s culture is added at the top half of the page so that the user can get a lively impression of the company very quickly. The module “Our People”, which features four employees and their Causeway stories, is also added for a personal and humanistic touch.

Reflection

The process of this 10-month long project is all about collaboration, good time management and quick, effective solutions under tight deadlines. Internally, our UX, visual design, strategy team and third party developer team collaborate on a daily basis. Externally, we were able to work with our direct client on a regular basis to implement any adjustments quickly. The project was broken into several batches so that the design team and development team can conquer different parts at the same time for efficiency purposes. 

The client was extremely happy with the new Causeway website and has expressed their appreciation directly to us after the launch.

All Projects

Next Project