The why goes always first, and I told you why I built my website in my previous post. Here, I am going to tell you how I built it. Embark with me in this journey where I am going to take you through the different decisions and stages from ideation to launch. And what comes after.
Website builder vs hand code
Before jumping into building the website, I needed to decide whether to use a website builder or coding it myself. A website builder is a tool that allows building websites without coding. This topic alone would make for a whole article in and of itself. In fact, I read some before making my decision (e.g.: "9 Reasons hand-coding always beats site builders"). To summarize, I chose coding it myself because I wanted to use this as an opportunity to boost my web development skills. Other benefits included originality, performance, web placement (SEO), security, and cost. Don't get me wrong, website builders are very powerful and popular (e.g.: 34% of the websites are built with the most popular website builder, WordPress). As a matter of fact, I plan to use them to build something in the future. Not at this time.
Boosting my web development skills
To boost my web development skills, I enrolled in "The Web Developer Bootcamp" course offered by Udemy. I had researched other courses, a few from LinkedIn Learning. I wasn't very convinced about the quick, one-hour courses on LinkedIn Learning. What I liked about the Bootcamp is that it covers from basic frontend concepts to backend advanced concepts. It is a full-stack development course from start to finish that covers NodeJS. And it uses code along activities to explain these concepts. I love the way the instructor, Colt Steele, mixes theory and practice and builds on previous concepts incrementally. He makes the course feel very fluent and organic. In this course, you build many different small apps through which Colt introduces you to different concepts. At the same time, you keep incrementally building one single app throughout the course. That helps you to understand how different pieces fit into the puzzle. And you get to build one cool app. Check it out: YelpCamp. In general, I think these long courses are a little bit like Netflix shows: once you get comfortable with the characters, they are almost family.
Projecting my passion for user experience and design
This was exciting. Since I was coding it myself, I could design the website however I wanted. It can be daunting to have a white sheet in front of you, where to start? right? All you need is inspiration. I did what I always do, research online (a lot) for ideas.
I found a few interesting websites including "Best Personal Websites I’ve Ever Seen," "23 of the Best Personal Websites to Inspire Your Own," and a couple from Colorlib: "Free Portfolio Website Templates" and "Best Resume Templates". Pascal, Sean, and Gary also have really cool personal websites.When it comes to design, everything has to be consistent, synchronized, to tell a story. Websites are not an exception. Tone, message, colors, font, photos... all have to work towards the same goal so the website feels good, fluent. With that in mind, I took my whiteboard and my marker to draft my website.
From my research, I found a few design concepts that I really liked. These included parallax scrolling with an image cover at the top, scrollspy, cards, carousel, and vertical navigation. User Interface design patterns (or concepts) are as helpful as creativity is when it comes to a great design. These concepts certainly helped me to draft my website.
Once the sheet wasn't white anymore, I was ready to start iterating towards my MVP
Building incrementally
At this point, I had a fairly good idea of what I wanted to build. Now, what tools was I going to use to build it? Which tech stack?
HTML, Javascript, and CSS are almost always part of the stack in big, fancy web apps. Part of the frontend that is being sent back. Additionally, I used Bootstrap and JQuery. The former is a frontend framework for developing responsive, beautiful websites. The latter is a Javascript library to ease access to different elements of the web page.
In the backend, there is a lot more variance, so I had to make choices. There are different languages that you can write server-side code in. These include PHP, Ruby, Python, Scala, Java, and Javascript. Similarly, there are many database choices including PostgreSQL, SQLite, MySQL, MongoDB. I chose the MEN stack, which is a MEAN stack minus Angular. M is for MongoDB, E is for ExpressJS, and N is for NodeJS, the server-side code language. One reason for that was that NodeJS has been the fastest growing and most exciting technology out there for a while. In other words, it's super popular. But, more importantly, it's got great and many libraries (largest package ecosystem in the world), it's in Javascript (which I already knew), and it's high-performing. ExpressJS is the most widely used NodeJS framework, so there is tons of documentation, and it is lightweight, so it doesn't hide stuff from you (it's straightforward). I explained why I chose MongoDB in an earlier post. Basically, it is very flexible and dynamic, and also extremely popular.
My MVP was quite simple:
- Cover photo
- Introduce myself
- Show my experience: my roles and achievements
- Show my higher education
- Show examples of how I do product management
- Provide contact details
- Measure: track progress towards goals (e.g.: increase number of active users)
- Meet the following quality requirements: responsive, performing, maintainable, and beautiful
I turned the MVP requirements into user stories with Trello. I chose Trello before other tracking tools (e.g.: Jira) because it was familiar (I used it before), simple, and free.
In the first iteration, I built and deploy the cover photo and the parallax pattern. From this very first iteration, I ensured the quality requirements were met. So the website was responsive (most visitors use mobile), performing (images can slow down load time), maintainable, and beautiful. I created a group of stakeholders - friends who work in software development and I trust - to which I presented results and gathered feedback from at the end of each iteration. Based on the feedback, I updated user stories and selected a few for the following iteration. In my second iteration, I built both experience and education sections and the vertical navigation bar. The about section and contact details came in the third iteration. With contact details provided as a section and also in the top bar, so they can always be accessed (if the website is displayed in larger screens). I finished the MVP stories when I built the carousel showcasing examples of my work as a Product Manager. The website was ready to go public!
Mesure before learning
Some of the MVP stories were about measuring visitors' behavior. You cannot learn and adapt unless you measure. Although I was doing some qualitative measurement through my community of stakeholders, I needed quantitative and more objective measurement. I integrated Google Analytics and configured Google Search Console to measure traffic. Heroku only provides traffic data in its paid offering. To measure how visitors navigate the website, I integrated Hotjar and Inspectlet. Both offer limited free functionality. So I get more by using both . You need to balance using this kind of tools since every integration hits the load time a little. Precious feedback outweighs by far slower load time in this case.
Launching
You've developed a website and you have it on your computer, what do you do then?
To begin with, you have to decide where to host. On the one hand, there are shared hosting services such as HostGator and GoDaddy. These services are simple to set up and easy to manage. On the other hand, you can host your website in the cloud (e.g.: majors include Google Cloud, AWS, and Azure, but there are also others like Heroku). Cloud services are more scalable and performing, but they are more difficult to set up. I decided to use Heroku because a few reasons: it is free, I used it in Bootcamp projects, and it was a good step before using one of the Cloud majors.
To host the database, I used MongoDB Atlas, which was pretty straight forward. I also used it in the Bootcamp projects.
Moreover, I could have used the domain that comes with the hosting site (i.e., http://jesusbouzada.herokuapp.com/), but I decided to buy my own domain instead. It looks much more professional and it is far easier to remember. It helps to build your brand.
You have hosting for the code and the database, what then? You have to push the website from your computer to the cloud. I used Git and GitHub as a local and remote version control systems. With them, I manage and publish changes.
jesusbouzada.com was born
Tadaaaa! My website was public on August 28, 2019. By no means that was the end of it. With software, the product is never done, it is always being improved (until it is retired). I have planned improvements such as detail pages for experience and education and infinity scroll and filtering for my blog. I have set milestones to deliver different improvements in the next months. These improvements are captured and prioritized as stories in the backlog.
I hope you are enjoying reading my posts. I would really benefit from any feedback or advice you could give me. For that, please, leave comments and reactions here, share my posts on your social networks, or send me a message.
Thanks, and see you again in my next post (coming soon!).
A little teaser
Don't miss my next post! I am going to tell you how I stay updated with product management, technology, and other topics relevant to product managers.
I'll be waiting for you!