Hexagon Fab

Live Site

Hexagon Fab

Role

Visual Design

UI/UX Design

Web Development

Industry

Corporate website

Date

March 2022

About project

HexagonFab’s mission is to create tools to help scientists expand the boundaries of what science can do.

The core of HexagonFab’s tools is the proprietary sensor technology - a new generation of biosensors for rapid and highly sensitive analysis of biomolecules like antibodies, proteins, and small molecules.

This award-winning technology, based on graphene nanomaterial, allows pharma researchers to characterise their molecules and production staff to monitor biomolecule quality directly at the production line. The company is based in Cambridge, UK and Zurich, Switzerland

Brief

The existing website does not look high end professional.

Cluttered and uses different layouts/styles/colors because multiple people added things overtime.

Therefore, they want something new, more modern, professional and match with new branding.

Target

Leave a stunning impression with investors.

Show a lively and cool company to job candidates.

Provide information to customers who want to read more about the product; raise interest in product for customers.

Storage Scholars website on laptop and mobile

First section of Our platform page

Following the principle of user-centered design, “Give visitors what they’re looking for,” we implement the following strategy

Redesign process

We used mind-mapping to envision the website’s information architecture, prioritize the hierarchy of pieces, and create a fully functional website. To enhance the overall UX, we must anticipate their needs and present relevant information at each step. As a result, the site structure is influenced bt various user types. It was able to simplify user flows between sites based on this by deleting unneeded pages, combining existing ones, and creating new ones as needed

User research

Understand your client first

User flow/Sitemap

Create solutions by creating user flow

Wireframe

Low-fidelity version for website

Clickable Prototype

To know how website will work

Create Style guide and components

To make design look consistent

High-fidelity design

Make them to be prettier and more attractively

Build in Webflow

Make design come true

What challenges have our designers overcome?

No items found.

After redesign

Typography

IBM Plex Mono & Work Sans

A modern twist on a monospaced face, ibm plex combines mankind and machine by adding human variation in weight and crafted soft curves to a precise rigorous form. This is our headline face for pulling out key information and points in a confident typeface. IBM Plex Mono should appear predominantly in sentence or title case and is rarely used in all upper case. Work Sans will be used for paragraph. Work Sans is a typeface family based loosely on early Grotesques. The fonts closer to the extreme weights are designed more for display use both on the web and in print. Overall, features are simplified and optimised for screen resolutions; for example, diacritic marks are larger than how they would be in print.

Colour Pallete

Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray. Green, the shades of green and other gradient of green color brings the feeling of vine garden and freshness and youth.