I just had a blast helping out 180Commerce re-design their website!
This is one of my favorites, as I loved the design scheme and media I was supplied with.
180Commerce is an online marketplace consultancy for brands looking to grow their sales on Amazon, eBay, Jet, Walmart, etc.
So this marks the third Amazon consultancy website I’ve done in the past few months, and I’ve enjoyed each of them!
If you want to dive in and read the whole success story, keep going.
Or else you can check out the portfolio pictures here and the live site here.
See the website design story for 180Commerce by Ali Rand. #webdesign Click To Tweet
So when I talked with Jason Stuempfig, 180Commerce’s president, he told me that they already had a one-page WordPress website.
But he didn’t like it and knew it could be better. Some features didn’t even work, like the all-important contact form and the careers page.
Because their industry was getting more crowded every day, Jason needed his new company’s website to be better than their competition in order to draw market share. So I got to work…
On the surface, their website looked modern enough. Big full-size images, icons, animations.
But you just got a dark and gloomy feeling from the entire design scheme. The overlays on the images were dark, there were a lot of black color block squares, and some of the images were black and white. The text was too small and there was no cohesive color scheme happening….Ick.
180Commerce’s brand and website wanted to be bright, healthy, and active…just like their clients’ brands they work with. So they had a lot to improve on that front (spoiler alert…they do!).
There wasn’t enough copy or media that actually spoke to what 180Commerce did and who their ideal clients were.
The copy was pretty generic and had stats on just the eCommerce platform. And the photos were just business related…not the brands or online selling you’d expect.
For a company looking for specific help on Amazon, there was not a lot of detail on how 180Commerce could help via their services on their website.
180 was also missing big opportunities in growing their email list from their website. Email marketing is SO IMPORTANT for any company to grow a list of potential clients, and 180’s website wasn’t taking advantage of that.
There needed to be optins or newsletter sign ups, and even a blog. Right now, all they had was a broken contact form. That had to change. ASAP.
- 180’s website needed to stand out from their competitors (in an impressive way) and convince visitors to become clients.
- The design scheme needed to be bright, active, healthy, and stylish in order to connect with their target clients.
- There needed to be more ways for visitors to engage with 180 and their community.
- Services needed to be highlighted more with clear (and working) ways to contact 180.
Stage 1: Prep
After filling out the contract and sending over the initial deposit, Jason started working on the Questionnaires for the project. This gave me more insights on what 180’s website needed and how I would achieve them.
I started preparing “The Hub,” which is a shared Google Drive folder. I got to work getting initial pages setup for the copy and an overall progress Google Sheet.
Once the Questionnaires were completed, I started doing some background research on his competitors and started brainstorming different design angles.
I also came up with the color scheme for this project. Luckily, 180Commerce already had a great logo, which featured a bright blue and navy blue.
But since they also wanted to appear healthy and active, I threw in a bright green and an orange. This really brightened the existing color scheme up.
For the font scheme, I stuck with Proxima Nova as the main body and headings. It’s my new favorite font that looks amazing as body and headings, and comes across as both professional and friendly.
Then, I collected photos to use on the website. While 180 only had headshots of their team, they were allowed to use their clients’ brand images on their website. So this was a gold mine for me, as all their companies had great, professional images (and videos) to use.
Stage 2: Mockups
Once all the prep was out of the way, I started creating mockups once the copy was done for each page.
The design was bright and bold, as I used large text for headings. And I used a great combo of white and green headings for captions over their brands’ photos.
Because that really was important to Jason. We needed to highlight their clients and show the diverse range of products they sell.
Because if you’re a watch company, and you see 180Commerce helped exponentially grow another watch company online, you’re going to be more convinced 180 is the right Amazon partner for you.
So I made my way through designing each page for the website.
Jason also came up with the opt-in, which would be a free marketplace review.
So I designed the opt-in to go above the footer on most pages. I really like how the warehouse image in it is out of focus, as it looks so professional. I also used an orange button to contrast from the blue behind it, so you really can’t miss the button. Perfect for a call to action button!
And while this is waaaaay web-nerdy, I really loved my footer for 180!
I know for most people the footer is an afterthought, but I really believe it plays a HUGE role in a website’s professionalism/credibility.
I just love how it turned out, with the gradient from the opt-in flowing into it and the blue headings popping out….just dreamy.
Anyway…where was I?
Oh, right…ok, so the last thing I did in this stage was for the home page.
I was initially thinking of a static image for the home page hero image. But then the idea struck me to create a video background using video clips from 180’s clients’ products.
Jason loved the idea, so I went around and captured clips from some of their brands…shots of Original Grain watches, demoing Creatures of Leisure’s Surf Ears, stirring up Laird Superfood’s creamers, etc.
I tested it on my demo site to make sure it looked ok, and it did! It actually turned out fantastic and shows potential clients who they’re already working with.
Bingo. And now time to move on to the next phase!
Stage 3: The Build
Since Jason didn’t want to use their current webhost for this website, I got him all setup on MDD Hosting. They’re my recommended webhost for my clients and are just great!
I then got to work setting up WordPress correctly.
There was a big security vulnerability in the past few months that affects new WordPress installations. You have to make sure you protect access in your .htaccess file before installing WordPress on your server, or else you risk hackers accessing your brand new site!
Once all the pages were setup, I tested the contact forms, which hadn’t worked before.
They also weren’t working for me either. Boo.
Lo and behold, I found my answer within the top results. All I had to do was check a setting in their webhost’s email settings to use an external server…and voilà! The forms were going through correctly.
And lastly, 180Commerce’s VP Client Solutions, Peter Kearns, was being interviewed for MSNBC’s Your Business program. So Jason wanted to highlight this news on the website.
So I added a top bar with the MSNBC logo and link to watch the video and a section on the home page for the interview.
That was the last bit, so I launched the website and did the final testing.
Before, 180’s GTMetrix score was C (73%), loaded in 3.5s and weighed in at 3.91mb. Not bad, but not great.
After, his score was A (97%), loaded in 1.3s, and weighed in at 2.55mb. And that’s with a video background! Very impressed with the new LiteSpeed caching plugin.
If you want to learn how to increase your websites page speed for higher search rankings and conversions, enroll in my Fast as Lightning Workshop. You’ll have a faster site in just 30 minutes or less.
So after all the testing, I was more happy because we launched ahead of time before the MSNBC interview! That way all the people could now see 180Commerce as the true professional brand partner for selling online and on Amazon.
Here’s what Jason Stuempfig had to say about the project and working with me:
What (if any) hesitations did you have before hiring me?
Not many, great referral from Peter Kearns.
What was life like before your website and what is it like now?
It was fine, but I intentionally didn’t send traffic there…Now, it’s much better. I feel proud and excited to share with the world.
What did you like most about working with me?
Your drive, organization, can-do attitude, pushing forward with whatever level of direction available at a given time.
Would you recommend me and my services? If so, to whom and why?
100%!! Happy to recommend or provide a reference. I also hope to use your services for company marketing materials, social media, and website growth/development and maybe more.
Thanks to Jason and the 180Commerce team for all your help in this project! You were always responsive and gave great feedback on the mockups.
I’m so happy we got this done in time for your big MSNBC interview as you are now able to capture leads and make more sales!
Some of the links contained in this post are affiliate links. This means that I may receive a commission if you click on the link and make a purchase from the affiliate. I only recommend products and services that I know or trust to be of high quality, whether an affiliate relationship is in place or not.