I worked with a local roofing company who was looking to update their outdated website to something more modern and mobile-friendly. Following a user-centered design process, I helped the company to rethink what their website should do, for whom, and how it might go from something the company feels like it has to have, to being an integral part of their marketing strategy.
A roof is not something one can buy online, so I helped this company think about how their website could be an extension of their sales team, with the aim of inspiring and educating customers so that they would feel confident enough in the company to request a meeting with a salesperson.
Personas represent the users we are designing for and serve as a touchstone for design decisions.
Through stakeholder meetings at the start of the project, we agreed that this website re-design would be an excellent opportunity to think about who their customers are, who they want their customers to be moving forward, and what these users want and need from the website. Based on the company's knowledge about their customers, we came up with four personas—one primary and three secondary—representing different customer types, needs and contexts of use.
Heuristic review and content audit
After defining who the users are, I performed a heuristic evaluation to determine what usability problems the company's existing site had, as well as taking an audit of their site content.
The goal here was to determine how well their existing site meets the needs of the users defined in our personas.
Armed with a knowledge of who our users are and what site content we have, I facilitated an information architecture workshop to determine what content was needed and how to organize it conceptually.
Workshop participants determined what content was needed—keeping the personas in mind—and collaborated on a card sort to determine a rough taxonomy for the site content.
I did some guerilla-style user testing at a local coffee shop to validate the information architecture that we had developed. I came up with several scenarios and did a tree test to test the IA. This revealed that, save for a couple of tweaks, the IA we came up with is fairly solid. BUT while the organization is sound, we could (and should) focus more on the tasks the users will want to accomplish.
Sketching and Wireframes
Because we are planning a responsive site, wireframes were important for getting a handle on content hierarchy. Wireframing allows me to think work through the hierarchy with the client without getting distracted by the visual design. The wireframes also allow me to communicate the page structure to the visual designer whom I am working to create a higher fidelity mockup.
I worked with a graphic designer on a high-fidelity mockup. Based on the work we had done previously with our personas, we knew we wanted to emphasize aesthetics, particularly on the residential side of their business. On the commercial side relationships are important, so we wanted to show that visually as well. We wanted a more modern look, and to make it as easy as possible for potential customers to make contact—whether they're just thinking about getting a new roof or need an emergency repair.