Building the UX Society Landing Page
Notes for a web developer
Last week, I was able to finish the website to promote my organization, User Experience Society, for the upcoming LIONS Recruitment Week in Ateneo. This was the first time where two UX Society chapters were working in a collaborative and remote environment. Working remotely is tough work, especially if your colleagues are in a timezone that’s 15 hours away from you. Here are some notes about my work process, from start to finish:
Communication is key
You need to have a streamlined channel for communication between both parties. Frances and I are familiar with working with each other, so it was quite easy to communicate with her on what needed to be accomplished for the website. But, even though communication is smooth, I feel that across teams, communication can be a bit disjointed if two teams don’t use the same tools.
Most of UX Society’s internal communications in the Philippines go through Facebook Messenger, while my chapter’s internal communications in the USA go through Slack (since most of the people I work with don’t regularly use Facebook). I believe that standards need to be established for working across teams, which is why I really think UX Society should have one place where members, chapter directors, advisors, and alumni can talk to each other.
Hopefully, something like UX Society Chat can be adopted for cross-chapter projects, but this would require a big jump to something people aren’t accustomed to using.
Modern technologies speed up development time
I was really pressed for time. I was given the design mockups on Sunday, didn’t start until Wednesday because of a miscommunicated timeline, had a transpacific flight on Thursday, and submitted the website in the early hours of Saturday (I finished at 5:29 AM).
So, coding from scratch wasn’t really an option. Alexis jokingly said this on Facebook while I was livestreaming my development setup:
I highly recommend using CSS frameworks like Bulma and Bootstrap if your goal is to build fast. Although these frameworks may not be as customizable, you don’t need to reinvent the wheel by building everything from scratch.
There is some benefit however to building from scratch. If UX Society made a design system that designers and developers can easily follow, then the benefits to the organization would be massive — from faster prototyping, faster development, and faster product delivery.
Combine this future design system with technologies like webpack and a static site generator like Hugo or Gatsby, then you’d have an organized library of components that designers and developers can both use. Perhaps, this design system could be an internal project that UX Society can work on to enforce knowledge longevity for future members and directors.
Netlify is your friend, so use it!
What I really love about Netlify is that you can attach a GitHub repository to it, and it will build and deploy your site on their CDN. If you use webpack, you can tell Netlify to run a custom build script to do things like:
- Linting CSS and JS
- Minifying CSS and JS
- Transpiling SCSS into CSS
and a lot more. What’s also cool is that Netlify provisions LetsEncrypt SSL certificates for your domain for you automatically, you just need to configure the DNS settings for your provider to point to their nameservers.
Another completely amazing tool is their subdomain preview feature. If you follow proper git flow, Netlify offers automatic builds for each pull request you submit, and it will provide you a URL where you can preview the new changes before you merge into master. This has been really helpful when I would show Frances my new changes. For example, she saw that the preview images were pixelated, and I told her that I rescaled them so that the load time of the website would be quicker. So I gave her two alternatives:
- Use the source images, rescale them, but don’t optimize them for size
- Use the source images, rescale them, and optimize them for size
I then gave these two separate preview links generated by Netlify for her to test, then she chose the link with the optimized images. So, after getting her approval, I would merge that pull request into master.
With that being said, this leads to the next highlight:
Follow proper git flow
Chynna, who heads UX Society’s Ateneo de Davao Chapter, shared this article titled: Follow these simple rules and you’ll become a Git and GitHub master.
The article highlights 3 steps you need to follow, with one extra step in the end that I’ve added:
Create a Git repository for every new project
You can either create a blank repository on GitHub and clone it, or initialize the repository and add the GitHub remote later:
git initCreate a new branch for every new feature
Make sure you’re on master, then checkout a new branch.
git checkout master
git checkout -b new-featureUse Pull Requests to merge code to master
Rebase Pull Requests with master to test them prior to merging
You’ll need to learn how to use vim for this:
git checkout new-feature
git rebase -i masterWebsite deployment strategies
Usually, people would just buy web hosting for each new site they develop. This could get really expensive over time. Here are some strategies, inspired by my time at Bloom, that I use to deploy my websites:
Staging Deploys on Netlify
Your staging and production environments could be hosted all on Netlify. But, I’ve noticed that Netlify has some trouble automatically provisioning SSL for subdomains. So if UX Society followed a standard where staging deploys are on Netlify, while production deploys are on our Kubernetes cluster, then the deployment process can be abstracted away, so that junior developers don’t need to worry about learning the ins and outs of getting up and running on a web hosting provider.
Production Deploys on Kubernetes
I have been looking for a use case for Kubernetes in my work, and I believe that UX Society can use something like Kubernetes to reduce hosting costs while still being able to expand horizontally. Each chapter could have their own namespace on the cluster, where each chapter can add nodes to the cluster as they need them.
Traefik is also a nice reverse proxy and load balancer that can automatically provision SSL certificates from LetsEncrypt for free. If you configure each domain or subdomain to point to the traefik node, you can automatically get SSL certificates for each of the containers you’re running on the cluster that have an exposed http port.
DigitalOcean can save you money
All our static websites, whether they are internal projects or external client projects, can be hosted on one, $5/mo DigitalOcean droplet running Kubernetes. That’s about 270 PHP a month, for as many websites as you need! The only thing that’s left to do is write documentation for these deployment strategies and have people adopt the new standards.
If you’re interested in trying out DigitalOcean, sign up using my referral link and get $10 in credit!
The Final Website
The final website turned out to be quite a success and we were able to blast it on social media. One thing that I want to add in the future is Fathom Analytics, so we can see information about the number of visitors, page views, average time on site, and bounce rate, among the statistics it tracks.
I also want to try my hand at CSS grid, and see how we can use CSS to make layouts more responsive, without adding additional classes to the HTML.
Overall, it was great working with the talented designers over at the UX Society at Ateneo de Manila University. I believe that their team is the strongest design team we’ve had since the founding of our organization. To sum this article up, here are some points we could address as an organization:
- Should we take the leap towards a standard method of communication across teams and chapters?
- Should we build a design system to help the designers and developers at UX Society when they build internal projects?
- How can we as an organization communicate departmental standards so that UX Society chapters can benefit from what other chapters already do?
Visit the site at: http://admu.uxsociety.org
