In my role as Director of User Experience at Xngage, I was responsible for the interaction design (IxD) for a B2B company’s corporate website. The company, Cleaver-Brooks, is a manufacturer of large boilers and power-plant equipment.

Using previous created personas and journey maps (based on stakeholder interviews and client’s customer interviews), as well as functional and technical requirements, I created medium-fidelity wireframes using Sketch and InVision. These wireframes were helpful to draw out additional client requirements and check for understanding before we moved on to the high-fidelity visual ‘comps’, which were created by Xngage’s Creative Director based on my input.

For example, here are my wireframes for a Product Listing Page (PLP) side-by-side with the visual designs for the same page, followed by Product Detail Page wireframes and visual design. (You can follow the links in the above paragraph to see the InVision project with all of the pages.)

Cleaver-Brooks’ website is available at https://cleaverbrooks.com/
(content and imagery on the live website may not exactly match the comps, due to client updates over time)