Redesigning GDG Women Chennai’s Portal

Today, we released a new version of the Google Developers Group Women Chennai‘s web portal to the world. We tested out methods that corporates think is irrelevant. We crafted every pixels, in every corner of the screen. And now, we would like to share the ‘Sprint Process‘ that we followed to build this website.

GDG Women Chennai

GDG Women Chennai is Chennai’s fastest growing community to celebrate Women in Technology. This is yet another wing of the widely popular Google Developers Group Chennai, that has been successful for the past four years.

Crawling the web for Women in Technology

It’s 2014, and people are running after their dreams. We have already mentioned in our earlier posts about the core values of the company, and why there is a need for a company like ours’ in the industry. Earlier this month, we sat down to take a look at all the amazing things the Women in Technology have been doing. As we crawled the entire web, we realized that everything we do to celebrate them, has to be special. And we decided, that it has to be special in a way that they are proud of our work for them. While GDG Women Chennai is existing to do just that, we wanted to make it even more special and unique.

So the next natural move, was to start from ground up. We took a deep breathe to push away all the thoughts we had and clean up our mind before planning anything for this special community. For the next few hours, we kept iterating ideas, to push the Women Community forward. The ideas ranged from a regular meetup to huge annual conferences for Women. But to do all these, we wanted a beautiful website, the would portray this special community. And what you are seeing today, is a reflection of just that.

The Idea

We started brainstorming about the way the website has to look. We were clear with the idea that the website should reflect the characteristics of a successful women. When we wrote about 25 ideas for the website, everything came down to these three factors that has to be considered for the design:

• The site has to be very minimal
• Should convey a lot of Information
• Should be responsive, with very less whitespace

Now that we had a firm idea to expand into a product, we started working on prototyping it. We sketched, experimented and built literally over 20 prototypes for the website. The one that is live now, is the result of saying ‘NO’ to 19 other prototypes, and iterating one prototype, a thousand times.

The Process

The idea, and focus on three main things and 20 prototypes, with endless iterations gave us a clear vision of what we wanted. We started off with a very minimal layout for the landing page. Let us take some time to explain the entire process and workflow.

Colors

For any website, colors are very important. We wanted to have a stint of pink that women would like. We messed around with a lot of different shades of Pink, and the final color we settled down, is the one that you see in the site now. One thing we learnt when researching on the colors that would appeal to women audience is that,

Not all girls like Pink.

Introduction Section

Wireframe

Production Version

We spent quite a bit of time in designing and thinking about the way this section to look. We wanted to capture these three important factors for the section:

• Should Create an Impact
• Should immediately capture the attention
• Minimal

We started off with designing the menu and the logo section. We played around for a number of hours, trying to place the logo and the menu in the right way. The initial prototypes had the menu stuck towards the left side of the page, and when a user hovers the mouse over that section, it would expand itself in a very subtle animation. But then, after some iterations, we realized that the impact it created was not as expected.

So we went down to the basics and arrived at this solution for a fixed menu:

But once we designed the menu, we faced a unique usability issue. When the menu scrolled over a few of the layers, it literally submerged into that color, and was not clearly visible. But we think, we addressed this issue. And here’s what happens when you scroll to the FAQs Section:

About Section

Wireframe

Production Version

This section would explain exactly what the community is all about, in a few words. But then, the community lead was clear in what she wanted. She wanted a Quote, from a famous Women Entrepreneur, and some bold text, to give the viewer a gist of what the community is all about.

When discussing about this section, we wanted to highlight one influential Women in Technology, every single month. And this section that’s there currently, is the refection of that idea:

Well, we loved that idea. We created a very small section for the quote, right below the community’s introduction section, and then, gave it a unique style by adding the name of the person being featured every month, in a signature styled font:

FAQs Section

Wireframe

Production Version

The purpose of this section was to answer the questions that many have been asking about GDG Women. There were six important questions that were to be answered. But the problem here was, the amount of content that was present.

If we put all these questions into a list view kind of layout, it would consume a lot of space, and that would be completely out of the idea that we made initially. The only way to do that is to put the questions in a Grid layout. Just like the way the newspapers do it.

Events Section

Wireframe

Production Version

Every month, GDG Women organizes an event. The events are so unique and this section has to highlight the information about the upcoming and the past event in a subtle way. We decided to follow the same layout we had for the About section.

The left side of the section would feature the event’s promotional image, and the right side would contain all the essential information of the event, not all the information.

But we thought that was pretty simple. And in the longer run, it would be a pain to update the backend for the event, every single time.

To address this problem, we used AngularJS to fetch the event information from a spreadsheet that is being used by the Organizers. The images are hosted on the server, and all the other information would be fetched directly from the spreadsheet. And based on the date, the status of the event would be changed to ‘Over’, ‘Upcoming’ or ‘Happening Now’

The Code

As always, all our engineers here at Skcript, love to code. Overtime, we have developed an obsession for playing around with the backend code, that is not visible to anyone, and beautifying it. All these years, we think the backend code is not being that informative to the general public.

And that is when we arrived at a solution to make the code interesting, useful and inspirational. The code that you see right now, has some of the best handpicked quotes from Women in Technology. These quotes are very inspirational, that we wanted to put them on the site, but should not be visible to everyone.

Biggest Inspirations are hidden in Plain Sight.

Closing Comments

We had super fun working on this project, and with every single project we work, we are becoming mature.

Now that the version #1 of the project is out, we are stepping into the next level of coding for the site. We can’t wait to show you a preview of the same.

Peace.

Originally published at blog.skcript.com.