Quad Blockchain consultants help companies to understand and invest in blockchain technology. The brief was to create a fully responsive website for their new blockchain investment start-up to showcase their new investment strategy SAAS platform.

They needed a clear and simple design that would articulate their 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. I created a mood board before writing some basic use cases to help satisfy the brief. Once the use cases are done I move on to wireframe sketching.

After designing the layout for this project, I decided to implement the build with React Static Site generator, Gatsby for a blazingly fast user-experience. The 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 different specialisms: designing the overall user experience (UX), organising information logically as we consider information architecture (IA), and the granular design of the user interface (UI)

I created a solid representation of the final design that won’t miss out any important pieces. The wireframes set a path for the whole project and for the rest of the team (developers, visual designers, copy writers, project managers – they all need well-created wireframes).

With the wire frames and site-map agreed, I move on to creating the designs. Our weapon of choice here was Sketch, used to create to the page layouts.

💎 Setting up the Sketch file

As soon as the mockups were finalised, I created the layouts needed for this responsive design. Before uploading any screens to InVision,  all assets required were marked as exportable (or used slices).

I used craft to export the project into Invision App to build Hi-fi prototypes from real design files.

InVision Boards provide a flexible space to tell stories, share files, and collaborate with team members throughout the entire design process.  Interactive clickable prototypes and Freehand projects are created so they can gather instant feedback from their 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 was executed prior to and after launch and google analytics was configured for full control of their marketing strategy.