Hey! I’m Noah Halter, Lead Designer here at SingleHop. As you may have noticed, both our website and blog has undergone a complete and total overhaul – SingleHop v5. We are all very excited about it, and consider it the best reflection of our brand to date, so I want to give everyone a bit of a walk-through of the new website and some insight into why we made certain design choices.
As SingleHop continues its incredible growth, we found that our never-ending project queue had left our main website playing catch up in terms of reflecting our internal goals, direction, and overall brand. So we came up with a plan to fix this.
First, we drastically needed to scale back the aesthetic busy-ness of, well, everything. The site was loud and crowded from additions over time – it was simply over-designed. We decided to strip away anything and everything we could to let the content do the talking. Things like excessive drop shadows, gradients, etc. were all cleared away. By removing all superfluous design, our messaging now resonates in a clean, professional, and high-end way.
This comes with a huge benefit – Call-to-Action’s are now immediately and clearly visible and are thus much more likely to be followed.
As Mies Van Der Rohe famously put it, “Less is more.”
The Design Process
We focused on the homepage at the beginning of the project, as it would guide the aesthetic direction for the rest of the site. This is typically how we approach a major web project.
The main page concept stayed the same throughout the project, for the most part. However, though this structure was in place, the details and layout of the page content were in a constant state of revision. This is seen in the image below – number 4 being the final design. Notice how the messaging and CTA’s become more and more clear as the design is further minimalized and revised.
We had a theory (and numbers to back it up) that nobody was seeing or clicking on anything but the first slide in the big main promotional area of our homepage. Because of this, we were spending a lot of time designing slides that nobody was ever clicking on.
Then the light bulb switched on – why not create a collection of entirely different homepages personalized for our visitors to reflect relevant products and messaging, making navigating and learning more about our vast collection of products and services much, much easier. This is all managed with a custom developed website configuration tool (look out for a future blog post detailing this. Very impressive stuff!).
In the end, we accomplished the Herculean task of creating 14 different homepage designs.
Designing for Heavy Content
With our extensive catalog of products and services, we faced huge layout challenges. We had to a) display everything we offer on one page, and b) present this in a clean and easy to digest way without overwhelming the visitor. We accomplished this by making this content area a giant tabbed interface, with each major product category getting its own tab. Inside each tab we implemented a boxed grid layout that is completely flexible with any content we want to add or remove. This keeps our website nice and clean as our offerings grow without becoming cluttered with add-on content.
Look at that thing! I dare you to find a bigger footer. We needed to list out every page on our website (for SEO purposes), link to our various social media networks, design a newsletter sign-up UI (user interface), and include partner logos. Yikes.
But we did it! Take a look at this work of art:
This is a small element, but I quite liked it. These are the various states of our newsletter sign-up UI. You can go ahead and try it out in our footer now as well.
I’ll only briefly touch on sub-pages for now, but when it came time to think about the sub-pages, the very first thing we did was let the site breathe. Whereas before all of our content was boxed inside containers, our new pages sit nice and open, with plenty of white space, freeing the users eyes from graphical distractions.
Next, we focused on bringing together our typography site-wide. Before, we had admittedly let the site slack a bit continuity-wise. There were multiple different fonts of different sizes and colors, with no real cohesion. It was a priority of ours to standardize our typography, leading to a much better overall flow.
Color-coding was another method we used to better the browsing flow. Because our site is so dense, it was easy to become lost. While we had attempted color-coding before, we had never really stuck to it. Now we have standardized color-coding as well – all pages related to Cloud Computing have blue headers, all pages related to Dedicated Servers have green headers, etc.
I hope you’ve enjoyed taking a quick look at some of the standout features of the new SingleHop. As we start blogging about design more, what sort of content would you like to see? I have personally been actively involved in the design side of the hosting industry for nearly 10 years and would be happy to share any insights I’ve learned.
Until next time!