xumit capital

xumit capital

A comprehensive online directory for all

immigration programs and investment portfolio
management services for global Indian HNIs.

A comprehensive online directory for all immigration programs and portfolio management services for Indian HNIs.

My Role

UX Strategy, Responsive Web Design, Brand Identity, UI Design, Full-Stack Development

UX Strategy, Responsive Web Design, Brand Identity, UI Design, Full-Stack Development

Timeline

4 months

July 2021 to November 2021

4 months

July 2021 to November 2021

Team

React JS Developer, UX/UI Designer, Content Designer

Tools

Figma, React JS, Gitlab, Netlify, Google Sheets API, Email JS

Figma, React JS, Gitlab, Netlify, Google Sheets API, Email JS

  • Challenge

How can we create a comprehensive online platform that simplifies complex immigration and investment information for Indian High Net Worth Individuals (HNIs), while delivering a premium user experience?

  • The Problem

As an investment and advisory firm serving high-net-worth individuals (HNIs) in India, Xumit Capital has identified two significant challenges facing its clients:


  1. India's Evolving Investment Landscape

    • The growing interest in India as an investment destination has led to a surge of HNIs seeking sophisticated investment strategies.

    • However, the knowledge gap in navigating the complex investment ecosystem and executing a strategic plan has become a significant obstacle for our clients.

  2. Investment-based Migration Planning

    • An increasing number of Indian HNIs are exploring investment-based relocation options to other countries.

    • The decision-making process is often overwhelming, with an information overload and limited access to accurate and reliable information.


To address these challenges, Xumit Capital aims to bridge the gap.

As an investment and advisory firm serving high-net-worth individuals (HNIs) in India, Xumit Capital has identified two significant challenges facing its clients:


  1. India's Evolving Investment Landscape

    • The growing interest in India as an investment destination has led to a surge of HNIs seeking sophisticated investment strategies.

    • However, the knowledge gap in navigating the complex investment ecosystem and executing a strategic plan has become a significant obstacle for our clients.

  2. Investment-based Migration Planning

    • An increasing number of Indian HNIs are exploring investment-based relocation options to other countries.

    • The decision-making process is often overwhelming, with an information overload and limited access to accurate and reliable information.


To address these challenges, Xumit Capital aims to bridge the gap.

Tool Stack

  • The Solution

XumitCapital.com was designed with a design & performance first approach, with a focus on making user experience easy, fast and comfortable. With an elegant design system, the website was built using React.js and deployed on Netlify. AWS CloudFront and AWS S3 were deployed to provide an a seamless user experience across the website.

XumitCapital.com was designed with a design & performance first approach, with a focus on making user experience easy, fast and comfortable. With an elegant design system, the website was built using React.js and deployed on Netlify. AWS CloudFront and AWS S3 were deployed to provide an a seamless user experience across the website.

  • Our Approach

  • Phase 01 : Research and Brand Identity

How do we understand our target audience and create a brand that resonates with them?

How do we understand our target audience and create a brand that resonates with them?

  • Developing Personas

We identified that our primary users, Indian HNIs, value efficient, on-the-go services that minimize time spent on activities outside their routine.

  • Creating a Brand Identity

To appeal to our sophisticated target audience, we focused on developing a premium brand identity. This included:

  • Font selection

  • Color palette

  • Basic layouts

  • Phase 02 : Design and Component Development

How can we create a scalable design system that's both visually appealing and easy to maintain?

How can we create a scalable design system that's both visually appealing and easy to maintain?

  • Designing Layouts and Components

We iteratively tested various layouts and components, both in design mockups and browser development. This process helped us:

  • Understand component interactions

  • Ensure cohesive storytelling

  • Optimize first-time user experience

Interactive Hover Cards: Highlighting the most important information in a visually appealing layout

  • Information Architecture

On individual pages, the information architecture was designed such that it becomes more familiar to the user as they consume different pages of similar structure.


A page template was created for the ‘country’ pages which helped accommodate the content for immigration programs, basic information, eligibility criteria etc.


Different section oriented templates were utilized for the ‘investment’ service pages like pricing tables, service features, hero section etc.

Mega Menu: Navigating an information heavy website within seconds

  • Design & Development Strategy

Some ideas we implemented for team collaboration:

  • Divided all the information in smaller managable units

  • Designed a branded component for each of the unit

  • Each unit was defined in a way that fits together without the context of the content

  • This created repeatable units that could be designed and developed independently

  • This greatly increased design and development speed for the teams

  • It also helped create iterations faster for A / B Testing

  • Phase 03 : Frontend Development with React JS

How do we leverage React JS to create a dynamic and efficient user interface?

  • Component Structure

We used functional components with hooks for better performance and readability. Here's an example of our Australia component:

import React from 'react'
import Header from '../sections/Header';
import HeroAustralia from '../sections/HeroAustralia';
import AboutCountry from '../sections/AboutCountry';
import CountryPerks from '../sections/CountryPerks';
import CountryCTAShort from '../sections/CountryCTAShort';
import Footer from '../sections/Footer';
import MobileMenubar from '../components/MobileMenubar';
import CountryInfoCard from '../components/CountryInfoCard';
import ProgramsAustralia from '../sections/ProgramsAustralia';
import RegistrationStrip from '../components/RegistrationStrip';

