3 Keys to Unlock an Effective Promotional Products Website Design (Branding Series, Part 2)
We’re sharing a new series on how to create a powerful brand strategy and brand identity. Over the past few years, many distributors and suppliers have reconsidered their brand strategy and identity, and for good reason, some of us emerged from the pandemic with somewhat of an identity crisis. This series will highlight stories from some of the most inspiring strategists and their companies, plus tips from their experience as they reinvent, refresh, and promote their brand. In our last post, we shared how Imprint Engine built its bold new brand strategy and identity, and today, we’re sharing a practical toolkit: 3 Steps to Revamp Your Promotional Products Website.
Ask anyone who has been through it, recreating a brand identity and then overhauling your website is a long slog. It’s like the Russian nesting doll of marketing projects. Every time you unpack one question, it begets another, and on, and on, and on.
But there are tools that can make the process a helluva lot easier. We asked Luke Williams, commonsku’s Digital Marketing Director, who –incidentally– was deep in the process of revamping the commonsku website, to break down his process. We asked Luke, “If you could simplify all the decisions you make in overhauling a website, what are the three core steps you need to help unlock the process and make it smooth for you and your team?
One quick note: Some who need to revamp their brand must return to their roots to reestablish a new visual identity. If that’s you, we recommend you start with this interview with Mike Schwandt, SVP for Brand Strategy at Imprint Engine, who talks about the need to create a brand strategy before you begin working on a new brand identity.
But for those who have already been through the rebranding process and simply want to update their site, here are Luke’s three core steps:
(1) Identify which problem(s) you’re trying to solve:
Do not make the regrettable mistake of skipping this step.
Many want to rush ahead to the fun part, the creative part, the redesign. But Luke offers a strong warning, “I can't stress this enough. Even if you are hiring an outside agency to do your website, you need to first review your site, so you know what you are asking for and have clear goals for the agency.”
Perhaps you don’t need a new visual identity. Maybe your problem doesn’t require wholesale design changes but, rather, a simple website update. Either way, you need to identify which part of the problem you are trying to solve. Here’s a checklist to help narrow down some of the most problematic parts of a site:
And if that list didn’t cover all that you want to overhaul about your site, the key is to write it all down, note everything you don’t like about your site. Luke continues, “Once you understand and note what you don't like or what you want to change about your site, you are in a spot to make meaningful changes.”
Action step: Collect your problems and then prioritize them. Take screen grabs, scribble notes, start a doc, take the list above, and list by your most glaring challenges first, whatever helps you and your team get the problem --and your priorities– on paper to share with others.
If you don’t determine which problem you are trying to solve and in what priority, you won’t know how to fix it or even where to begin. It’s like taking your car to the mechanic and telling them it won’t run right (“fix it!”), but not giving them enough information to source the problem. Is it the tires? Engine? Brakes? It will cost a lot more time (i.e., money) to have them tinker around to find it than for you to give them some guidance.
Luke notes how important this part is by offering this heads-up, “If you have a fairly large site, this process alone might take you a few weeks.” And the way to think of it is this: If your website overhaul is a 90-day project, those first two weeks spent might make the difference between your redesign coming in under timeline or extending to 120 days.
And speaking of deadlines, you should establish your finish line from the start. Luke and our marketing team did. Luke created a simple Gantt chart highlighting the main changes he wanted to make on our site, including who was responsible for which section. By outlining the specific changes, he was able to assign a timeframe to each one and create a realistic expectation for all deliverables. It takes iteration planning, but it breaks up a long-distance run (“finish website”), into smaller sprints. Plus, you’ll be able to track progress along the way.
(2) Create Wireframes for Your Site
What’s a wireframe? A skeletal structure of your website, like an architect's drawing of a building, basically a fancy sketch or drawing of where the basic blocks of your content will go on each page.
“Wireframes are layouts of a webpage,” writes Luke, “It’s sort of like when you write an essay, how you note the opening paragraphs, your 3 main points, and the conclusion. In web speak, you are deciding how you will structure each page. A wireframe answers questions like, ‘Where will our CTA’s be? In what order will our “blocks” be placed? What information is contained in each block?’ We do this for every page so we have a map, an idea of what will be on each page.”
Wireframes are critical because of one reason: real estate. You have a very limited space to convey a lot of information. Most of us make the mistake of trying to squeeze too much onto each page, and a wireframe helps control the verbal and visual deluge of trying to put too much info on a page.
A wireframe also gives some rough direction for your colleagues. Your team can review the basic structure of the site, and you can make easy changes before handing them over to a design team or agency. Most of this will change, and that’s a good thing, but a wireframe makes it easy. Think of it more like playing with legos instead of laying down actual brick, it’s meant to be a draft and work-in-progress until you reach the final stage: design and copy.
A few tools to make it easier for you: Since many distributors have Adobe professional accounts, Adobe XD is a (surprisingly) uncomplicated wireframing tool for an Adobe product, but Luke suggests Figma because it’s free and easy (and what Luke used to create our wireframes, like below).
One side note for commonsku customers: We’re seeing an uptick in trends where commonsku customers are creating a page for clients, not only for shops but for portals (highlighting the benefits, demonstrating the process). It’s important for us to note this here because one of the most in-demand features requested by B2B customers in a post-pandemic world is more digital buying tools (and not just e-com). B2B buyers and prospects are looking for an easier way to manage their multiple projects, and a portal is a gateway to easy project management).
And now that you’ve determined exactly which problems you are trying to fix, and the approximate layout of your pages, you can move to the next step:
(3) Design & Copy
We could unpack a whole ebook on design and copy, but since we’re trying to keep this doc to three simple steps, we’ve provided a few resources below, just in case you want to deep-dive into colorways, tone, voice, and branding.
But for now, the most critical thing to remember here is: the dance.
“Design and copy have to be done in the same stage so that they can relate to each other,” writes Luke. “If you make all the images first, they might not fit what the copywriter is trying to say, and vice versa. This is an agile step, where the copy and design teams work closely together to get the right feel.”
Thinking of it as a dance between design and copy. One discipline cannot dominate the other, each has an important role to play so that the process is smooth and the outcome seems effortless, clear, and mostly: symbiotic.
“The copy is usually handled by a copywriter or an internal team that understands the business and tone of voice,” continues Luke. “The copywriter is responsible for all the text, H1s, H2s, descriptions, and CTAs on the page. Design is, of course, handled by a designer. The designer takes care of all the icons, images, and elements on the page, like how an animation moves, or how blocks fly into the screen.”
We’ve provided more resources below to help with design and copy but Luke’s final note about this 3-step process?
“Just know going in that there will be a fair amount of iteration as you progress. Things change when you actually start designing or writing copy, and you might feel like you want to go in a different direction. That’s good, that’s why you develop it this way, to unlock better ideas. Maybe you realize the homepage you intended doesn’t have enough info, or perhaps too much, or maybe the CTA’s are misplaced. Plan on a significant amount of iteration after your V1 of the design and copy are developed.”
The key for this 3-step process is to remember, you’re iterating on a big project, moving from your initial first draft (citing the problems), to your second draft (wireframing), to, ultimately, your final draft, design, and copy.
A few more resources for you:
Style: Our fave resource for style is still Mailchimp’s awesome (and detailed) guide, but if you want to skip to our fave parts that will help create more distinction in your brand, check out the section on tone and voice.
Voice/Copy: For what to say on your website, there’s no one better than Doug Kessler and the folks at Velocity Marketing, puruse their page on content, and you’ll see why.
Design: A ton of info here (maybe too much), but perhaps you’ll pick up an idea or two in Hubspot’s 29 Dominating Web Design Trends for 2023
Branding: For inspo, just one example of how our team and our amazing designer Lucia, uses color, imagery, and fonts can be seen in our recent “Behind the Branding” post about our fall event, skucamp.
SEO/Analytics: For search and analytics help, Luke recommends Analytics Mania (website | YouTube)
Want more power tips from Luke? Check out our podcast interview, where we chat about everything from the new changes in google analytics to evaluating websites, content, and more!