| The job: | Redesign a site, taking it from a brochure and online catalog to a fully transactional e-commerce site. |
|---|---|
| The industry: | Promotional products. The company is a long-time leader in the market, selling exclusive through contractual partnerships with primarily Fortune 500 clients. |
| The business strategy: | We have the infrastructure, logistics, vendors, and platform. Let's add a revenue stream selling directly to the open market. |
A site design of this scale involves enough decisions to fill a white paper, which is not what you're here for, so let's focus on the first thing: The site's global navigation. Its information architecture (IE), or the bones, if you will.
Before I do anything else, I want agreement on (a) what needs to be in the header and (b) the relative importance of each puzzle piece. The last thing you want is to jump straight to mockups and then spend the next two months on revisions and indecision because everyone's on a different page what's in and what's out, what's prominent and what's not.
Mapping out contexts and motivations
Let's first try to predict what's important to the real person at the other end, our potential customer.
Mapping out the buyers' contexts helps you put yourself in their
shoes.
This may seem abstract, but the first job of design is to understand the problem. The site is meant to meet a real-world need for real-world people, so let's make sure we agree on the context and concerns they have.
Motivations and concerns are what drive the decision to buy. The
purpose of maps like these is to agree on and design to a manageable set
of motivations to design for.
This should go without saying, but keep in mind: None of this is materializing out of a vacuum. Coming up with maps like these involves cross-functional collaboration to gather what we know about buyers in this space as well as consensus-building.
Mapping out priorities
We could start plunking menu items and menus into mockups, but you'll save yourself a lot of revisions and indecision if you agree beforehand (a) what needs to be in the global navigation and (b) what the relative importance of each items is.
The flow isn't going to be significantly different from the e-commerce
you're already familiar with, so we can rely on a familiar blend of
pieces for the header. Using size to rank their relative importance made
the charts instantly understandable.
I anticipated one quirk to this audience: You're buying products to
give away. That adds a layer of uncertainty and friction.
Unless you're a marketing pro who buys promo swag all the time, you won't necessarily even know what kind of thing to buy. We had enough content assets sitting around for a solid start here, and my thought was to tie them together in a single hub, the goal of which would be to help you pick.
One ask from the business: We can't neglect the company's enterprise
service offering as well. That is still the vast bulk of the revenue,
and the site must serve prospective clients as well as end buyers.
The finalized map emphasizes three transactional funnels (search,
category browsing, and idea generation), with About and our human-touch
channels (chat and phone) second.
Fitting the puzzle together into a nav structure
We're getting close. Now, we can add the puzzle pieces to a board and fit them together.
Here's a condensed version of the nav's evolution. Navigation structure
is a lot like a game of Tetris once you get to this point, and finding
the right combination takes a lot of rapid iteration.
The final version collects the nav's content into two rows, each with a distinct purpose: An upper row of lower-priority utilities (see where the priority rankings come in handy?), and a lower row of larger entry points into the shopping funnel.
Because we already had consensus on the header's contents and
priorities, finalizing and taking it live was a straightforward process
of graphic design, applying the company's styleguide, and front-end
buildout.
Bonus: Data-driven iterations
Late 2022 we began using a monitoring tool, ContentSquare, to follow areas of engagement and, conversely, friction. We're also watching the volume and cost of transactions with customer service, which are for obvious reasons more expensive than pure online transactions.
At the same time, we are actively looking to strip and simplify across the site — throw the ballast overboard, as it were — to drive up conversion rates. When we look at the header, the upper utilities row has clutter. Can we simplify?
The Phone and Help links had little engagement, and Chat is accessible
form a widget further down the page. We folded those together with About
Us under a Contact Us heading. The change improved conversion rates and
had no negative impact on sales through Customer Service.
In late 2023, we again prioritize condensing and simplifying. Business priorities have shiften slightly as well, and we want to emphasize the live sales channel by exposing the phone number again. We also want to give the Search field more visual emphasis.
We condense utilities into icons; Account and Cart are familiar enough
to any e-commerce user not to require text labels. The Search field is
slightly wider and has an acre of negative space leading your eye to it.
The main nav is now a single line, which gives us enough space to add a
lower row of direct links to categories we want to emphasize as well as
room for the phone number with a short tag line.
What about mobile and tablet?
Is this a responsive design, you say? Of course. It goes without saying.
Mobile. Note slightly larger font as well as larger tappable controls.
Tablet