function Australia () {
    return (
        <div className="country__page__template"> 
            <Header/>
            <HeroAustralia name="Australia" />
            <AboutCountry
                country="Australia"
                description="Australia is a unique and diverse country in every way – in culture, population, climate, geography, and history..."
                capital="Canberra"
                languages="English"
                flag="https://d34od1rbaqrsd3.cloudfront.net/flag_australia.png"
                symbol="https://d34od1rbaqrsd3.cloudfront.net/symbol_australia.webp"
                currency="Australian Dollar"
                climate="5 ℃ to 35 ℃"
            />
            <CountryPerks
                name="Australia"
                a1="Travel Freedom"
                a2="Applicants can travel in and out of Australia any number of times as long as the visa is valid"
                a3="https://d34od1rbaqrsd3.cloudfront.net/icon_travel.svg"
                // ... more perks
            />
            <ProgramsAustralia/>
            <CountryCTAShort
                punchline="Learn More About Australia"
                photo="https://d34od1rbaqrsd3.cloudfront.net/cta_background_australia.webp"
                cta="Get in Touch"
                url="/immigration-call"
            />
            <CountriesBelowAustralia/>
            <Footer
                phone="+91 70433 47443"
                phonelink="tel:917043347443"
                email="srishti.sehgal@xumitcapital.com"
                mailto="mailto:srishti.sehgal@xumitcapital.com"
            />
            <RegistrationStrip/>
            <MobileMenubar/>
        </div>    
    )
}

export default Australia

  • Responsive Design with CSS

We implemented responsive design using CSS media queries:

@media screen and (min-width: 600px) {
    .google__chart--mobile {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    .google__chart--desktop {
        display: none;
    }
}

.chart__title {
    font-family: 'GothicA1-Regular', sans-serif;
    color: #182342;
    font-weight: bold;
    font-size: 24px;
}

.chart__subtitle {
    font-family: 'GothicA1-Regular', sans-serif;
    color: #145CA0;
    font-weight: bold;
    font-size: 18px;
    margin-top: 20px;
}

  • Phase 04 : Backend Integration and APIs

How do we integrate backend services to enhance functionality and data management?

  • Google Sheets API Integration

We used the Google Sheets API to manage dynamic content, allowing the client to easily update information without touching the codebase.

import { GoogleSpreadsheet } from 'google-spreadsheet';

async function fetchCountryData() {
  const doc = new GoogleSpreadsheet('SPREADSHEET_ID');
  await doc.useServiceAccountAuth(creds);
  await doc.loadInfo();
  const sheet = doc.sheetsByIndex[0];
  const rows = await sheet.getRows();
  return rows.map(row => ({
    country: row.country,
    capital: row.capital,
    population: row.population,
    // ... more fields
  }));
}

  • Email JS Integration

We implemented EmailJS to handle contact form submissions without a backend server:

import emailjs from 'emailjs-com';

function sendEmail(e) {
  e.preventDefault();
  emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
    .then((result) => {
        console.log('Email sent successfully:', result.text);
    }, (error) => {
        console.log('Failed to send email:', error.text);
    });
}

  • Data Visualization with Google Charts

We used Google Charts to create interactive and responsive data visualizations:

import { Chart } from "react-google-charts";

function ImmigrationTrendsChart() {
  const data = [
    ["Year", "Australia", "Canada", "USA"],
    [2019, 160000, 341000, 1031000],
    [2020, 140000, 184000, 707000],
    [2021, 160000, 401000, 740000],
    // ... more data
  ];

  const options = {
    title: "Immigration Trends",
    curveType: "function",
    legend: { position: "bottom" },
  };

  return (
    <Chart
      chartType="LineChart"
      width="100%"
      height="400px"
      data={data}
      options={options}
    />
  );
}

  • Phase 05 : Deployment and Performance Optimization

How do we ensure fast, reliable, and scalable delivery of our web application?

  • Netlify Deployment

We used Netlify for continuous deployment, connecting it to our Gitlab repository for automatic builds and deploys on every push.

This helped with testing, building a iterative feedback loop within the team and rapid development.

# netlify.toml
[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"

  • AWS CloudFront & S3 for Asset Delivery

We leveraged AWS CloudFront and S3 for efficient delivery of static assets:

// Example of using CloudFront URL in a component
<img src="https://d34od1rbaqrsd3.cloudfront.net/symbol_australia.webp" alt="Australian Symbol" />

  • Key Takeaways

React Component Architecture: Utilizing a component-based structure improved code reusability and maintenance.

  1. API Integrations: Google Sheets API and EmailJS allowed for dynamic content management and serverless form submissions.

  2. Data Visualization: Google Charts enhanced the presentation of complex immigration and investment data.

  3. Performance Optimization: AWS CloudFront and S3 significantly improved asset delivery speeds.

  4. Continuous Deployment: Netlify and Gitlab integration streamlined our development and deployment workflow.

  • Final Product

A seamless and sophisticated brand experience that helps educate and engage customers

A seamless and sophisticated brand experience that helps educate and engage customers

  • User Testing

What Inperson offer is all services under one app and it’s completely free for users. Below is my observation on comparison with different market segments.

  • Home Page

    The home page clearly gives a glimpse of the value proposition to the customer. Designed to delight and engage customers with a simple interface and elegant layout.

  • Country Page


    Designed with a focus on presenting complex and analytical information with simplicity, crucial in decision making for the customer.

  • Reflection

Talking to customers becomes crucial to build empathy, which helped us stay focused on user experience.


Building a design and technology first brand experience poses significant challenges, especially during the discovery phase. These challenges include building an understanding of the customer needs, testing technologies that provides the desired experience and creating the foundational design system that guides both design and development teams.