Our history, one website at a time.

TL;DR: We’ve built 4 websites for GRVTY, our agency, in the past 18 months. We think of them as a time-capsule for GRVTY. In our history, we tried different business models and got way better at our craft. Check out website 5.

We change our website frequently. Like frequently. Since we started GRVTY a bit over 18 months ago, we’ve had 4 websites. All our sites had different value-propositions, were built with using different technologies and some were a bit dull.

Why? There are couple of reasons. For the first four months of our agency, we didn’t really know who we were. We knew we liked to make things with high standards of quality, to experiment with new technologies and to love what we do. Unfortunately, we didn’t know how to explain that.

It is relatively simple for us to figure out our customer’s value proposition. How they speak, how they act, and who their target market and audience is. But it was hard for us to figure out who we were. It wasn’t like when we were teens.

Listening to The Smiths and writing our feelings out wasn’t going to take us anywhere.

The First Website

Our first two websites were built on top of Wagtail CMS. Wagtail is a great Content Management System, and we were huge Python / Django fans.

Wagtail was a great fit because of Stream-fields. We could take advantage of the Tree Structure and the concepts behind a “stream-field” to eventually launch custom looking websites without the need to use developer time.

Short story short; Daniel, our CTO and I love modularity and DRY. After a couple of weeks working with Wagtail we were editing the CMS functionality, custom tailoring it to fit our design and development process.

After a while, we realized we had built a powerful backend, but an average looking website. I don’t want to say this, but it lacked panache. It had a flat-beer feel to it.

On the plus side, we had learned a ton on CMS, technical SEO, optimized meta-descriptions, Open Graph and Schema Markup. We got better at typography, SEO optimized copy and image efficiency. Website number one was a great website, but it didn’t communicate what we wanted to say.

A peek at our old logo, some former team members and what we played with on.

Website number dos

Our second website was our first website but with a different message. We had succeeded at Not Repeating Ourselves.

For a couple of months in 2016 we wanted to be a production agency. (Bad Idea) We decided to change our messaging to “The white-label digital agency that delivers”.

After a couple of proposals and fighting over scope and budget we realized: “Our potential customers were looking for cheap solutions. They don’t really care about quality, rendering speed nor pixel perfection.” It was up to us. We could either become a factory that produces “Meh..” websites or change the business model.

Dumb mistake. Get credit for everything you do.

GRVTY III

We had just turned 1 years of age. If we were a baby, we would be learning how to speak. We needed a new voice. We changed our mark, lightened our colors, kept the GRVTY and got rid of the word “labs”.

Our new website was experimental and keyword rich. We wanted to be an authority and we didn’t have any portfolio pieces (Don’t you ever white-label your services) was to explain everything. By everything, I mean everything. We detailed what a Rest API was, we explained the difference between functional and object oriented programming and detailed our design process like no-one has ever done before. Turns out, our potential customers didn’t care about any of that.

For our third website, we had migrated from Wagtail to a static website build with Obelisk on top of Phoenix. We felt proud that our content loaded faster than 99% of websites in NYC, and 95% of websites in San Francisco.

Our site was an ode to efficiency. It loaded faster than most websites and we didn’t even use a CDN or Gzip our website. It had big images and it was packed with JavaScript animations (No JQuery, at all). We kept telling our customers about how excited we were about out engineering prowess. They didn’t really care.

We consulted with a friends’ agency, Canalla. They told us our main issue was that we weren’t speaking our customer’s language. Our personalities didn’t come through. GRVTY was a faceless agency of nerds, trying to show everyone how smart and cutting edge they were. We needed to be us.

We had a clear idea on who we were becoming.

Our placeholder website

We were uncomfortable with our messaging and how pompous, pretentious and presumptuous we appeared to be. (We are cool, please ignore the big words) We took it to Webflow and launched a website that could serve as a placeholder website for 3 months until we launched our new site.

This website lets our personality come through. We are sarcastic; but down to earth. We are passionate about getting better; but humble in our learning experiences. We are “a sassy bunch of cartoon watching standup loving technologically driven smarty-pants”.

Our new copy summarized our motto. We are: “Better than some freelancer in Bangalore, and cheaper than in Sillicon Valley”. Big ups to Rosicky from Canalla for coming up with that concept.

Our upcoming website

5 times is the charm. Right? We learned and our website is a testament to iterative design and development. We have learned from every single one of our previous websites. We appreciate structure and reusable components. We learned that we wanted to have direct contact with our customers. We understood perceived value. We decided to let ourselves shine through.

The first step was to identify common data structures for web components. We visited more than 30 websites and stripped them down. We realized that regardless of how different the websites were, there was an underlying structure of 15 components. For example, one of the most common blocks is an image to the side, a title, a subtitle and a call to action.

In theory, all blocks have the same data structure, but we made them look different.

We reused our custom Wagtail Stream-field components and turned them into a Rest API. We can now write content in our website, export it as a JSON and have it consumed by a site built on top of React and Redux. Load speed isn’t as great as with our previous websites, but perceived speed is better.

We tackled SEO and SMO by automatically building XML sitemaps, making our JavaScript Crawlable and having a static copy of our content in our server.

We designed a series of components for 4 different screen sizes. We came up with a way to use Flex to make every block feel custom.

Planning the information architecture, and contents needed for the API.

Working this way will allow us to build websites for our customers in a cost-efficient fashion. The more they save on website, the more they can put into customer development and growing their businesses.

Our two cents

We have figured some things out throughout the process of building an agency. We don’t want to claim we have never made a mistake, we have. If we can be of any help to you as a new agency or startup we would gladly help you out.

Some Closing Remarks

We have started two Open Source projects called Waddles and Grunkle to help everyone code great looking websites faster. If you want to help us out, we appreciate pull requests.

P.S. And now for the sales-y part: We are currently available for agency work and partnerships with new UX/UI studios. Get in Touch