HP Tech@Work
Today's trends for tomorrow's business
Subscribe
6 Tips for a Killer Web Storefront
April 24, 2018
Beat out your competition
If your business is built on online sales, a good web storefront can be a make-or-break point for your bottom line. Enterprise companies have huge in-house UI, product and engineering teams who spend their days A/B testing and fine-tuning their online stores; small- and mid-sized companies don’t have that luxury.
When you’re working with a lean budget, sometimes the best option is a turnkey storefront from website builders such as Squarespace or Wix. But if your team has the resources to build from scratch, you have the chance to create a highly-customized storefront that maximizes your revenue. Keep these things in mind during your next build or redesign.
Mobile (web) first
At this point, any business dumping money into building an app while their mobile site languishes is leaving money on the table. App users are your loyal customers, whereas your mobile site reaches potential customers at every stage of the purchase cycle, from discovery to comparison shopping to checkout, according to Forrester’s 2018 Best Practices – Mobile Web study.
If you have to choose between a great mobile web storefront and an app, the web is usually the right place to focus.
Make sure your SEO game is on point
Recent research from Google shows that search terms such as “brands like” and “similar to” have increased by 60 percent (while “under $_” has increased by a whopping 175 percent). These common shopper searches should be an integral part of the SEO you include on the metadata, as well as within the content of your storefront (if you can find ways to tastefully integrate it).
Float like a checkout box, stick like a header
We’ve all done it. You scroll to the bottom of a page to read reviews or product details - and then you have to scroll all the way back up to keep browsing or check out. This is especially annoying on mobile.
Fortunately there are two good design solutions to this problem:
- Sticky headers follow users as they scroll down the page so they can easily jump to the next product. Good sticky headers adjust their size and look so they’re relatively unobtrusive - they’re there if you need them, but they’re not the main event.
- Floating shopping carts follow users down the page as well, but unlike sticky headers, you want them to be a bit more bright and noticeable to nudge users into the checkout process.
Hamburgers and breadcrumbs
The hamburger menu (those three stacked horizontal lines that you tap to expand a page’s navigation) is the new standard in web storefront navigation. People know what they are and how to use them, and they’re a great way to pack a lot of information into a very small piece of real estate.
An older form of navigation that’s destined to stick around, though, is the breadcrumb checkout. When it’s time to throw money down, users want a clear-cut familiar way to see where they are in the checkout process. Luckily, the left-to-right orientation of breadcrumbs is a natural fit for horizontal swiping on a mobile device.
A customer service bot (that isn’t annoying)
The customer service touchpoints that you build into your web storefront should be appropriate for your product, whether it’s a simple help page or a full helpdesk. If your business is in the latter category, it’s worth checking out companies like HelpShift and Kayako, who are developing AI-based natural language help bots.
The more natural your bot sounds, the more likely your users will feel satisfied with their experience. This will save your customer service team a lot of time, too.
Look sharp
A few bells and whistles can’t hurt while you’re at it. Add-ons like parallax scrolling (which lays a photo or image under the page content during a scroll) or rotating 3D products (to give users a better view of those shoes they’re buying) can make your storefront feel fresh and modern.
Go easy on those eyes when designing or improving your storefront by taking advantage of new monitor and display technologies. Check out your options.
