The Thought Process Behind Our New Website.

Michael Chen
Dec 4, 2019 · 6 min read
Image for post
Image for post

We recently had the honor of launching our new website, allowing us to move away from smart city branding into a more clear cut brand identity that reflects what Fantom is.

With our previous website, newcomers to the project and the technology were focusing on smart cities exclusively, with no mention of Fantom being focused on consensus rather than being an Internet-of-Things platform, or another ‘Ethereum-killer’.

The website is the entry-point and gateway for developers, institutions, governments, and new community members to find out more about Fantom and its utility. That’s exactly what makes the relaunch of the website so important, as we don’t want institutions or governments to click on the website, and say ‘’I’m not building a smart city, this is not for me so I’m moving on to the next blockchain platform.’’

Instead of sticking to a high level analysis of how the website is built-up, we’ve decided to break down the website step-by-step to give our followers a better understanding of the philosophy behind it.

Image for post
Image for post
Landing Page

We think that the core of every blockchain based product is the consensus. So we made the landing page in a way that reflects the importance of that specific module, while also making it extremely easy to dive into the specifics by either scrolling down or pressing the ‘’What is Fantom?’’ tab at the middle-top. This should be the start for anyone who joins the community or is intrigued by what we are building, no matter their goal or origin.

You can also see that the ‘Team’ tab has been renamed to ‘Foundation’ in the new website, and it has been moved to the right corner of the website rather than being the focus. We decided to commit to the ‘developers’ and ‘articles’ tab, because who built the consensus is less important to the adoption of it than the developers who will be building with it in the future or what the actual product is.

Image for post
Image for post
Scroll down from landing page

As soon as you scroll down from the landing page we give more color on what Fantom is building. This is where we also mention consensus for the first time, we made that choice because the term is a bit too technical/intimidating for the landing page.

Underneath the title you also find a small paragraph which gives examples of the use cases, to make sure that those who aren’t as technical don’t tap out here. We think having balance between technical specifications and simplification is important, and that maximalism on either front can be very attractive to one group yet repulsive to another, which is not what we strive for.

Image for post
Image for post
Highlights of tech stack

As we move further down we see the key benefits of using Fantom consensus, just a high level overview without going into too much depth. Developers will have clicked the developer tab by now, so this is mostly for institutions and community members rather than technology fanatics.

Image for post
Image for post

So between the landing page and everything underneath most newcomers will get a rough understanding of what Fantom is, and whether it’s for them. For those who want to go in-depth we added the cards that link to the same pages as the tabs that we already listed at the top of the page.

We also added a scraper which pulls the latest Medium articles, the previous website had a manually updated news section which wasn’t updated frequently and required too much maintenance as it absorbed design resources and copy writing time.

What is Fantom?

Image for post
Image for post

We designed the “What is Fantom?” tab in the same spirit as Cosmos designed their “What is Cosmos” tab. Instead of creating an explainer that is specific to Fantom alone, we decided to opt for an intro that’s a bit more general to start off so that newcomers to the blockchain space can also understand the value proposition.

Getting the foundations of the knowledge right is fundamental to a further understanding of the product, instead of sticking to buzzwords without really explaining any of the workings like the old website.


Image for post
Image for post

There aren’t any huge changes on the ‘Developers’ tab in comparison to the old website, but there are numerous quality of life and aesthetic changes here to bring it in line with the rest of the new website.

We made sure all of the papers relevant to the technology are available in one place on the page, because not everyone wants to search for them through Cornell’s arXiv. That also includes the DeFi modules which are actually not published on arXiv, and will also include future documentation about the API’s and running validator nodes on our mainnets. We also removed the non-technical whitepaper from this page because it’s outdated and doesn’t accurately reflect what Fantom has become, as it’s so much more than was laid out originally.

Most of the work here was done in cleaning up the page in comparison to the homonymous tab on the old website, to make sure that developers can get to the documentation and Github as fast as possible. This was also a time sensitive issue because we needed the documentation to be easy to find for the Hackathon and Developer Bounty that we are hosting.

On a personal note though, almost everything that the builders need is on the Fantom and XAR Network Github repositories, and I like to believe that developers will be able to find it through those means as well, although the XAR Network repositories likely need some pointing towards for newcomers.

Team and Foundation

Image for post
Image for post

The ‘Foundation’ tab, named ‘Team’ on the previous website, was added in on the final stage. We originally considered scrapping the tab completely, because we felt that the website should be simple and low maintenance as we keep adding and removing elements while the product nurtures. We kept this page very no-frills to make sure it falls in line with our vision that the website should reflect what Fantom is and can be, rather than who’s building it.

In an ideal world, people buy products based on quality, and not on branding or the people who built it. If that were the case this page would have been scrapped, but we realized that this ideal world is far removed from the reality so we decided to retain this page. Because a great product without a clear cut origin and brand is at a disadvantage over a product with similar quality and better storytelling.

Final thoughts

All in all we’re quite happy with how the website turned out. We feel that the decisions we made in terms of design make sense right now, but as the project changes and evolves the website will also need updates in the future to make sure we don’t get a mismatch between product and branding like we previously had.

Through all of this, we want to thank Simone Pomposi, one of our community members who has been supporting Fantom since the early days and designed the website from scratch with us. Without his creative insights this website would not have turned out as good as it has become, and we are truly appreciative of Simone’s dedication towards the project and the community.

Official Links for Fantom:

Official Email Address:

Official Website Link:

Official Telegram Discussion Group (English):

Official Telegram Announcements Channel:

Official Subreddit:

Official Twitter:

Official Medium:

Official Github:

Official YouTube Channel:

Fantom Foundation

The core of the new internet

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store