Website redesign at the intersection of bleeding edge technology and academia

NBM Tech
UX/UI Design, Branding, Content Strategy

Defining the brand values

Crafting a value based content strategy

NBM is a special engineering company; but, we didn't know it when we first met.

Their website had clearly been created many years before, and although they were looking for someone to help them freshening it up, we ended up working on so much more together.

After various conversations we understood they are a particular organization in the sense that all the core engineers are also professors working in academia; this gives them a privileged access to early and cutting edge technology.

As we got to know each other better, we created a detailed roadmap on how together we would help their clients understand better their profile and what kind of service they could expect from NBM.

We achieved this by developing together a new content strategy and revised look that was better aligned with their core values.

NBM is formed by widely recognized professors and academic researchers. Their academic ties come with bleeding edge knowledge, which they exert to help their clients.

Where we stand and how to move forward

We went over their previous website and we pinpointed the main areas that we were going to improve and how. At the same time we started working together with the NBM people developing user personas and customer journeys.

Based on their experience with previous clients we drafted the journey of two imaginary potential clients, whom went from 0 to 100: beginning with not knowing NBM -to starting a project together. This helped us identify possible weak spots in the on-boarding process and guided us in creating wireframes and layouts for an improved online experience.

Plus we (literally) made (up) two new imaginary friends, Tania and Carlos.

A compilation of the UI of The Secrets of Arabia Felix

Sheet piles don't smell

Working beyond a logo and creating a pertinent visual system

Typography and colour

Indispensable aspects of a strong visual identity, typography and colour was where we spent the initial part of redefining the company's branding.

We wanted to build a solid base that would support every other aspect of the visual communication of NBM.

A clear typographic hierarchy and a consistent colour palette

We started working on a new typographic hierarchy that we would later apply across the whole website.

We created a visual system that felt more contemporary but at the same time would reflect the keyword attributes that emerged during our conversations: professional, mature and nuanced.

For the colour palette we took the existing company colours as a starting point. Without straying away from the existing colour associations we expanded them and defined our main and complimentary hues, as well as our interaction colour states.


We created several sets of icons to help us break complex terminology and dense information into digestible chunks. We made sure that icons belonging to different sets still felt part of the same family.

The best part of this job really was our small excursions into and around the engineering world: topology optimisation, sheet piles and thin walled structures quickly became second nature concepts (not at all, just kidding).

Physics based modeling
& simulation
Reliability and Resilience
Thin walled structures
Topology optimisation
System analysis and reliability
Industry certification
Product R&D
Customised algorithms
Guidance and training
Component design
Compatibility with
advanced materials
High efficiency, low cost
Cost reduction
and lightweighing
Building systems
An animation of Arwa


Going through all the material we were given, we couldn't help but feeling intrigued from the many technical drawings, heat simulations and various engineering visualizations.

With the help of the kind people of NBM, we used some of their technical visuals to create relevant backdrops to highlight the beauty and intelligence of their craft.

The video

NBM expertise covers many different areas in their field, and thanks to their expertise they are equipped to take on very diverse challenges. An above the fold video shows the variety of assignments they tackled through the years, from research to prototypes to solid structures (full video at the top of the page).

Your website is your business card

Putting all the ingredients together

All the visual elements we created came together in a 3 stage process of re-designing the website. The information architecture was greatly simplified, and the company's tone of voice acquired a more suitable authority.

Below we analyze a few pages to show the design thinking behind each decision.

Breaking down the homepage design.

The main action, as decided by the company and our research, was for visitors to get in touch and discuss directly projects or inquires.

  • 1

    Navigation menu and call to action

    The navigation menu and call to action always stay on screen through a responsive fixed menu.

    We simplified the navigation, focusing only on the top tasks that came out of our research.

  • 2

    Gain your interest

    We used large, impactful typography and a message that communicates NBM's unique value proposition and talks to the pains of its customers.

    To maximise the impact of the area above the fold, we created a video compilation of many different projects and areas covered by NBM expertise.

  • 3

    Custom icons

    Helpful to break down complex terminology and information, while reinforcing the branding image.

  • 4

    Learn more about NBM's core competencies

    This is our secondary call to action leading to more information about NBM's main areas of work.

  • 5

    Digestible Sections

    We break down the content in smaller, easy to scan, sections with plenty of breathing space to facilitate a comfortable reading experience.

  • 6

    Who we are

    A condensed "who we are" section to understand NBM at a glance with a backdrop of parallax elements relevant to their craft.

  • 7

    Up to date blog

    Latest posts and projects from NBM appear here with another call to action that redirects to their blog.

  • 8

    Gaining trust

    A selection of featured clients to reinforce trustworthiness.

  • 9

    This is what real people said

    Real comments from real collaborators further help establish the company's trustworthiness and history of successful projects.

  • 10

    Contact us

    We simplified the contact form by requesting the least amount of information possible and thus reducing the friction for the user.

  • 11

    Footer aka everything else

    Re-iterating the main navigation and a few additional pages that cater to a smaller part of the user base.

Breaking down the Expertise Page design.

A dedicated inside landing page for each of the two main areas of expertise of NBM.

  • 1

    Getting attention

    An impressive visual and three small chunks of balanced copy quickly communicate what this page is about and how can it be useful to visitors.

  • 2

    Services break down

    A clear overview of the services in offer.

  • 3


    A brief description of the possible applications of Thin Walled Structures.

  • 4

    Relevant blog posts

    Read more on the lastest case studies.

  • 5

    More in depth information

    Towards the end of the page we go more in depth, with a brief description of the technology itself.

  • 6

    This is what real people said

    Just like we do in the homepage, we reinforce a sense of trust, showing relevant quotes from previous clients.

Developed with care by Octagram Creatives.

Next project

UN DDR Report

Contact us

Need some info or just thinking out aloud?

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(