Building a Product website — the origin story
Recently, we launched the website for VMware Event Broker Appliance (VEBA) and I wanted to share my experience putting together the website for our Product which was designed with utmost attention to detail, our users in mind and with a lot of hard work. When i started with VEBA, we had a great product and the team was hard at work making major improvements. However, we didn’t have a website for our customers to go read and learn more about our product. While we had all the content for the product along with the source code on our github repository, it wasn’t easy to consume for our users.
Upon identifying this gap and as only team member that was working full time with VEBA (yes, the team works on their free time to bring #VEBA to its Customers), I took on this challenge and decided to get this done while the team kept churning out marvelous features for #VEBA. With the website, the goal was to bring a fast, user-friendly and easy to navigate website that had all the information needed to enable our Users as well as guide them through the product in an optimal way!
Tools and Skills required
After initially looking at the building out a very simple MVP wiki page within GitHub, we ended up deciding on using GitHub Pages for our website landing page, documentation and other resources.
Github pages if you didn’t know allows you to host a website for yourself, your organization, or your project directly from a GitHub repository
- A passionate team 😉
- Working with Github (obviously)
- HTML, CSS (Bootstrap) and Javascript (Jquery)
- Jekyll
- General UX sense and (optional knowledge of) Gimp
Check my website built entirely using HTML, Dog photos and CSS — https://about.pdotk.com/ (..updates coming)
Getting Started
For our product website, i took a lot of inspiration from other VMware Open Source projects listed here with special mentions to Velero, Antrea, Contour for their clean templates.
Within a few days, we had a skeleton of a website ready but it was long from being called done! Here is what the website looked like midway through it’s evolution..
Landing Page and Otto
In April, we had Otto the Orca join Team #VEBA thanks to Robert Guske, so there were more fun additions to our website :)
While Otto_Original.png was cool, he wasn’t ready for our website. Thanks to Frankie Gold’s recommendation, i started exploring Gimp.
I spent a lot of time (a loooot of time) on Gimp making only a thousand renditions of Otto to finally max out on Gimp capabilities i could learn and ended up with our final version of Otto in three formats —
- a favicon for our Browser title (can’t not have a favicon)
- a logo image for our header and finally
- a hero image for our landing page
Alright! I now had a new skill in my belt that i’m going to use more than my high school mathematics.
What about the rest of the site?
We now had a decent landing page but quite a long way to go…
Resources
GOAL: A single go-to location to find all the external resources and references that mentioned VEBA.
I started working on our Resources page first and “digital transformed” it from having just links to have embedded videos, a twitter timeline and a featured external links section to complete the look.
Documentation
GOAL: Documentation makes or breaks a product. I wanted our documentation to be concise, navigable. It should guide the user and ease their learning curve.
We needed a documentation navigation which should ideally not scroll with the content and the content organized into consumable sections. While this took a lot of grunt work, i was able to build out a structure and ⬅ thanks to our Patrick Kremer who helped out a “little”, our documentation was getting to be more easy to consume and structured to follow! In order to guide our users through the documentation, I included a way for us to programatically add the most useful sections that our users would want to head to next from the current section.
A first hand example of Patrick’s user friendly documentation is displayed in his blog on how he got started with #VEBA.
Community
GOAL: The goal here was threefolds — show off our community and contributors, be the go-to guide for those looking to contribute and reaffirm that the team is open, available to help by providing a way to get in touch!
We added a top contributors section to showcase our contributors’ efforts to our growing list of functions and to our repository!
Functions
GOAL: This page would serve as a marketplace of sorts to enable our Customers to get started quickly. Our initial page that listed all the functions were focussed more on the language over the usecase that it solved and it didn’t provide crucial details to our users.
The Functions page was modified to provide more details about what the function does, the languages that it’s been implemented on and also the use cases that it solved!
FINAL CUT & extreme makeover for the homepage
Last bit of changes to the landing page came together after a few Strategy sessions with William Lam and Michael Gasch!
While the additional UI elements that you’ll see in the published website were not necessary, i couldn’t sleep at night without some UI extravaganza. I took a lot of inspiration from these references below and reimplemented them to fit our website.
Presenting — vmweventbroker.io
I’m not a web designer (used to be a web developer) by any means but I believe this is my best web design work and that we have delivered a detail oriented website that will be a great foundation to #VEBA by benefitting our users while looking aesthetically nice with cool fun features.
Please provide your feedback on twitter (@pkblah) or in the comments below on what you like and where we can improve!
Please checkout our website and look for those not-so-subtle easter eggs on our website. It took several days and nights (see what i did there) worth of work to get this website launched
.Happy Eventing!
