Industrial packaging company website redesign

role in the project
Lead Designer
duration
6 Months
Date
2015
Project
Berlin Packaging

The challenge

After updating its branding materials, the marketing team at Berlin Packaging engaged us to redesign the company’s main website. This included building in a product catalog component to the site.

Primary templates and style guide

Defining the goals

As with many companies, the various departments had different objectives when it came to the redesign. The marketing department was focused on promoting products. The sales team didn’t want the web to cannibalize its efforts. Meanwhile, R&D was looking for help marketing its services, and the business unit was hoping the redesigned site would help attract new talent and strengthen its vendor relationships. Ultimately, the home page needed to be a serious multitasker.

What are the wireframes for?

After considering the various needs, we created a main navigation menu capable of accommodating each area’s goals. We included the trigger words needed to ensure each target persona would recognize where their specific journey would begin and take them. 

While the marketing team was our primary contact, buy-in was needed from all the other groups and the company owner. Typically, when you go directly into a model, it can generate multiple rounds of revisions because everyone envisions things differently. To make it easier for each of our stakeholders to visualize how their goals would be met, I wireframed a prototype to help tell the whole story.

Starting with wireframes takes a lot less effort and is more cost-effective because it helps get everyone on the same page. Also, it enabled me to frame the conversation to the perspective of each persona when I presented the wireframes. So, instead of telling the stakeholders how the pages would work, I could show them while talking to the things each cared about:

- How an applicant would find a job
- How a vendor would sign up for approval
- How someone would find a product and order a sample, etc.

Wireframes for client review

Engage, capture and build a relationship

While data or oil may be the most valuable commodities, time is something that you'll never get back. So with everyone competing for a visitor’s time, we looked at how we could help provide the greatest value for anyone choosing to spend time on the site. We found our answer with a surprising and indirect feature after realizing customers spend lots of time researching materials, learning about best practices, and requesting samples. Every new search on their part requires this effort. We created a section that allows visitors to save all that information into a “favorites” section so that every visit doesn’t mean starting over again.

Product Grid

Borrowing a pattern for a segment filter

The product search needed to include segmented filters. This, of course, is not a new pattern. You can find similar solutions on popular sites like Amazon, eBay, and Alibaba, but we did have to test to see if it would work with every product category.

Product Filter
Style guide
Template with various column grids
Product page grids
Product page concepts for small screens.