From Template to eCommerce Custom Design

Have you ever worn a custom made suit or gown? Most people won’t, except for a few special moments in their lives. For most occasions, they’ll pick a selection off the rack, and that choice will be tailored in a few places. A hem here, a tuck there, and you’ll have a wonderful, functional piece of clothing. But a few times in your life, you might be lucky enough to have a talented tailor start from the bolt of fabric. They’ll take your measurements, talk to you about the piece you want, and every stitch they make will have a purpose, a goal in mind. This is, essentially, the difference between a website template and a custom made website. A template can be taken down off of the rack, a few adjustments made, and be a perfectly functional site. But an eCommerce custom design takes more thought, more time, and can come out perfectly tailored for the brand you want to show the world.

I’ll explain what I mean by using 1Digital^® Agency as an example. After all, we’re not perfect. We, too, can be sucked in by the quick fix of an out of the box template. We have a sister site called Genius eCommerce^®. It had been an industry blog on WordPress for some time, but several months ago we changed it to an agency site specifically talking about our eCommerce digital marketing services. When we made that pivot we wanted to get something up as quickly as possible, and so we used a WordPress template. As we worked with the site we found that all the things we warn our clients about when considering a template site, like optimization for conversion, speed, and cohesive branding, were becoming problems for Genius eCommerce^® as well. So we decided to take a dose of our own medicine and give Genius eCommerce^® a bottom-up eCommerce custom design. The difference is incredible.

The Template

The template is a WordPress/Woo-commerce design. As you can see, it looks good. We’ve used some of our brand fonts and colors to make it visually cohesive with the 1Digital^® site.

We also used the same icon packs to further connect it to the 1Digital^® branding.

We fleshed the template out with some custom development sections to highlight some of our clients and case studies.

And there you have it! A perfectly serviceable template site, up and running very quickly.

Our SEO account manager, Colin, was the first to notice some of the issues with it. “Site speed was the first problem I noticed,” Colin told me when describing his SEO audit of the site. “The images weren’t properly optimized, and 3rd party scripts were not being loaded into the site most efficient way.” Beyond that, the site was starting to see some Google rankings. We wanted to make sure that the pages we were working so hard to lead visitors back to were going to be engaging. “The site didn’t have any personality, it didn’t have any teeth,” Colin told me.

Roadmap for a New Design

The first step on any eCommerce custom design that we do with our clients is to lay out a roadmap. We look at sites the client likes and try to figure out why they work for that industry and what the essential message the site needs to convey is. For 1Digital^® Agency we have the bulk and breadth of our whole business to talk about, but Genius eCommerce^® was only focused on the marketing arm of what we do. “The idea was to focus on one really specific thing, and so the design should be really simple,” Art, 1Digital^®’s lead designer, told me. For inspiration, we looked at the flat UI used by Google.

Art also wanted to play off of the brand identity utilizing the term ‘genius’. “I wanted to give it an academic, cerebral feeling. To link in with the genius idea,” Art told me. “Like you’re reading an academic paper.”

Creating a New Logo

“A new site should have its own logo,” Art said. Logos are an incredibly important foundation in the world of design. When starting a new custom design for a client, we take cues from their logo about their color palette, their graphic style, and the tone of their brand in general. “The idea for the logo is what solidified for me how I wanted to interface with the rest of the design,” Art told me.

A good logo should have an interesting visual element, something that captures the eye. A good logo will also be able to express visually something about the message of the brand. You can see below some of the evolution that went into creating the new logo that we decided on for Genius eCommerce^®.

You can see how some of the graphics Art was considering came together in the final version. The atom diagram, representing genius, and the cart, representing eCommerce, were melded for the graphic element of the logo. This is the part of the design that communicates the message of the brand visually. Your brain already understands these two well-recognized symbols on an unconscious level. It reads the logo a combination of the two core concepts. Also, take notice of the fact that the rotating electron in the atom doubles as the dotted ‘i’ in the word genius. This is that interesting visual element that captures your eye, even if you don’t recognize it at first.

Color Palette

The colors used in the logo set the palette for the colors used all across the site. They are employed in different areas for differing effects.

You can see above how the teal and red from the logo are used to highlight the different action items on the page. The two colors are employed to create an information hierarchy. The red/orange is brighter and more aggressive, so it’s used more sparingly throughout the site. When it is used, it’s to call attention to the highest priority actions like ‘get started’ and ‘request a quote’. The teal is slightly softer and therefore is used for elements that we still want to draw attention to, just not as much as the direct call to actions. Items like ‘our company’ and ‘our reputation’.

The teal is also employed in the page headers. Notice how, by using color, the page headings are split into a main heading and a subheading while still managing to stay all on one line.

The new site has more than just two colors, of course. For other places that we needed a splash of paint, we referred to the 1Digital^® brand palette. This is something every brand should have. A brand palette is a set of guidelines for how color and other graphic design elements should be used. That way they’re easy to keep consistent over all your different media, from web, to print, to the company t-shirts.

These additional colors in the brand palette were used on the site to differentiate between sections. “I use color to clue the user in that they are in a different section of the website,” Art said. As you can see in the pages below, purple in the heading corresponds to platform pages, while orange corresponds to digital marketing channels.

You’ll see that the main 1Digital^® Agency brand color, the light blue from our logo, is saved only for one spot. It’s used in sections that link back to our main website.

The Reason for eCommerce Custom Design

I’ve had a lot of potential clients ask me, ‘why wait for a custom design when a template can be deployed so much more quickly and cheaply?’ In my view, the reason has never been more clear than what we experienced ourselves with Genius eCommerce^®. A template can be styled. You can add fonts and colors, make a few changes here and there, but in the end, you’re making small personalizations to a site that was created for someone else. When you go through an eCommerce custom design process, every decision along the way, no matter how small, has someone thinking about your brand and your message behind it. From something as big as a logo, to as tiny as what color to use in the buttons on the footer. The sum total of each of these little decisions made along the way is unquantifiable. I talk all the time about how custom sites can be better optimized or convert more easily, but in the end, this is the major benefit that’s hard to explain until you’ve been through the process at least once. With a custom design project, you’re not wearing an ill-fitting suit. You’re putting on a piece of formal wear that was tailored with your shape in mind at every step of the process. This tailored look is how you’re going to make your first impression on every single person that finds your website.

If you’ve been languishing on a template too long, maybe it’s time to consider upgrading to something custom. Our expert eCommerce designers listen to your story and help you tell it with a website. Get in touch with us at 1Digital^® Agency and see how a custom eCommerce design process can unlock new potential for your website.

Download PDF