How we built wuruwuru.com v2
The first version of the wuruwuru website was a one-pager with a checkered background. Most of the links opened external sites, and the most exciting thing about it was a moving cursor.
We knew the website didn’t tell a good enough story of what we set out to achieve, and it was only a matter of time before we had to change it.
Design
We had two major goals for the new website: share more about our projects, and showcase the creators we work with.
Our first exploration was a highly visual site similar to Instagram stories, displaying images and short intros for all our projects.
While this was an interesting approach, a project like Feel Good without a defined brand style felt out of place. This style also prevented us from emphasising credits, and it wasn’t very clear how to browse through.
After this iteration, we went back to first principles and started afresh. Ope defined a new architecture for the website and designed the web version. I paired with him and designed for mobile.
What we came up with was a more orthodox but very clear design. The new site would have three main pages: a Projects page to showcase the various experiments, a Creators page to highlight the people we work with, and an About page to explain what the project is all about. The other pages, like Journal and Costs, would be deprioritised to the footer.
We also wanted to connect information across the pages e.g. show what projects a creator worked on and vice versa, so we decided to implement a CMS (Content Management System).
We reached out to ‘Tomi ™ to help, and he signed up Nifemi.
Code
Tomi and Nifemi used Astro to build the site.
Astro is a static site builder that delivers lightning-fast performance with a modern developer experience. To understand why we chose Astro, I’ll briefly explain what frameworks are and how they simplify the development process.
Simply put, a framework is a tool that provides structure/foundation for developing software. They usually have ready-made components and are preferred to writing custom code because they speed up the development process and reduce the risk of errors. A framework is a tool created to develop software, while a programming language (e.g CSS, Javascript, Python) is used to give instructions to the framework.
Code in Astro is written in HTML, CSS and Javascript (vanilla code style). It is described as lightweight because it converts code written in it to plain HTML before delivering it to the browser. Asides from the lightening fast delivery time, the ease of writing code in Astro is comparable to Vue, a popular framework.
We chose Astro over popular frameworks because of its lightning-fast delivery time. React and Vue add more code to your file after compilation, and this means pages load just a little longer.
We used GitHub for Version Control, and hosted the website on Netlify. With Netlify, auto-deployment is really easy, which means any changes to the Github repo get pushed to the website automatically.
Content
While Tomi and Nifemi built out the website, Ope and I put together content.
With the Astro setup, dynamic content on the site is served through JSON files in the codebase. We set up local development servers, and made pull requests to update the website.
I sent out a form to collect information for the Creators page, but also scraped the internet and pieced together any information I could find. I put all of this into an Airtable database, and then reached out to people individually to review their profiles and make any corrections.
We planned to have detailed individual pages for each project, but because we didn’t have enough content, we postponed that for a future version.
Ope wrote the copy for the site, added some animation, and compressed the images (using Squash) for speedy load times.
Analytics
The previous website didn’t have any analytics software installed, so we had no idea how many people visited the site per time. We decided to change that in this new version.
After some research, we settled on Plausible for analytics. Plausible is a no-frills, open-source analytics tool that beats Google Analytics on performance, ease of use and privacy. See how they compare here.
With Plausible, you can either host the software on your own, or pay them to host. Their pricing model is based on traffic, and given that we don’t have too many visitors yet, we chose to start with the hosted version.
Subscription
Towards the end of the project, we also decided to add a Subscribe form.
Right now, the website is simply a “billboard” to share information with the public, but in the future, we want it to be an “engine” to convert visitors to subscribers, and eventually patrons.
We set up the Subscribe form using MailChimp and chucked it in the footer of the site. As of today, we have 7 subscribers.
I learnt a lot on this project.
First, I got better at version control. Before this, I found it hard to navigate GitHub, but now I know how to perform various Git functions in a terminal. I also understand how version control works and why it’s important in software development.
Secondly, I learnt the importance of speed and performance in a website. We were very intentional about the choice of framework, and compressing the images made such a big difference to page load times.
I also learnt to keep iterating until you get your desired result. Tomi and Ope were already used to this since they’ve worked together for a while, and although I’m not new to Ope’s obsession, it was my first time experiencing it on a website project.
I enjoyed every bit of it.
