DIV2021

Redesigning a B2B landing for visual balance

The project is about redesigning an old corporate landing page of a Berlin-based IT outsourcing company.

About the people 🚚

Nerdcrew operated as a service across Europe. The model was to provide external support to companies in areas of development, software testing, research, temporary staffing, and logistics for IoT infrastructure.

Why was I hired? 🤔

Compared to their competitors they felt that the current website looked old and wanted me to do a revamp. They were also looking for a developer. I pitched them my skills in 'No Code' and asked if they'll have me do that work as well to which they readily agreed.

Understanding what to design 🧠

I was asked to hit the design ASAP and my role was more around UI. But I tried to get some context first.

What do the stakeholders say?

Started by reaching out internally through direct Slack DM. My approach was to learn about the targeted people as this was a B2B and has to have a highly specific audience. I got in touch with multiple people for this information.

  • Found there was not a lot of business dependence on the website. Most of the business came through the link between their agents and executives. Or through 3rd party vendor search consultants.

  • The audience for the website were grown-up companies and service providers working in the technology domain. Mostly experts who knew what they were exactly looking for.

Analyzing corporate websites

My main purpose was to have a better visualization of corporate websites and find what kind of design is preferred. These were my observation:

  • Dull and dusted. The color palette was not vibrant anywhere.
  • All the websites followed a lighter theme.
  • Horizontal and crowded menu aligned to the right.
  • An image slider was preferred as a header everywhere.
  • Inclination towards using stock images.
  • A high density of text on all pages with very little white spaces.
  • The language used was highly technical for the general public.
  • The macro view of things was overwhelming.
  • No visual hierarchy. Inconsistent font size and stylesheet
  • I used 'Wappalyzer' and found the technology stack was mostly WordPress with a standard corporate template.
  • The contact form always came before the footer.
  • The footer had redundant links from the header.

Constraining creativity 🌌

Decided to experiment with the corporate copy by first cutting down whatever was unnecessary and then placing it alongside vibrant illustrations. Honestly, the copies should have been redone, and I suggested that but the idea wasn't given much importance :)

I made sort of a spec-sheet based on what I wanted to achieve:

  • Follow a flat design style along with lots of white spaces.
  • Delete irrelevant information from the copy with the help of writers.
  • Arrange the company services along with their copies based on the business cap.
  • Provide the information in chunks with the help of content sliders for less overload.
  • Use isometric illustrations. Shift the focus from content-heavy to visual-heavy.
  • Maintain a 2-column syntactic structure. Use grids to keep the design scannable.
  • Stay with a light theme but use vibrant colors.
  • Typography should speak. Create a high difference in size between headings and paragraphs.
  • Keep the menu simple by sub-categorizations of pages.
  • Use optimized media content to favor faster load-time and implement lazy load to prevent the layout from breaking during load time.
  • If '7.' is achieved, experiment with anchors to create a one-page site.
  • Ditch the footer. Use a sticky header across devices. Nothing should appear twice.
  • Contact form with a list of all the services as a drop-down to choose from individually. None of the business websites I analyzed gave an option to get in touch regarding individual services.

The visual output 🎨

Color & Font

Used a brighter shade of the brand color which was 'Orange' and introduced a secondary 'Blue'. I used Raleway as my font with varying strength and size.

Final Visuals

As I had the task of developing my design, I mostly designed it straight in WordPress skipping wireframes and the design workflow, which didn't feel necessary. I prefer not to explain this section-wise to reduce the size of this case study. It's very much self-explanatory and totally in context to the "Design Spec" above. If you want me to explain this, just let me know.

A tiny outcome 🎊

The job was completed within 20 days. The new design was highly appreciated by everyone I was in sync with. Some decisions were questioned, but my reasoning was well accepted.


After an internal announcement of the new web design, I got private DMs from a few people of the company stating how happy they feel about the website now.


Most of all, what gathered everyone's attention was the reduced content, lots of visuals, a brighter theme, and all that on a single page. It made them feel easy about the work they do.

My overall lessons 🧙‍♂️

I'll list them all in points:

  • Keep a buffer. Something will always go wrong. Time is a commodity.


  • Do less. One of the heroic things I did was take up design and development. Never do that. It becomes difficult to push your creativity in design with that burden.


  • Take screenshots as and when things are done. I wasn't able to include the 'About Us' and 'Career' pages here as I forgot to take screenshots.


  • Diagonal communication is highly discouraged. People don't like it when you talk directly with their bosses. No matter how good your intentions are.


  • A global component library makes templating easy.


  • PayPal charges a shady fee. Use TransferWise instead.


  • Your payable amount should include the price of resources used, like hosting, and stuff. Create a breakup of the total amount and discuss it with your client before starting the work.


  • As another idea, invoice on milestones. Create a Kanban, plan a sprint, and share it with your client. Let them have full transparency. Invoice based on milestones achieved. Will help you with the mental dilemma of over or under-delivering.


  • No matter what you do, having the trust of the people working with you is necessary. The more they trust you, the more creative freedom you can have.


  • Never rely on crowd-sourced free resource websites. Either specifically, ask for the graphical resources, or offer to create your own for an extra price.

Thanks for your time.

Best, @divyakant360