WealthPoint Marketplace

  • Frontend: React
  • Backend: Microservices (Scala, Rust)
  • Environment: AWS S3,AWS Cloudfront,AWS Certificate Manager,AWS LAMBDA@Edge
  • Roles: UX Design,UI Design,Frontend Development

The investment marketplace is an platform we built in React starting in February of 2018. The purpose of the platform was to bring investors and real estate deal providers together.

WealthPoint Marketplace - By Adrian Kirsten

Frontend Architecture

  • 01.
  • Building maintainable frontend architectures.

Small building blocks create a big whole

Frontend architecture meant splitting big blocks of functionality into smaller, scaleable components that could be reused.

  • Base
    • Base elements such as typography
    • Containers and sections for things to live within
    • Common grids
  • Components
    • Small standalone components that could be repeated anywhere and in different contexts.
  • Features
    • Specific ui features that are built up from one or more components.
    • Can also be built up from scratch, but that’s rarely relevant.
  • Utilities
    • Based on the atomic css design pattern.
    • Provides micro utilities to quickly add where writing a whole new component or feature would be ineffective.
    • e.g. horizontal / vertical lists, dividers, type colors, background colors.

Cloud based, but simple

The react builds were simple in that we didn’t need much more than the normal builds. In essence, it’s a static system with interaction happening after load. This meant that hosting our app could be equally simple.

  • Hosting
    • Hosting is done on a single AWS S3 bucket with environments separated into different folders. This is effective and cheap to host.
    • We then attach AWS Cloudfront instances to the buckets depending on environment context, and client domains.
    • Lambda@edge layer for adding headers.
  • Deployments
    • This simple approach meant deployment was a simple series of commands we could run in sequence, which I simplified into a single bash script that could be run whenever it was needed.
  • CI/CD
    • Automated dev builds happened through jenkins, running the above script whenever features are merged into develop branch. Our develop branch is considered a stable working copy that could potentially be deployable.
    • Script based staging and production builds based on git version tags, again automated by Jenkins running the same deployment script. These actions were typically permission based to avoid accidental deploys.

UI / UX Considerations

  • 02.
  • Creating consistency through repeatable patterns.

Consistency = Predictable

The big thing I tried to introduce to the platform on the whole was consistency. Whenever something was displayed, it had to be consistent in terms of visual style against everything else.

I developed a style system of consistent gutters, colors, typography and ui elements, which was later then codified into css and component libraries.

This meant largely that developing anything custom was edge case rather than norm, and the rest of the team could usually simply pick up a building block and implement it.

On top of that they could then override styles and options through css variables and composing components into features.

Familiarity = Easy

Investing on it’s own is a scary thing, adding compliance, process and requirements on top that can quickly become a tiring excercise for a user.

My goal was to make sure that the user could become familiar with the workings of the platform quickly, without too much time spent on learning things.

I did this by repeating patterns throughout the app, meaning the interface would work consistently even when the context (wallets, portfolio, marketplace) was different.

This create a single source of reliability, leaving the user to focus more on the important tasks around the actual investing and investments.

Simply Whitelabeled.

  • 03.
  • Bringing clients & Investors Together.

Simple Templating

The frontend architecture was built using vanilla css with postcss on top of it.

I made use largely of vanilla css variables as design pattern to enable simpler maintainability of the frontend.

One of the big pay-offs from that decision was that theming this platform was a simple matter of overriding variables, which means a super light templating system.

The templating options are simple, but super effective and we could roll out a whole new subsystem in minutes.

Whitelabeled Sign In Page - Wealthpoint Marketplace - By Adrian Kirsten
Whitelabeled Sign In Page - Wealthpoint Marketplace - By Adrian Kirsten
Whitelabeled Sign In Page - Wealthpoint Marketplace - By Adrian Kirsten
Whitelabeled Sign In Page - Wealthpoint Marketplace - By Adrian Kirsten

Public Screens.

  • 04.
  • The investor's entrypoint.
The Sign In Screen - Wealthpoint Marketplace

Introducing the Task Pattern

I created the concept of a task, in which the user interacts with the platform.

Visually this is always represented as a white task box on the right, wherein the user is able to completely focus on what we are asking of the user.

Further on in the application, the user will be presented with the same format again when interacting.

For me this was a great way to introduce familiarity to the user, especially in an environment that can be complicated and scary.

