I. Background and the challenge
Capital Square Partners is a private equity fund manager based in Singapore. It primarily invests in buyouts and control investments in Southeast Asia and India, across multi-geography cross border businesses - with deep sector expertise and focus on technology, media and telecommunications, healthcare and business and consumer services sectors.
I worked with wishbox studio as a UI/UX designer and full-stack developer in the summer of 2020. This time, I got an opportunity to work with Capital Square Partners, they previously had a website that was built using square space website builder. The team at CSP wasn’t satisfied with the outcome from square space builder, they contacted wishbox studio for a complete redesign of the website which showcases CSP as not another investment company but as a brand of investment.
The goal of the project is to redesign and develop the website of CSP showcasing CSP as an investment brand. The client desired a CMS which allows them to edit any content on the website, including updating or deleting team members and investments.
Agency
- Wishbox studio
Role
- UI/UX Designer
- Developer
Tools
- Adobe XD
- Gatsby JS
- Graph QL
- Contentful CMS
Missions
- Wireframing
- UI Design
- Development
II. Solution and wireframes
Keeping in mind that CSP is an investment company, we started with designing the Information Architecture which clearly defines the structure along with the type of content that is going on the website. We decided on three top-level sections besides the introduction on the landing section, the first section is the investment portfolio of CSP, which reflects their risk tolerance and financial goals. Second is the awards and accolades section which showcases CSP’s achievements since they started. The final section shows the amazing team at CSP.
Providing detailed information about investments in the portfolio is important, we directed each investment to another page from investments section which talks about the investment and the news related to the investment in detail. It’s the same case with each team member which directs to a detailed page of each one of them talking about their experience and educational background.
III. Ui design
We decided to have a classy and delightful vibe with the entire graphical character of the website showing CSP as a professional and mature brand. We followed the atomic design methodology for the design and development of the website. We designed individual atoms such as form inputs, buttons, h1s, and many such atoms, with the help of these simple group of atoms, we built elements such as form elements, these elements joined together we built organisms such as sections and forms. This methodology helped us build a cohesive and consistent website which is ready to be scaled in the future.
IV. Development Choices
Since we decided to build a proper design system, we continued to do the same with the development too, we used Gatsby JS which is a framework based on React JS, we built all the atoms of the design system as components, built molecules and organisms on top of that.
There are a couple of reasons why we chose Gatsby instead of plain old React, the first one is Server-side rendering, this allowed the client to make any changes on the CMS, the site builds and simply serves it like a regular website with html, css and js, no more waiting for responses from the backend and long image loading times. The second reason and my personal favorite feature of Gatsby is its image sharp plugin, it does not just load images based on the size of the client’s screen but also loads a blurry picture at the start and improves the quality once other components on the website load. We used contentful cms with gatsby as it provides default optimization techniques and integrates well with Gatsby. All of this meant, a super-fast scalable website with a robust cms.
