Responsive Web Design, Branding

Designing a rebranded web experience for Two Sigma

Two Sigma (TS) is an investment management company which was seeking a redesign to fit with their new “financial sciences” brand strategy. This new approach would unite their growing portfolio of data-science driven businesses behind one shared vision. Sullivan was tasked with bringing this vision to life through a cohesive brand experience by way of content strategy, information architecture, user experience and visual design.

Overview

My Role

UX Architect

User Research
Competitive Analysis
Heuristic Analysis
Wireframing
Concepting
Information Architecture
Prototyping
Content Strategy
Brand Strategy

Skills Used

Time Frame

May 2020–August 2020

Senior Producer
Strategy Director
Managing Director
Creative Director
Technical Director

Team

Tools

Figma, Principle

Agency

Sullivan

UX Illustrates Brand Strategy

A key focus of this project was to conceptualize the new brand effectively through the user experience.

Two Sigma wanted their new brand and website to:

  1. Appear scientific, embracing the scientific method

  2. Emphasize convergent thinking

  3. Lean towards rationality over emotion

  4. Prioritize precision and intelligence

  5. Appear premium rather than approachable

Given these 5 directives, the UX, brand and strategy teams worked closely together to embody these ideas in each page, module and component.

Integrating Businesses, Products and Offices into One Centralized Experience

In order to strengthen the brand and create a unified experience, we recommended centralizing all of Two Sigma’s businesses under one corporate website.

The goal was to cross-promote businesses under the “Financial Sciences” ethos, and drive meaningful leads. Businesses would all be contextualized under one umbrella, including their products and offices of operation.

Focus on the Audience

Two Sigma website serves as an overarching company brochure, to attract clients and new hires. There were few calls to action, except for Careers or Contact Us. Knowing this, our primary users for the website were split into two categories:

  • Prospective hires

  • Prospective clients

Two Sigma’s data showed that over 80% of the visitors to their website were students or college grads, looking to work for the company. This meant that our narrative should focus on company culture, the people, and why Two Sigma is a great place to work.

To service clients better, we should focus on creating a robust contact experience, and strengthening the narrative about what Financial Sciences are about.

User journey map for a prospective hire

Simplifying the Site Architecture

The current Two Sigma sitemap was unnecessarily complex, and didn’t support the brand’s new narrative. There were far too many pages with several serving duplicative goals.

In structuring the new sitemap, our goal was to represent the new brand unification and simplify the experience to put Two Sigma in line with the competition.

Old TS Navigation - confusing assortment of child pages under the main nav

Competitive Analysis

Two Sigma’s main competitors had simple and direct navigation. We also looked at non-direct competitors, such as Goldman Sachs, which contextualized their businesses in a mega nav.

We wanted to make Two Sigma stand out by balancing clarity and context.

We looked at navigations from D.E. Shaw and AQR - two direct competitors. We also referenced some indirect competitors, shown here at Goldman Sachs and Morgan Stanley.

Incorporating Brand Strategy into the Navigation

A major focus of the rebrand was creating cohesiveness and awareness of each business throughout the new online experience. The corporate site would serve as the center of their new “financial sciences” ecosystem. When approaching the new site architecture and navigation, we proposed a 3-part structure promoting clarity and action, split into the Primary nav and Utility Nav.

Simplified Site Map for Two Sigma, following the brand strategy

Primary Nav

The new primary nav would support the scientific perspective of the brand and its businesses. Meanwhile, the utility nav would drive action from the primary users: prospective hires and clients.

The language we selected for the nav was purposeful:

  • Approach would encompass all things Science related.

  • Business would introduce each of the businesses under the new masterbrand umbrella

  • Knowledge would house all articles and media

Proposed site navigation and reasoning

Leveraging the Footer to Promote Products and Service Users

While the top nav was brand narrative driven, we focused on making the footer more utilitarian and purpose driven. Following SEO and UX best practices, we opted for a “doormat” footer, which would expose interior pages within each category and include additional pages not displayed in the main nav. This included the Product pages, which we eliminated from the top nav.

