Branding my online presence, Part 1: The idea

  Follow @r3bl@r3bl.social
r3bl.me Branding my online presence, Part 1: The idea

I want to create. I want to innovate. I also want to have my voice heard. What I’m thinking of is ditching the idea of boring old personal websites altogether. What I’m thinking of is creating some sort of an Internet brand. I want to take all the good things from professionally used websites (think: companies and organizations) and apply it to my own website. Here’s the idea behind it.

What I want to do

Human brain is complicated. When I imagined all the things I wanted to do in my life and things I wanted to be heard about, I came out with the following:

Capture.PNG

This is a mind dumb of my goals that doesn’t mean a lot if you don’t know the context, so let me try explaining it:

  • infosec -> I want to learn and teach about information security. I want to work in that field as much as I can.
  • blogging -> I want to share with the world the things I am fascinated about.
  • music -> I want to continue being a “bedroom DJ”, occasionally releasing mixes and short live performances.
  • programming -> I want to create simple add-ons, desktop and web apps and open source them.
  • open source -> I want to build, use, and promote open source software.
  • recommendation -> I want to be in a position to be able to recommend something and have people that will acknowledge my recommendations.
  • decentralization -> I want to keep my data away as much as I can from parties I don’t trust.
  • design -> I want all of the above to be impeccably well designed.

With specific goals in mind, what I also have is the opportunity to gamify my life. Each morning, I could wake up and decide what I wanted to work on that day. I could measure my reach in all of those goals. I could A/B test certain features, and improve on the things based on the data I receive and collect. And, ideally, for all the things above, I would receive some sort of a secondary income.

When I tried to sketch out my biggest sells, I came up with something like this:

  1. Everything’s in the open. My products will be open sourced. My website will be open sourced. My writings will be CC-licensed.
  2. Everything’s private and decentralized. There will be no ads, the source code(s) will be available on my own server, my products will be hosted from my own infrastructure, and third parties will keep out as much as possible.
  3. I’m giving back. A portion of my income always goes to donations to cool organizations and open source projects.
  4. I’m efficient and transparent. I get things done on a regular basis. You can see who I am donating to and how I spend my money.

After mind-dumping all of this on a white canvas, I’ve started to realize that having a traditional website just isn’t gonna cut it. Traditional personal websites can’t get people interested in all the things I want to do and constantly showing interest in.

What I needed was a brand. I needed to brand my online identity in such a way that my products, writings, and other brain dumps are valuable. My online presence should scream that you should pay attention to me. My content needs to be engaging. My products need to be used. My voice needs to be heard.

My personal brand is going to reside on r3bl.me. It will become a central place of everything I do. Everywhere else on the Internet, the content will just simply get people interested in what I do. That is my goal for my web presence in 2018.

What do I want my products to be

In order to answer my question of what my products should be, I went a step further in the brainstorming session. I’ve tried to expand upon eight goals shared above, and tried to think about all the different things I could offer already, alongside things I wanted to work on. I came up with something like this:

Capture.PNG

How I want to be perceived

In order to develop further on the idea of how I wanted to be perceived on the Internet, I’ve decided to think about my homepage and things it should represent.

It needs to be simple. It needs to interest people enough to click on something. It should provide enough content to those who don’t want to click on something. I should advertise the coolest and latest things I do on there.

So my idea looks like this. If you open r3bl.me, you’ll see something like this as the first screen:

Capture.PNG

Pretty straightforward, no unnecessary info, just a couple of links, an image, and a tagline.

Then I’ve started thinking about what comes after it. The first iteration of the second screen I’ve imagined looks like this:

Capture.PNG

In this version of the second screen, we have the following content:

  1. Accomplishments. These are badges representing some of the cool things I have recently accomplished. Examples might include something like this:
    • GitHub Repository reached 1k stars.
    • Website reached 25k visitors in a month.
    • Reached 1k Twitter followers.
    • Finished a Coursera course / specialization.
  2. Latest things is simply a short list of the latest articles / projects / changes I’ve made.
  3. Coolest things is a list of the coolest things that I have ever did / been mentioned in.
  4. Donations is there to try to convince you to be taken to the donate page, or to a page explaining where my money goes to.
  5. Portfolio is the recruiter-friendly look at my work.

In fact, I so liked the idea of having the “accomplishments” section so much that I’ve decided to implement it almost immediately. So I’ve made this a couple of days later:

Capture.PNG

It took me an almost absurd amount of work (finding a vector editor that’s simple to use proved harder than it should be), but I got the screen to look like what I wanted it to look like. After doing so, I’ve started thinking about how to incorporate color in the second screen and showcase high contrast between the things you can interact with and things that are the actual content.

So I came up with something like this:

Capture.PNG

