Google for Startups is a programme managed by Google to train and mentor startups to meet the right people, help them scale their products and more. It is a worldwide programme involving almost all of the major regions including the US, Latin America, Africa, India, Indonesia, Europe, etc. This programme mentors more than 100 startups across the globe and is continuing to expand its wings across more cities.

Challenge

Redeveloping the entire Google for Startups website from the ground up and making it functional across devices (mobiles, tablets, etc) in the span of fewer than 6 months. The website looks like a simple static website, but it contains a slew of information and a lot of permutation combinations of how the content appears on different pages. The major challenge was to develop the website to be modular so that we can rearrange blocks without any code.

Another challenge was to make the site look hand-made, meaning it should feel like a person is drawing stuff on screen. While this sounds fun and exciting, having a computer show the randomness takes a lot of precision, especially when you are targeting devices of every size imaginable.

Approach

ETD: 6 months

We went through the requirement doc and Figma design almost every 5 minutes because the design team had done such a marvellous job of designing the website and we wanted to make sure that the website looked as close to the vision as possible.

It was not just about picking the exact hex code or setting just the right font size, it was about reaching as many people as we could. The design team did an excellent job imagining the playfulness and a custom experience for the website, but it was our job to make sure that playfulness is seen via code. This website was to be seen by thousands of aspiring and hard-working startup founders across the globe. It had to be special.

Another addition to the list of responsibilities was to not just make the website for desktop users, but tablet and mobile owners as well. If you take a closer look at the website, you will discover that almost everything changes its appearance as you switch from device to device. All of this was to be done keeping in mind the modularity of the website. Any block of content could be added or removed by people who did not know how to code. They simply had to select a box and the content magically appeared on the screen.

One big aspect of working for Google is the idea of inclusion and internationalisation. A visitor of this website could be an individual from India or Brazil, they could be one with sight or disability. We needed to make sure that none of the visitors feel left out when navigating the site. This meant that we developed the website keeping in mind all the littlest things imaginable. Our accessibility rating was off the charts! An automated tool called Lighthouse ranked almost all of our pages with a score of 98 out of 100. That was huge! This meant that our visitors can navigate the site freely without having to feel left out.

To make the website as close to the designer's dream as possible, we were constantly in touch with the design team and they pushed us to iterate and improve on our approach to make the website better.

Results

If you have not already visited the website by now, I have attached a short video of the About page to show how amazingly well-designed and developed this website really is. I am hooting my own horn because I am extremely proud to have contributed to the development of this magnificent beauty.

Closing remarks

If you want to know on which specific parts did I work, here's a list:

• Story pages (Includes more than 40 stories with more to come in future)
• Accelerator pages (Includes more than 15 accelerators as of now)
• About page
• The parallax effect
• Carousels across the website