The Marketplace.

  • 05.
  • Where deals are introduced to the investor.

Content Interaction

On this page, interacting with content is switching between Deal currencies and asset classes.

Interacting with content is always done in the same way, using the same components. This creates a familiarity to the user, meaning whenever he/she sees those components, they know they can interact with it safely.

Switching Profiles

Any given user is able to add separate investment profiles to their account, ie, a personal profile, their company profile and a trust.

They can switch between these at any time in the platform by selecting it top right.

Displaying Deal Information Effectively

There is a lot of information to give a potential investor about a deal, even before they decide to click on the deal.

This is a challenge in itself to present in a neat orderly way. We group the information contextually together and keep this consistent between deals.

The Marketplace - Wealthpoint Marketplace

The Deal.

  • 06.
  • Where investors decide to invest (or not).
The Deal - Wealthpoint Marketplace

Familiar Information

Since we already display important information about a specific deal on the marketplace already, and have to display that same information on the deal itself, it makes sense to do so in the same format. Therefore we repeat the deal card itself here, with adjusted content to reinforce the idea of familiarity to the user. The user has already seen this information before, so keeping the format means the user has to spend less time familiarising him/herself to the deal.

Investment Risk Category

This is just a cool dev feature. It’s a react component built with SVG and is context aware to the risk category of a specific deal.

Investment calculator

An interactive returns calculator that is based on several data points from the deal itself, the deal’s fee structure & the user’s profile.It’s also fully responsive, which was a feat all in it’s own.

Other UX considerations

By it’s very nature, a deal is a complicated thing with a lot of information that an investor would have to consume in order to make a good investment decision.

We break down the information into consumable blocks that’s easy and consistent for a user to consume.

In cases where we have blocks of text, we cannot reliably know exactly how much content will be provided deal to deal, so we show the first two paragraphs only, with the option to expand the block.This keeps the page itself under control, but also allows the user to opt-in and out to viewing potentially large pieces of information.

User Interaction.

  • 07.
  • A consistent approach to user interaction.

Interacting with the platform

Investing in a deal is a good example of a user interacting with the platform.

With the exception of the profile section, which is a beast all in itself, all actions the user performs follows the same ux pattern - A task feature that slides out from the right, with the main body moving slightly left and fading a bit.This gives the user two things:

It keeps a visual context of where the user is. Even though the body is slightly faded now, the user can quickly see where he/she is performing this action on.

It provides a new focus scope for the user. Right now, the action provided is the ONLY thing he/she needs to worry about, all other distractions and options are removed.

We further break down actions into steps to reduce the initial scary amount of fields a user needs to enter, and again enforces the idea of a single job to be done.

The Deal - Wealthpoint Marketplace
Investment steps - Wealthpoint Marketplace

Investor Portfolio.

  • 08.
  • Past investments & investment performance.

Content Interaction

On this page, interacting with content is switching between my USD portfolio and my Independent deal portfolio.

Interacting with content is always done in the same way, using the same components. This creates a familiarity to the user, meaning whenever he/she sees those components, they know they can interact with it safely.


We display all balances in the same way. The total, and a breakdown of that total. Again, consistently doing this in the same visual way enforces familiarity.

Portfolio - Wealthpoint Marketplace

Available Anywhere.

  • 09.
  • Web, Tablets & Mobile.
The Deal - Wealthpoint Marketplace


This screen is a nice example of how the app works responsively.

The tabular data becomes slideable horizontally, although in the new versions we decided to change how we display such data.

Mobile Sign In Screen - By Adrian Kirsten
Mobile Marketplace Screen - By Adrian Kirsten
Mobile Navigation Screen - By Adrian Kirsten
Mobile Wallet Screen - By Adrian Kirsten

Pain Points.

  • 10.
  • Solving critical UX Problems.

Pain Point

From both a UX and Development point of view, this feature is hands down the hardest problem to crack.

It involves complicated data structures, but also compliance and KYC requirements.

I’m not convinced we solved the majority yet, but made big progress in version 2.

Balancing Act

Due to the nature of this, we have to balance our technical requirements, and also constant feedback and requests from client managers and support staff.

This becomes hard to manage and find good balance without overcomplicating an already complicated process.

The Deal - Wealthpoint Marketplace


If you love what you see & believe that I can be a great fit for you as much as I do, then please get in touch!