In this screen, the achievements strip is there to let you know that I did something cool in the past and that you should pay attention to it. That’s why it’s almost in a complete color contrast to the things above it, with dark background and white text.

After that, as some sort of an easy-to-spot arrangement, sections with a black background are there to get your intention, and section with a white background are there to keep you engaged. That’s why the black sections are the ones that try to get you off of my website with outside links to the things I have achieved, while the ones with the white background are there to get you to click on them so that you could consume more content.

Receiving money

Since my final goal is to achieve some sort of stable secondary income for my projects, I’ve tried to think about the donations page and what should I show on that page.

I came up with this as the first screen:

Capture.PNG

Here, the “top things” and “latest things” from the homepage switch places. I want people to know of the coolest things I’ve done first, and then showcase the latest things I’ve done. That way, I am attracting donations with my highest pitch.

I should support three types of donations:

  1. Patreon (monthly donations)
  2. PayPal (one-off donations)
  3. Cryptocurrencies (BTC, BCH, ETH etc.)

Finally, I should showcase how I spend my money, to make people know that their money gets into cool things. In that section I would showcase some cool percentages, like how much money goes back to the community, how much I spend on education materials etc.

Spending money

I should also be rather transparent about how I actually spend my money. That belongs on a page of its down, so I’ve decided to sketch it out as well. The first screen talks exclusively about how I spend my money, possibly via a pie chart:

Capture.PNG

While the numbers above were completely made up at this point (but, as it turns out, not far from the truth), the next screen should look something like this:

Capture.PNG

On it, you see a little pitch about why you should donate to me. It shouldn’t be too big, because that might indicate a sign of desperation. Since there’s no need to push for the donations, it only gets a quarter of the screen size.

A quarter of the screen goes to showing my donations, as a proof that I give back to the community, together with a link to the page similar to this one. The bottom half of the screen is there to show you what specifically I’m working on, and is there to further engage you into consuming my content.

How to showcase the products

Creating a product page is not that difficult. I just need a short description of what the product is about, some screenshots, some features, and a link to the project.

However, product page like this just won’t cut it because my goal is not just to showcase the product, but to engage people into consuming other types of content as well. A quick sketch later, I came up with something like this:

Capture.PNG

As you can see, the first page (I’ve poorly scaled the sketch) show you some basic info about the product. You have an icon of the project, project description, and a link or two to get the product.

On the right side, you have the primary goal of the page, which is there to tell you that if you think that the project is great, you should donate to me.

The reasoning behind this is that the products should attract its own audiences (either via AMO, Userstyles.org, GitHub or something else), so there’s no need to showcase the project features right at the start. People who will end up on these pages are probably the ones that are going to be referred to from another page in my web, so the product features goes below it:

Capture.PNG

The upper half of the screen is dedicated to the list of features and explains the selected feature.

The bottom half of the screen is there to engage you into more content in case the content you’re currently looking at doesn’t seem interesting to you.

Rules that I will follow

There are some rules I want to follow all over the website and related products:

  1. Guide the user through the sitemap. Showcase the right thing in the right place, make the user never click on the back button, guide him forward.
  2. Lots of A/B testing. Even the slightest detail on the website could be A/B tested and the visitors that see the change first might be the ones that decide what sticks.
  3. Decentralization. I’m going to try to load as less third-party resources as possible (without re-hosting someone’s copyrighted material, that is).
  4. Impeccable design. Everything will be well-designed, the page sizes will be small, the data will be structured and follow the indie web philosophy.
  5. Easy to reach donations. The donations page should be easy to reach when you need to, but it also needs to be put in back. Content should be focused, and the donations should be there only when you’ve consumed the product for long enough to care.
  6. Dymanic content. Even though this is a static site, made with a static site generator (Jekyll), the content on it needs to be fresh and updated regularly. There should be scripts that automatically update the content to GitHub and serve the website, depending on the actions I do in real life.
  7. Publish on your own site, syndicate everywhere (POSSE). Since the idea is to throw people towards something I completely control and produce an impeccable experience, the content should primarily become updated on the website itself, and later on syndicated to other services. I should also be able to tweak the syndication, from changing the message depending on the content that is being syndicated, to choosing the syndicated service that works the best for the content being served.

Opening first chapters

After I’ve brainstormed all there is to brainstorm before my path became clear, all I needed to do is to figure out what to focus on first:

  1. I need to come up with the design that’s going to remain constant all over the things I’m working on.
  2. I need to set up some sort of A/B testing framework.
  3. I need to hire a graphic designer to do the logo design for the “brand”.

So, while the part two might not come until the middle or the end of the first quarter of 2018, it will arrive. In it, some of the projects will already be made, HN submission or two will be made, and hopefully, I’ll have something to be really proud of and some sort of a secondary income by the end of 2018.

Random project that I like

Why am I seeing this?

Read More