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.

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.

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.