Case study · Industrial
Great Stuff
A product site organized by project, for homeowners and contractors alike
The new brand and site launched, with where-to-buy through PriceSpider
The short version
This was my first full website redesign at Edelman. I was UX lead and UI co-lead, alongside a senior UI designer.
Getting the information architecture right meant learning the product line and its two audiences, DIY homeowners and Pro contractors, well enough to organize the site around the jobs they came to do rather than around who they were.
The problem
DuPont asked Edelman to redesign the Great Stuff website and launch its new visual brand. With e-commerce coming, we also needed a technology partner for a product finder tied to Great Stuff's inventory.
How should one product site serve DIY homeowners and pro contractors at once?
The new brand needed a new site, and the marketing team wanted better analytics from it. We also had to add a where-to-buy tool that sends people to a retailer and reports back to marketing.
The hardest part was timing. Wireframe and design sprints overlapped on a fast schedule, and the offshore development team joined as the designs were nearly finished, while the technical constraints were still taking shape.
How I worked
We organized the whole site by project and problem, so homeowners and contractors both start from the job in front of them.
The competitive audit, client workshop and stakeholder interviews shaped the first phase. We planned two: phase 1, on a fast schedule, built on the business goals and what the client knew about its customers; phase 2 would bring in research with the users themselves.
What I did
- Client workshop
- User research
- Competitive and best-in-class audit
- Information architecture
- Wireframes
- Visual design
- Content strategy
- Photography sourcing
- Client presentation and deck
Key design decisions
A how-to section of project videos is organized by project and problem.
The product gallery filters by the same project categories, with better site search, and every product carries the same set of information.
Product pages are laid out like a store's, with step-by-step project guides, an FAQ and downloads. The home page opens on an animated header with a slide for each product line.
Highlight
The animated header
One slide for each product line, each in its own color, with the product animating in.
Results
We launched Great Stuff's new brand and website, with PriceSpider for where to buy, full product information and imagery, how-to projects and step-by-step product guides.
For phase 2, we brought forward the UX learnings, analytics recommendations and an improved design.
Reflection
I would now bring developers in during wireframes. On this project they joined as the designs were nearly finished, and some of the design had to be adapted late.
I would also ask for the hours to annotate the designs in detail, and keep animation to the moments that point to what matters on the page.