Desktop computer monitor and mobile phone each displaying Marnoch Thermal Power web page. Desktop computer monitor and mobile phone each displaying Marnoch Thermal Power web page.

Responsive B2B Website

A project I tackled on my own, for a small branding presence website that needed a re-design. I used information the stakeholder had about his potential customers, and did research into what B2B users are looking for on a site. I developed site architecture, wireframes, and coded the site. The stakeholder was primarily responsible for content, but I was able to collaborate with him in deciding which kind of content would be best.

Visit the live site

Tools used for this project:
  • Figma for wireframing and site map, and working with vector graphics
  • Affinity Photo for image creation
  • Bootstrap, HTML, and CSS for coding the site

Screen captures of original website and re-design.
The original website, made by the stakeholder, in the background. The new design in the foreground.
The Challenge

A relative of mine has a small R&D company and they've developed an engine that converts heat to power. Being small, they've tried to do a lot on their own, including building their own website—but they needed help.

I wanted to start by doing some research on what B2B users were looking for in a branding presence website, and figure out what might be unique to my stakeholder's intended audience.

I was thrown a bit of a wrench when I was told he needed something much sooner than intended, before a grant application was submitted.

Screen captures of original website and re-design.
The original website, made by the stakeholder, in the background. The new design in the foreground.

Digital sticky notes.
I took all the ideas that came from talking to the stakeholder and doing research, and combined them as digital sticky notes looking for important themes.
Gathering Information

I took some time to do some research on what a business-to-business user would most likely be looking for in a website. The Norman Nielsen Group was, as expected, informative. Some of the things that I would take with me during the rest of the project were:

  1. Confusing navigation can be a major pain point, simpicity is key for discoverability.
  2. Links to external press coverage can help validate positive opinions of the company.
  3. B2B site visitors break down into "users" and "choosers", which aligned with later research that showed the two main potential customers were either going to be engineers or executives.

In addition to this research, I asked the stakeholder to advocate for his potential customers. Over the years, he's had a chance to meet with different people who might be interested in his technology. I did an exercise where I tried to get details to make a proto-persona for these potential users, to help give me guidance, but also to help the stakeholder better visualize who I was designing for. The main insights I had after this process were:

  1. They want to learn about the MTP technology
  2. They want to know how it can work with their application(s)
  3. The want to know the benefits for their business
  4. They need to know how to contact Marnoch Thermal Power
  5. Positive news coverage and partners help provide validity
Digital sticky notes.
I took all the ideas that came from talking to the stakeholder and doing research, and combined them looking for important themes.
Digital sticky notes.
Proto-personas I developed quickly to help the stakeholder visual who we were trying to design for.

Content

In addition to some of the content on the old site, I was given a PowerPoint presentation with potential content, and a larger white paper. I went through a lot of this, made notes, and used with the insights gained from the research to put together a site architecture that I thought would best help users with their needs. I presented this to the stakeholder who was happy with it, and I dove into wireframing a new site.

Site architecture diagram.

Wireframes

Knowing that I would eventually be using the Bootstrap HTML framework to code the site, I planned much of wireframes around what I knew was possible with the framework. I worked on wires for both desktop and mobile versions of the site. These too I presented the stakeholder. There were at this point changes that were made based on his understanding of the technology/product. I also felt for the planned "benefits" page, that there wasn't enough information to properly fill out a page. Also, the stakeholder felt that this information would have been better included on the main technology page, integrated with the information that was there.

Initital wireframe of home page.
Initital wireframe of home page for mobile.

Coding the Site

Because the site needed to go live sooner that expected, I decided to skip a step. I had intended to spend some time in Figma working on a layout, but I felt I could take the wireframes I had done, and build the site in Bootstrap right away. The site is online currently if you want to look at it yourself.

I started by developing a quick template, with a colour palette and fonts I wanted to use: Lato for body copy, and Roboto for headings and photo cutlines.

Homepage

I decided to make the header on the home page summarize what the company was all about. I worked out the "Clean renewable energy" copy with the stakeholder, and combined it with a natural vista. The icons and text, serve as a bullet point summary of the technology. My goal is to direct the users, whether users or decision makers to the technology or applications pages. Also, because this isn't something where prices of the product can be listed online, I put a call to action on this page to encourage potential customers to contact the company for more information.

Technology Page

This was always going to be the most detailed page. Again, I used bullet point icons to summarize the most important aspects of the tech and pair it with the visual mnemonic of the icon. The icon size shifts for a mobile device to take up less space.

Screen capture of technology page on a desktop.
Screen capture of technology page on a mobile.
The other pages of the site are less detailed in terms of content, but followed the same design principles as the other pages. I strive for consistency and simplicity.
Collection of pages from the website.

Reflections

Having to dive into the coding faster that expected, meant I had to skip a step. While I enjoy coding immensely, having a chance to work out the design with a better tool, such us Figma, I think would have benefited the overall design. Also, I believe there's things that if the stakeholder has an opportunity to do, would better server the user, such providing downloadable whitepapers about the technology—a B2B user needs easily accessible and well formatted information to present to their stakeholders.

Visit the live site