Why are conceptual designs essential for B2B websites?
B2B website designs demand rationality and functionality above all else. Which is why B2B and B2C designs vary radically in their application. There is most definitely a learning curve all designers go through when they start working in B2B design. However, many times when designers have to generate this utmost stripped-down-to-core, no-nonsense functional designs that must focus on only conversions and sales, it can get tedious and draining.
Then there are mindless duplications and replications of Stripe, in non-contextual ways. Or like Linear.app. Or the current trend of centre aligned hero sections with the dashboard taking up 60% of the fold; extra points if it is interactive and shows all features in a glance. Or a remix of what any designer hears from almost every client, “Clean and minimal design like Apple”
This sentiment of function trumps form and visual appeal has no place in website design for B2B is wrong on many levels. Sure a dashboard in the centre with its interactive feature tabs can explain everything the platform can do. However, is that all there is to your company and the people you are targeting? Is it really just the platform they care about or the results they can achieve by means of it?
So what’s the solution? Flowery language that’s full of fluff? Hire A-list celebrities as brand ambassadors?
(That’s not completely unheard of. Think Idris Alba for ServiceNow or Robert Downey Jr. for Aura cyber security.)
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2c5_66a38d6245edb738668cff41_Screenshot%25202024-07-24%2520at%25203.44.31%25E2%2580%25AFPM%25201.webp)
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2dc_66a38d84c0cc021c79ec5c39_Screenshot%25202024-07-24%2520at%25203.43.36%25E2%2580%25AFPM%25201.webp)
Well, it’s none of these. The answer is simply, applying conceptual design.
Conceptual Design, what it is and how to leverage it.
Concepts, in the simplest terms are the conduits to get through to the intended user of a design in an impactful way. They draw parallels between two mostly unrelated concepts and tie them together to create a new meaning that helps explain, sell, or put into context your products and offerings for your buyers and users.
Conceptualising is a step in the design process that designers articulate the function and form of the website design. In other words, this stage essentially is all about brainstorming, connecting dots from the research and ideating on a broad concept for the intended purpose.
At this stage of the design process, the team is focused on elaborating and expanding on any points of references, patterns, thought-starters that can lend to diverging thoughts. The idea is to put down and discuss any viable thoughts that can extend into a visual language.
Application of concepts to designs make them more engaging. They help make the communication easier and memorable. Concepts, when done right, can elevate designs and have a lasting effect on the audience.
So how can B2B websites leverage this?
Let’s look at this with examples…
Fruitful
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb302_66a38dc1889c17497875f46e_Screenshot%25202024-07-24%2520at%25203.47.49%25E2%2580%25AFPM%25201.webp)
Fruitful is a financial wellness membership that provides its expert financial advice with dedicated guides.
Finance can be a tricky subject to navigate around with the constraints of communicating through a website. You have to seem reliable and trustworthy and at the same time not make the audience feel the pressure of not knowing.
Fruitful tackles this beautifully by extensively using humans, both their guides and members to help the visitors navigate through the website and understand the offerings easily. They also leverage illustrations that evoke calmness and a human connect all while keeping the design minimalistic and easy on the eyes.
Fruitful’s concept:
Expanding on their brand name ‘Fruitful’ the website draws a parallel between gardening and finances. A topic that resonates with its ICP, they use the concept to liken it to a financial journey — sowing > investing; harvesting > enjoying different types of financial freedoms.
Although users have to pay attention and focus to fully understand the metaphor, the simple fact that the doodles and illustrations derive from ‘Fruitful’ is enough of a nudge for our brains.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2f3_66a38ddd215fb1b9c6e98224_Frame%2520427322209.webp)
The concept is not limited to just visuals but also copywriting, making it cohesive and seamless without inconsistencies.
Watch our website audit in Fruitful to get the complete breakdown of the concept application.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2ce_66a38e3087efd43c0161c608_Screenshot%25202024-07-24%2520at%25203.47.25%25E2%2580%25AFPM%25201.webp)
Wiz.io
Wiz is a breakthrough cloud security company that is exponentially growing, taking the cybersecurity landscape by a storm. Although in the beginning they had the usual B2B approach to their website, they changed the course with a conscious decision to deeply imbibe design in their touchpoints.
Wiz’s Concept:
Unlike most cybersecurity companies that rely on fear-mongering for speaking with their customers, Wiz takes a positive, upbeat approach. This not only creates a positive reinforcement but also an approachable personality to the brand.
“Magic represents the power to create something out of nothing, to turn the impossible into the possible. It's a perfect fit for a security product, which must protect against potential threats and vulnerabilities. By infusing magic into our brand identity, we're creating a sense of wonder and excitement that is rarely associated with security products.” — Roy Katz
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2f9_66a38e4c2d092cec644f0c26_Screenshot%25202024-07-24%2520at%25203.51.18%25E2%2580%25AFPM%25201.webp)
The illustrated website uses the PAS framework for their information architecture, but the optimistic spin of graphics makes it easy for a layperson to understand what they do and why.
My favourite is the “tough nut to crack” scenarios, illustrated literally and made interactive. Then the magician's hands appear with the solution. The concept is a mental treat as one goes through the website, engaged and ready to read anything they will plaster on the screen.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2f6_66a38e5c9dba791ac736bf66_Frame%2520427322208.webp)
This concept is also extensively applied across a myriad of touchpoints, resources thumbnails, employee branding, social media posts drilling it down in the mind of the audience.
Intercom
One the most largest customer service products on the market recently became AI-First. You know what that calls for, yes you guessed it, a website redesign.
Intercom said that after OpenAI launched ChatGPT, they had to shift gears and lean into the AI capabilities to avoid losing out. SO they did, they unveiled Fin AI Copilot and along with that came a massive revamp for the website. Giving birth to reddit threads that discussed how designers felt about this style, it is breaking the patterns I mentioned earlier of the infamous Stripe copycats.
Intercom’s Concept:
There were no release notes about the redesign, so we can only debate whether the graphics are AI generated or not, but they definitely leave a mark.
In the most simple terms they are alluding to the revolutionary change by AI, with graphics that are futuristic, yet juxtaposed in a classic painterly style.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2e4_66a38e95030394320601485c_image%252083.webp)
Could it mean that they are looking toward the future, without losing the human touch, which has always been their messaging? One can only guess. Regardless, the design takes the visitor on a visual ride and makes an impressive mark on their brains.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2fe_66a38ea0e66311be894a9d08_image%252084.webp)
The simple contrast of Artificial Intelligence with an innately human artistic expression - paintings, surely cannot be lost on the audience.
Zenchef
ZenchefOS is a restaurant management software that simplifies both the guest and restaurant experience. So in short a SaaS product, that requires restaurant owners, managers etc to buy and restaurant goers to download the app.
You would think what’s so revolutionary about that?
Well anyone who visits the website or comes across other touchpoints, wouldn't be met with a conversion-y website in the slightest.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38fb4fbc08fa4d1ddb530_66a38f7123148d6787027f84_Screenshot%25202024-07-11%2520at%252010.21.24%2520PM%25201.webp)
Zenchef’s Concept:
“Where others see tables and menus, Zenchef sees stories and connections. Taking this as our foundation, we created a brand that's authentic and easy to get. Because in the end, it's about giving everyone, guests and restaurants alike, a digital experience that hits the spot.” —Verve Agency
The visual design gives the feel of a good experience dining out, with handwritten notes and polaroids. The mix of sans serif DM sans and serif Tiempos implies a fine dining experience anyone would want to remember for a long time.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2cb_66a38f420b19d58cad20af5d_image%252013.webp)
My first impression was definitely not a product website, but a fun restaurant or food experience service. So I was pleasantly surprised when I read the copy to realise it’s a B2B website.
Benefits of a conceptual website design
Although the companies need to have some courage when approaching their audiences with a concept that is out of the box and unusual, it can really put you on the map.
Conceptual design cannot be random either. There has to be careful thought that makes the ICP resonate and enjoy if not fully understand the concept in the limited canvas of a website.
Some benefits of going a deeply conceptual route are:
Not being mistaken for your competitor
When you effectively employ conceptual design for your website, your users and ICP will cognitively register the difference and create a mental bookmark. A visual difference is the most effective way of creating a mark for your business in the minds of your ICP. No amount of words or features or CTAs can beat that.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2e7_66a38f1887efd43c0162fe29_Screenshot%25202024-07-24%2520at%25204.07.00%25E2%2580%25AFPM%25201.webp)
Establishing Positioning without needing words
If Wiz uses magic thematically in visuals, it is easy to associate them as wizards that magically solve your cloud security problems. It’s clear why Fruitful is displaying illustrations with abundance of produce. These parallels are not limited to brand names and metaphors. Intercom uses their positioning of putting humans first in a unique way that is recognisable.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2ea_66a38e7a87efd43c01622904_Screenshot%25202024-07-24%2520at%25203.53.39%25E2%2580%25AFPM%25201.webp)
Memorability and recall value
As basic as a stylistic form of graphic expression or copywriting that is unique in the market, concepts generate memorability value.
Honourable Mentions
- Paper Tiger
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2ef_66a38eda42e9e0023ddc1e83_Screenshot%25202024-07-24%2520at%25204.00.10%25E2%2580%25AFPM%25201.webp)
An agency that does conceptual content writing as well as visual design. Communicating design and creative ideologies to non-creative crowds can be tricky. With the help of visuals and beautifully written copy, the process page hits it out of the park.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2e0_66a38ee9be2896a8646f79b6_Screenshot%25202024-07-24%2520at%25204.00.42%25E2%2580%25AFPM%25201.webp)
This page, I love coming back to time again to dissect the details of the scroll interaction and how they would have arrived at the idea itself.
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2d9_66a38ef5217529259a7fb14b_Screenshot%25202024-07-24%2520at%25204.01.24%25E2%2580%25AFPM%25201.webp)
Even after a redesign, Github still is the first one to bring the developer-space look. It is not a direct relation but upon seeing the website, it appears larger than life, giving developers, their ICP a coolness factor to resonate with.
- Send App
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2d1_66a38efe87efd43c0162e066_Screenshot%25202024-07-24%2520at%25204.05.48%25E2%2580%25AFPM%25201.webp)
Another product website that takes a human approach breaking away from the traditional blues and greens in finance and adding their own flair unlike any other product in its field.
“A new take on sending money: boundless, fast and reliable. Verve captured their wholehearted take on money transferring in a fun, bright and human-centered identity. Highlighting their ambition to make money transfers something magical, rather than mechanical.” —Verve Agency
![](https://cdn.prod.website-files.com/642532eebf0ae34ecb684133/66a38f4b6ddaadd9f5ccb2e7_66a38f1887efd43c0162fe29_Screenshot%25202024-07-24%2520at%25204.07.00%25E2%2580%25AFPM%25201.webp)