Quad Blockchain consultants help companies to understand and invest in blockchain technology. Their online strategy was clarified and they turned to me for a fully responsive website design to showcase their new investment strategy SAAS platform.

A clear and simple design was chosen to articulate their core message with illustrated graphics and clear calls-to-action.

Before we get down to the details of user interface (UI) design and building interactive prototypes, it’s important to get the high-level flow of the design in place, establishing a skeleton around which we can build our design. After creating the mood boards, I wrote some basic use cases to clarify the brief.

Wireframe sketches are used to create the layouts and build the HTML5 fully responsive templates. I decided to implement the build with React Static Site generator, GatsbyJS for a blazingly fast user-experience. The page speed scores 80+ in google page insights and around 1 second page load time.

UX, IA, UI: All of these abbreviations get confused. In reality, as designers, we often work across these specialisms: designing an overall user experience (UX), organising information logically, considering information architecture (IA), and the granular design of the user interface (UI)

The wireframes set a path for the whole project and for the rest of the team (developers, visual designers, copywriters, project managers – they all need well-created wireframes).

With the wireframes and site-map sorted, I move on to the designs. Our weapon of choice here is Sketch.

💎 Setting up the Sketch file

After the mockups were finalised, I created the layouts needed for this responsive design. The Craft tool is a handy way to export the project into Invision App to build Hi-fi prototypes from real design files.

Interactive prototypes are necessary to gather instant feedback from the stakeholders.

The final site was implemented using Gatsby, an incredibly fast, static-site generator for the React Javascript Framework in conjunction with the following tools;

Build Software:

  • Source control & Remote repository:: GitHub
  • IDE: Atom / VSCode

JavaScript tools:

  • Module bundler: Webpack / Rollup / RequireJS
  • JavaScript Transpiler: Babel / Typescript
  • CSS Preprocessors: SASS / LESS
  • Code linting: ESLint
  • Testing: Ava / Mocha / Tape

I use Airbnb’s linter, which outlines best practice for JS and helps keep our code clean and concise.

Read more about my extensive testing procedure.

My SEO strategy is executed prior to and after launch and google analytics is configured for full control of the marketing strategy.