CapitaLand Investment

UX Design and Handoff

Creating a new website platform for one of Asia’s leading listed real estate investment manager and one of the largest REIM in the world to onboard existing and new shareholders.

Client: CapitaLand Investment
Year: 2021
Agency: Equity Communications Pte Ltd
Role: Design Lead

Shortcuts

Note: Full case study can only be accessed upon request.

Full Case Study Visit Website

The Story

After a successful demerger from the development business of CapitaLand Limited, CapitaLand Investment (CLI) was formed and the new organisation will be listed on 20 September 2021. This project will have 3 teams in each organisation which consists of our agency, a digital agency, and the CapitaLand team.

For the visual approach and UI, we will have a 2-week timeline for ideation and initial usability testing before handing off for development to integrate into CapitaLand’s AEM platform.

The Challenge

The team is tasked to develop a new website for CapitaLand that will stand out among CapitaLand group and clearly communicates CapitaLand Investment’s vision, corporate values, and business objectives.

Insights

We gathered our insights through general feedback and competitive analysis. We shortlisted investment firms overseas to study namely, BlackRock, Brookfields, and Carlyle Group. We analysed by feature inventory, structure and plus delta.

Who are we designing it for?

We will be emphatising on 2 types of users and prioritizing their motivations and goals for this website.

Shu Chao

“The Investor Relations”

Goals

  1. Wants to clearly communicate what value does CLI give to interested parties
  2. To provide the latest information and news
  3. To communicate their latest sustainability goals

Brad Lee

“The Investor”

Goals

  1. Interested to know more about the new organisation
  2. To get first-hand information on the latest news and stock performance while on the move

Framing the problem

Shu needs a way to decimate information and news about CLI so that there will be a clear avenue to communicate with users.

Brad needs a way to access high-quality information about CLI so that he will get first-hand information on the move.

Solution

We defined the best solution through our research and synthesis for CapitaLand Investment’s new corporate website that will onboard their existing investors and new investors learn, read, and hop in.

Website Features

Visual Impact and Focus

The landing page will have a full screen slider featuring simple animations and a video main screen. Important updates and contents will be represented in each slide.

Hierarchical navigation

For ease of navigation and finding information cutting complicated browsing of information

Mobile First Design

The Website will be design mobile first and will be adapted for desktop viewing for better mobile experience on the go

Information Architecture

The sitemap will stick to the hierarchical structure to condense the cognitive load on each page and to address CLI’s contents they want their users to get the value of. Gradually this will change after this phase of the project

Content assets will be managed by two platforms utilised by CapitaLand which are Adobe Experience Manager and ShareInvestor as most of the dynamic content like news and stock information will be reused.

Standard Contents

Website contents will be inventorised under the CMS using Adobe AEM platform.

News and Events Contents

Will be managed through CLI's AEM platform. Category asset will be reused (Phase 1)

Investor Relations Contents

Will be managed through ShareInvestor via ShareInvestor API to push investor updates on demand.

Stock Information

Stock Information will be updated via ShareInvestor API. Focusing on stock quotes, day's range and volume.

Developing the Design

In developing the initial design the team did a rapid wireframing session and produced a high-fidelity prototype.

Setting the tone

The design direction will align with the mood board to set the tone and manner for producing components, icons, navigation, etc.

The Landing Page

The Landing page will be in auto full-screen cover page. The first slide will have the latest and most critical updates and important messaging. As for the rest of the slides they will be linked to their respective sections.

The Design System

Prototype and Usability

Prototypes

The prototype and usability were tested by the 2 types of users to be able to test, validate and get feedback.

*Please note this prototype was done last 2021 so most of the interactions and new overlay functions are not present at that time.

Usability Results

To cut things short, the usability result of the prototypes are 87% positive. There were some revisions on the contents due to heavy content on some pages resulting in cognitive overload.

Handoff and Development

After the 2 week sprint and testing, We have received a greenlight for handoff to the developer partner to build the site in their AEM platform. The developer will have a 1.5 months timeline including UAT before launch

Zeplin will be our main handoff and direct collaboration with the developer. Design specs, style guide, components, etc will be documented for easy referenceing.

Project Conclusion

As we conclude the project and applied the UX design process, we were able to iterate our research within a given amount of time and with a small team and our experience as an agency we were able to adapt quickly, especially in the handoff phase and integration with AEM.

Although, based on auditing the first phase of the project, CLI has to revise the contents and writeups to further reduce cognitive loads on main section pages and to be able to communicate clearly and easily with users.