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.
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.
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.
Iconography
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).
& simulation
advanced materials
.svg)
Illustrations
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
Applications
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.
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 :(