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 siteA 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.
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:
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:
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.
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.
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.
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.
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.
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.