Making The Simpul-est Website

A story about making a website most suitable for us.

Abe Prawiromaruto
Simpul Technologies
4 min readOct 18, 2020

--

When Simpul Technologies first started, there was so much to do and very little time. I had to focus most of my energy on hiring the best available talent and getting them up to speed. I ended up whipping a plain placeholder website in 2 hours, mostly to provide more links so our job listings look slightly more legitimate.

Plain Placeholder Website: at least it’s responsive!

The placeholder website is definitely ineffective in introducing Simpul. As a result, every single interview inevitably includes, “What is Simpul?”

As we continue to expand our hiring pool, explaining Simpul during interviews became highly inefficient. Improving our web presence became a necessity.

Since web technology and design is our bread and butter, there is a bigger pressure for us to produce a distinct and compelling website. The objective is simple: to create a website that best shows-off our coding skills, design chops, and unique culture.

Making Guidelines

We started by listing down some of the values that we want to convey through our website. This is necessary so that, by looking at our website, people can catch a glimpse of Simpul. Here are some of the values that we put down:

Show, and tell a little bit

Instead of using verbal descriptors, we like to show ideas making prototypes. We decided early on that we would take the same approach with explaining Simpul to our site visitors, showing off stuff we make.

Learn and be inspired!

Creating value to the world is something we really value at Simpul. We want our site visitors to learn and be inspired. We took inspiration from sites like https://www.ideo.com/ that give so much value to its visitors and https://www.media.mit.edu/ that inspires its visitors by showing off their latest greatest works.

Original distinct work

At Simpul, we value ingenuous work, so we wanted the site to be distinct and original to reflect this. As a result of this, we take inspiration, but strictly avoid blatant copying of others’ work.

Team-centric

Simpul is not about its founder or any single individual; we’re a team. We want everyone in the team to be able to contribute to the site easily.

Based on these guidelines, we went through several prototypes and ended up with something we’re very proud of to share to everyone.

Light and Dark Modes

Light and dark modes as two sides of the same coin.

When tackling abstract problems, we always experience two modes: feeling lost in the face of complex problems and glee when it all comes together at the end. We are to embrace both of these modes in order to create amazing things. Everyone in the team experiences these to varying degrees.

To express this concept, we settled on making light and dark as the centerpiece of our website. It represents a dichotomy that truly exists in our workspace. Like its physical properties, the Light Gallery showcases our accomplishments whilst the Dark conceals what we do behind the scenes.

We realize from the very beginning that most of our visitors will only see the Light Gallery, so we curated a list of interactive pieces that best convey who we are.

This one is so real… it hurts.

For those who want a closer look at Simpul, we want to create something to reward them.

Enter Dark mode

The Dark Gallery represents the unnoticed behind-the-scenes work that our team has put in. Most of the work that we do gets iterated away for something better. But just because they never see the light of day, it does not mean that we do not value them. Every single mockup and line of code help pave the path to where we are now.

“we make magic” is my nephew’s current favorite.

At a glance there might not be anything much in the Dark Gallery, but we’ve actually embedded interactive easter eggs when specific keywords are typed. For example, you can try case-sensitive keywords such as magic, drawing, or jumping rock; each one displays fun and interactive work that our team has created.

A Happy Side-effect: A Website that Grows with Us

When we first began, we didn’t know how it would turn out at the end. Through various iterations, we ended up with a website that, like Simpul, will continue to evolve and grow with the team.

We designed the codebase so that anyone in the team can contribute interactive pieces and keyword pairs to the site. The creator can then decide how to unveil the keyword to everyone.

So, perhaps, by the time you read this, there are already more keywords to explore. Visit us at simpul.tech and check it out yourself!

--

--