Ranting

Posted Dec 23, 2023 Updated May 15, 2024

By Rudzainy Rahman 9 min read

MAJOR UPDATE: Ranting is now called Gugel! 🥳

Background

In early 2023, I was researching ideas to build an online platform providing services (commonly called Software as a Service or SaaS for short) to people living in Malaysia. This is a how that story is going so far.

Why SaaS makes sense for Malaysia

Malaysians are (in general) very adaptive when it comes to digital technology adoption. This is true especially for global internet trends such as a new social media platform. This is mainly thanks to Malaysia’s internet infrastructure.

Timeline of mobile cellular service adoption in Malaysia, with 3G expansion giving access to the internet through people’s fingertips – A Glance at Malaysia’s Digital Connectivity Journey, MCMC.

Malaysia ranks 37th out of 121 countries in the Digital Quality of Life Index and 13th in internet quality with stable mobile internet connections, improved transmission speeds, and fixed internet stability.

“The number of internet users in Malaysia was forecast to continuously increase between 2024 and 2029 by in total 1.7 million users (+5 percent). After the fifteenth consecutive increasing year, the number of users is estimated to reach 35.65 million users and therefore a new peak in 2029.” – Statista

Forecast number of internet users in Malaysia from 2014-2029.

This, combined with a steady increase in population, creates a consistant supply of digital natives who rely on smartphones for thier daily activities.

Population growth rate in Malaysia from 1971 - 2023 reveals a slight downtrend for four decades before a sudden spike in the early 2010s, and back down again.

Total population of Malaysia still increases year-to-year, with the recent negative growth rate (from the chart above) only slightly impacted the total population growth.

in June 2021, the Government of Malaysia approved the recognition of communications as a public utility, after water and electricity. This resulted in an increase in internet penetration in some of the most remote parts in the country, thanks to local telecommunications companies providing satellite internet services. And in November 2023, Starlink (the global satellite-based high-speed internet service provider) extends it’s coverage to Malaysia.

Helping Malaysians get by their day-to-day lives efficiently by means of a set of digital communication tools can be a catalyst for compounded good!

So we acknowledge that communicatin is important, the question now is how do we communicate effectively and eficiently.

Solving the problem of communication

I imagine a framework on how Malaysians can communicate better.

Rough idea of a digital communication framework that has the potential to check a bunch of boxes.

Seems like a problem too big for one man lulz. I decided to start with Biodata. Biodata has the advantages of being easy to build from scratch as well as cheap to run, compared to other components of the framework.

The domain biodata.my was not available unfortunately. I considered a bunch of Malay, Mandarin and Tamil words that satisfies these criterias:

Two (or at most three) syllables.
Is relatively easy to pronounce.
The meaning of the word has to

Some notable mentions include akar and vayil. I decided on the name Ranting in the end, which means a branch in Malay.

Sometime during the MVP stage, Jeannette the Strategy-Woman™ thought the name could also mean rant-ing. This was around the time mas Elon acquired Twitter, and opened up a whole other rabbit hole into extending use cases of Ranting for us to consider!

What is Ranting?

Ranting is a link-in-bio platform that allows any Malaysian creators to showcase their work and social media profiles in a single, easy-to-share link.

It is a platform that allows creators to add links to their website, blog, social media profiles, email address, and other online assets. It can be customized with a variety of colors, fonts, and images. Ranting is free to use for 30 days, and there are paid plans available for creators who need more features. Here are some of the features that make Ranting a good option for Malaysian creators:

Personal dashboard for anything you need.
It supports the use of Malaysian e-Wallets.
It is designed with Malaysian creators in mind, so it is easy to use and navigate.
It is a reliable and secure platform.

Systems Design

I imagined Ranting to be a straight forward Linktree clone. Comodatising links will be the core consideration when considering any features to build.

When exploring what can people use links for, I received multiple feedbacks to connect the links with real-world usage. Over time, I decided to base Ranting on Bitly’s model instead – a profile page, link shortener and QR code generator.

Current state of Ranting’s entity relationship diagram.

Considering future expansions, I introduced a Groups table as a mean to manage links.

Analytics also was a huge ask from the feedback gathered. Faris the Backend-Man™ helped to set up a feature to capture pageviews and clicks on our links.

Users can view total unique visitors and page views count.

Information Design

