Redesigning WhoGoHost’s website with Webflow: things I learned
How about I don’t make this a “Case-study” and just tell you a story instead…
A little over a month ago, I and some of my favourite star-studded designers (Mudia Imasuen, Simeon Fadahunsi, Charles Njoku, & Gift-with-the-cowboy-mustache) started Rated-R, a youtube podcast/talkshow where creatives can speak freely and share their thoughts & ideas raw and without censor. On our first episode, we took aim at WhoGoHost’s website & their user dashboard and….well, we didn’t have a lot of nice things to say.
After the excitement of the first episode had died down, I took another look at the website again, going over what we had discussed. Like all people with a creative streak, I’d already started looking into ways to making the design look better, which of course is a common mistake among us designers. It’s like saying:
“Let’s ignore all the context and dive right into making things pretty and adding lots of soft-shadows”
To be fair to WGH, their website doesn’t look bad. It’s passable and I’ve seen worse, even by brands/businesses that should know better. Its problem is that its design is dated. This website could have looked awesome in 2010. In 2020, not so much. I tried to think of the possible reasons why they wouldn’t be as invested in their publicity, identity and visuals as, say, Godaddy or SquareSpace is, for example. What are their sales channels and how does the funnel work for them?
I asked a few people (ranging from regular developers, website designers and small business owners with online presence) about their thoughts & experiences on WGH and from what I was able to gather, most of the people who knew about WGH, knew them via word of mouth. Now whilst that ideally is pretty awesome for any brand however, their individual experiences weren’t so rosy.
Also, we don’t know a lot about their usage numbers. The best I could find was this page from whtop.com and boy…. you’ve got to see it for yourself.
Before I started laying out the pixels, I needed to lay down the foundation for the structure of the page. What would people coming to WGH, either as first-time users or returning customers, want to see? I didn’t have time to cook up questionnaires or generate personas from thin air because it’s a pet-project and I have actual paying projects but I did have experience on my side: I’ve been all these people (developer, designer, business owner) at various points in my career and I have engaged with WGH at each of those times. Let’s just say I’ve got a pool of bad blood to draw from.
WGH’s website is plagued with inconsistencies, gradients with no direction at all, colors switching on you faster than Nigerian politician switches parties, no scheme in the aesthetics, information architecture’s backwards an- it’s a lot, yes, but I will not lie, I was thrilled because, now, I had the freedom to create on my own terms.
I started the design with the intention of making something simple yet delightful. Delightful because you need something to pull returning users back in while giving the new comers something to remember you by. In a world of design rules, grids, philosophies, schools of thought and masturbatory opinions, I think we’ve forgotten why we became designers in the first place: to delight. Not to serve as a complement to justify the existence of function, but to delight.
I didn’t have a lot to go with visually: WGH’s entire identity is their logo and a shade of blue that’s duller than a meeting of brick walls. That’s it.
No patterns.
No original visual assets
No unique style or voice.
Just a logo and a color.
So I set about committing my first design crime: I used a bolder shade of blue. I employed big fonts for emphasis and some nice illustrations I got off shutterstock (which I had to tweak intensely to fit into my vices). The design needed to look and feel fresh & clean, not too serious but having its own persona. I wanted to use the blue color to set the tone, calming and easy on the eyes while inspiring trust, throwing in some orange as a break to draw attention.
I had these ideas for animations and micro-interactions, it was going to be clean and beautiful and epic. Just one small problem: I didn’t know how to bring it to life. You see, I can’t write HTML to save my life. I do follow the trends, to be familiar with what’s possible and what isn’t but I struggled every time I opened VSCode to kick off some HTML.
I put the design online to get some feedback and it turns out a lot of people liked it. WGH didn’t dig it so much, telling me in no unclear terms that whilst they think it’s cool [sic], they weren’t looking to redesign their website anytime soon. To be honest, I wasn’t looking to score a redesign contract with them, bearing in mind the direct implications such a move would have on a business the size & calibre of WGH. I simply wanted to share my design process which didn’t pan out so well as while I was recording my screen as I designed, my screen recording app crashed and hours of recording went to waste.
I came across Webflow in 2014, roughly a year after they’d launched to the world and even though it wasn’t as robust as it is today, it sure showed a lot of promise. I took it for a spin back then but couldn’t really make heads or tails of it. However, I’d keep an eye on them, watching them grow and evolve to the beaut of a tool they are today.
Fast forward to a few weeks ago, I had no coding skills, no patience for Wordpress and its myriad of site builders and Samson Aligba had just dipped me into the #NoCode movement. I sat idly at my work space at home, pushing pixels for the 9–5 when it suddenly hits me:
I could do this!
I could do this with Webflow!!
Why didn’t I think of this since?
I’d watched a ton of Youtube videos in passing just to familiarize myself with modern tools and trends but this time, I hit the tube with purpose and fire.
Side note: Webflow’s University tutorials are sooo beautifully crafted that you’ll become a pro user by the time you’re done. Their style of breaking down actions into steps and mixing it with some light-hearted humour laced with an occasional subtle snarky undertone just immerses you completely. It also excels at presenting WebFlow as a tool of wonder, of possibilities, drawing in its users, making them curious and inviting them to tinker…
After a few days…okay, may this stretched into weeks….but I slowly gained the confidence to get started again.
The scariest part of a rollercoaster ride is the waiting…
I loaded up one of the tutorials I found on youtube on my iPad and opened Webflow on my laptop. After 10 minutes, I’d ditched the video and had started exploring on my own. I learned that Flex boxes let you position anything, and I mean ANYTHING, anywhere on your webpage. I learned to view the content on webpages as a series of blocks, which is quite useful when thinking of positioning your divs. I learned that to get really crisp looking visuals, swap PNGs with SVGs. It was mostly fun and challenging stuff. I struggled in a lot of places, for example, when some divs wouldn’t sit where you want them to sit, no matter how hard you tried. Or while animating an interaction, you’ve got to get the timing and the motion type right or you’d end up with jerky transitions.
My biggest nightmare: the map at the hero section of the page. I’d initially animated it in after effects and exported to Lottie so I could embed the resultant json file on webflow. Unfortunately, Lottie is very limited to the effects and plugins it can process so it came out as a hot mess. Several tries later, i grudgingly resigned to using a video instead. But webflow doesn’t allow you upload videos directly, the best you can get is background video and that has limited applications. When i went with that, webflow transcoded the file, probably compressed it and it came out blurry with a slightly lighter background. I hit google searching for a solution and i came across webm and transparent videos. I could create a transparent video from AE and upload it as a background video, eliminating the weird background….only to discover that Webflow doesn’t support transparent videos directly. There’s a walk-around for it, but it meant that i’d have to pay for Webflow.
All in all, I absolutely enjoyed myself. The creating process, the frustrations of fixing bugs and creating new ones….these were vital to my learning webflow and I’m quite grateful to have done this.
Dated website aside, WGH is doing a good job providing affordable services and empowering people to come online, to be visible and present on the web. I think that as a local webhosting company in 2020 to be able to withstand the likes of AWS, Godaddy, Rackspace & Squarespace who are gulping a huge chunk of the market share should mean that they’re doing something right and that, in my books, is worthy of admiration and study.
Finally, my thanks goes to Mudia Imasuen who took his time to review the webpage, Oke for helping out with fixing some bugs and every single one of you with whom I’m honoured to be friends with.
An alternate opening to this medium post was supposed to be “I know webflow, Philemon Praise O., and I shall shalaye!”
You can view the WGH redesigned live webpage: Click Here
The WGH redesigned figma board: Click Here
