PROJECT FOR A GERMAN I.T FIRM

Redesigning to reduce information overload on a B2B landing.

Role: Product Designer

Timeline: 3 Weeks

Platform: Web

Getting Started

This happened in Jan 2019. I worked as a freelance designer and my work was to design a proper company showcase for Nerdcrew. After getting on board, I was added to their Slack channel along with the manager. I took the task of first getting clear on who am I working with and what exactly is expected from me.


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.


Compared to their competitors they felt that the current website looked old and wanted me to brutally revamp based on the trend.


I was told that they are looking for a developer in the meanwhile. I pitched them my WordPress and networking skills and tried to create a bigger opportunity out of the opportunity I had. It worked.

Research

The stakeholders wanted me to hit the design ASAP and I wasn't getting paid for any research as well but I do not believe in creating things without context. I pushed it as far as I could in terms of research.

Internal Research

I 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.


I 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.

Competitor Analysis

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


These were my observation:

  1. Dull and dusted. The color palette was not vibrant anywhere.
  2. All the websites followed a lighter theme.
  3. Horizontal and crowded menu aligned to the right.
  4. All links led to another page on the website.
  5. An image slider was preferred as a header everywhere.
  6. An inclination towards using real-world stock images.
  7. A high density of text on all pages with very little white spaces.
  8. The language used was highly technical for the general public.
  9. No onboarding experience. The macro view of things was overwhelming.
  10. No visual hierarchy. Inconsistent font size and style.
  11. I used 'Whatruns' and found the technology stack was mostly WordPress with a standard corporate template.
  12. The contact form always came before the footer.
  13. The footer had redundant links from the header

Design Spec

I decided to break through the stereotypes by trying to combine the corporate with vibrant illustrations for a better visual presentation.


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


  1. Follow a flat design style along with lots of white spaces.
  2. Delete irrelevant information from the copy with the help of writers.
  3. Arrange the company services along with their copies based on the business cap.
  4. Provide the information in chunks with the help of content sliders for less overload.
  5. Use isometric illustrations. Shift the focus from content-heavy to visual-heavy.
  6. Maintain a 2-column syntactic structure. Use grids to keep the design scannable.
  7. Stay with a light theme but use vibrant colors. Fonts should speak. Create a high difference in size between headings and paragraphs.
  8. Keep the menu simple by brutal sub-categorizations of pages.
  9. Use optimized media content to favor faster load-time and implement lazy load through placeholders to prevent the layout from breaking during load.
  10. If '7.' is achieved, experiment with anchor links to create a one-page site.
  11. Ditch the footer. Use a sticky header across devices. Nothing should appear twice.
  12. An actionable 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.

Design

01


Color & Type


The first job was to decide on the color palette and typography. I decided to use 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 based on emphasis.

02


Branding


I got a go-ahead to change the font of the Logo. I informed them about the previous one being paid for commercial use. Ignorance led to unethical use. Previously the font used in the logo was 'Shine' which was cursive and excessively bold. I replaced that with Raleway as well. Keeping the design consistent was my game.

03


The Revamp


Here is the final design. I preferred not to explain this section-wise to reduce the text in here. It's very much self-explanatory and totally in context to the "Design Spec" above. We can pick this up probably while I am presenting it to you if you are an interviewer/recruiter.

Outcome

The outcome wasn't in number this time. All the work was completed within 20 days. The new design was highly appreciated. I backed it up with all the research. Some decisions were questioned, but reasons were well accepted on explanation.


You know it paid off when you start getting private DMs from the people of the company stating how amazed and happy they feel about the design.

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 happy and easy about the work they did. Color theory is real :) not really.

Learning

A lot of small things were learned during this time. 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 check your movement 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 component library makes it easy.


  • PayPal charges a really shady fee. The conversion rate is low and fixed. Use TransferWise instead.


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


  • As another idea, charge based on milestones. Create a Kanban, plan a sprint, and share it with your client. Let him have full transparency. Invoice based on milestones achieved.


  • No matter what you do, having the trust of the people working with you in 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.