Footer wireframe with “doormat” navigation, elevating quick links to products, careers, and businesses. Exposing quick access to important contact information as well.

Creating Flexible and Interactive Modules

In designing the website, we used an atomic model of reusable components and modules with defined yet flexible parameters. In doing so, our goal was to create brand cohesion and lessen the load on development.

The new branding was heavily focused on a grid system. With this in mind, I designed UX solutions which would pair smoothly with a gridded look and feel.

For our Homepage and landing pages, we wanted to focus on impactful headers and storytelling. Each module focused on central parts of our strategy - emphasizing financial sciences, and the core pillars of Two Sigma which are People, Data and Technology.

For the Careers page, we focused on creating interactive modules for the user to learn about the ideal Two Sigma candidate, Roles and Teams, and the company culture.

Since dev was working on a tight timeline, we tried to reuse as many modules as possible. This would also tighten the user experience and design of the website as a whole.

Exhibiting “Financial Sciences” Through the Case Study Module

It was important for us to show how each business utilized the scientific method, and what impact it had on the business. To do so, we created a flexible, interactive Case Study Module for each business. This module would be the main feature of the Business Detail pages.

With these business needs in mind, I designed the module to have flexible parameters:

  • It could accommodate between 1 to 6 steps of the scientific method (1 step would not be scrollable)

  • It could contain text with a supporting image, video, or quote

  • It would utilize slight scrolljacking to lead the user through the scientific method special to that business, creating a storytelling experience

Animated prototype of the case study module - here there are three steps shown within the scroll

Editorializing the Knowledge Page and Improving Search

We refreshed the Knowledge, formerly “Insights” portion of the site to be more editorial based, with a more curated look. We also incorporated News into the Knowledge page.

Given their current content database, our challenge was to design a solution that made a small and irregularly updated amount of content appear rich and extensive.

We decided to elevate the 5 article topics (Data Science, Engineering, Markets & Economy, Policy, Work & Careers) into a dedicated subnav, leading to topic pages. These topic pages would allow a user to filter the topic between article types (News, Research, Insights).

I focused the UX on elevating featured stories, as single article or 3-up modules. This greatly simplified the landing page to focus on curated stories, leaving the article filtering to the topic pages. This in turn simplified filtering, which also allowed for a cleaner Search Results experience.

The result was a more editorialized and robust experience which encouraged browsing between topics and article types, despite a lack of content.

Finalized Knowledge wireframes - reusing established modules, and creating a more editorial experience. Streamlined Search Results page which focuses on Knowledge results.

Smart Contact Form

Following up on our second priority of improving the contact experience for clients, we designed a smart contact form to effectively filter users to the right information.

We included fields with dependencies, which would filter the user toward the right channel of contact. We also streamlined the form experience to be prefilled based on the user’s geolocation and entry point on the site.

For example, if a user clicked “Contact” from the Investments page Contact module, Investments would be pre-filled as the Business to Contact.

Global Location Filtering

Continuing with our strategy of centralizing Two Sigma and enhancing the contact experience, we also needed to show the breadth and depth of Two Sigma as global brand. While the Contact page created a guided contact experience for the user, our Global Offices page served to provide the user with greater clarity about which TS businesses operate in which geographic areas

On this page, my UX focus was creating a useful filtering experience for the user that also translated smoothly on mobile.

High-Fidelity Wireframes

The timeframe for UX on this project was roughly four months, before being passed over to design. Design and development worked in parallel sprints, developing components as design handed them off. Below are the wires for the Business Detail page for desktop and mobile.

Final Designs

The final designs stayed true to the wireframes, while incorporating essential aspects from the new brand guidelines. The result was a stylized, techie, magazine-like design.

Final Thoughts

One of the biggest things I learned from this project was how to incorporate branding and storytelling into the UX experience. Once the branding and strategy was solidified, it made it might easier to design everything through that lens. I also learned that strategy can evolve along the way, and to anticipate for iterations.

The next steps for this project are for design and development to finish, and launch the new website and brand.