Every user has a personal links page a.k.a. profile page. A user’s profile page can display links to user’s existing social media pages, as well as anywhere else accessible through the Internet.

User
- user has many links
- user can create groups to manage links
- user can be private or public

Link
- link belongs to a user
- link belongs to a group

Group
- group has may links
- group can have many users
  - users create and share / collaborate groups
- group can be private or public

User Interface and User Experience

Conceptual

Ranting uses Bootstrap for almost all it’s UI needs. I stumbled upon Bento while doing my research and was inspired to build the same cool UI.

Samples of design components.

Initial concept for Ranting’s user Profile Page.

UI framework

I am most familiar with Bootstrap compared to other UI frameworks like TailwindCSS or Bulma. Time is the main reason for going the framework route v.s. writing all CSS from scratch. I knew that Ranting will need some sort of structure for styling (because I will definitely build a theming feature down the road). To save on development time, I reuse anything I could from Bootstrap’s library.

  
{
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@hotwired/stimulus": "^3.2.1",
    "@hotwired/turbo-rails": "^7.3.0",
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.14",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "esbuild": "^0.18.9",
    "nodemon": "^2.0.22",
    "postcss": "^8.4.24",
    "postcss-cli": "^10.1.0",
    "sass": "^1.63.6"
  }
}

Upon hitting the limitations of Bootstrap Icons, I expanded my icons library with Font Awesome!

Design of mobile login page in Figma using Bootstrap 5 design components.

Branding

I have a background doing digital graphic designs. That gave me the ability to imagine a lot of ideas for Ranting’s branding. However, and quite interestingly, when I approached what to work on for branding, also as a Frontend-Man™, I immediately went for the default style of Bootstrap. I took direct inspiration for the logo from Bootstrap’s logo. I also use Bootstrap’s colours as Ranting’s default colour scheme.

All of this to save time!

Ranting’s logo based on Bootstrap’s logo.

When I had to rebrand Ranting (more on this below), I initially considered a few options:

Collaborate with an owner of a local link shortener service.
Re-purpose my old project’s domain hoojah.my.
Use a domain I owned called vayl.my (roughly translate to doorway in Tamil).

I ended up purchasing an entirely new domain called gugel.my and got to work.

YOLO.

The rebranding process was quite straight forward.

I substituted the letter in Ranting’s logo from R to G, and change Ranting to Gugel.my in the full logo.
Took inspiration from Google’s colour scheme to make one prominant version of the full logo.
Find & replace all Ranting text with Gugel in the app 🏆.

Gugel’s logo based on Bootstrap’s logo.

Design variants of Gugel’s logo.

I decided to expose the top level domain .my in the full logo to increase probability of people remembering Gugel’s URL.

The actual logo on the site just uses Bootstrap’s font and colours. Optimisation FTW!

  
  <%= link_to root_path, class: "navbar-brand" do %>
    <strong>
      <span class="text-primary">G</span>
      <span class="text-danger">u</span>
      <span class="text-warning">g</span>
      <span class="text-success">e</span>
      <span class="text-primary">l</span>
      <span class="text-success">.</span>
      <span class="text-warning">m</span>
      <span class="text-danger">y</span>
    </strong>
  <% end %>

Snapshot of Gugel’s actual logo from the code above.

User journeys

User journey for Short Links feature.

Challenges

Re-Branding

Sometime in mid 2023, I queried the domain ranting.my on local domain registrars. It was RM120/year. I checked again sometime in early Q4 of 2023, still RM120/year. Again I checked around end of December. It was not publically available anymore.

While in the process of carefully considerating a new brand name, I had a thought, “If I want to look for anything on the internet, I will just Google it”. I looked up gugel.my and bought the domain on the spot.

And Ranting is now officially Gugel! 🥳

Project development

I anticipate most of my updates after posting this will be under here 🥶

The project went through a lot of discussions and considerations while in development.

Work in progress of user links page.

Building the drag and drop feature and fine tuning them to behave exactly how I want takes more effort than I anticipated. I was using DragDropTouch.js in which to make the experience as mobile-first as possible for a web app. Unfortunately the library introduced some weird behaviours on iOS devices. Therefore for version 1.0.0 and until 1.1.0, Ranting will focus to deliver simple and practical UI without the fancy drag adn drop functionality 😔.