02

02

We used the very famous Atomic Design approach to tackle this gigantic task. We called every small detail of the page an atom, which combine to form molecules, then organism and then the templates. Now, these templates were a bunch of reusable components we used throughout the landing pages. Parag, our intern, blogged a much more detailed post about this split.

We used the very famous Atomic Design approach to tackle this gigantic task. We called every small detail of the page an atom, which combine to form molecules, then organism and then the templates. Now, these templates were a bunch of reusable components we used throughout the landing pages. Parag, our intern, blogged a much more detailed post about this split.

03

03

As you can see from the above IA, we started doing the first version of the wireframes of the first, second and third level pages. We tried keeping the molecules (sections) consistent in order to ease out the design and the development process.

As you can see from the above IA, we started doing the first version of the wireframes of the first, second and third level pages. We tried keeping the molecules (sections) consistent in order to ease out the design and the development process.

We wanted a very polished and upbeat sense of type while focusing heavily on the basics. We played with different sans serif combinations and font sizes based on the modular scale. We finally decided to use Source Sans Pro for the headings and Myriad Pro for the content.

Digging deeper into type, we also set a 21px baseline grid which was respected throughout our visual design in the later scales. Also, the progression in font sizes involved mathematics and a lot of tweaking with different heading sizes.

We wanted a very polished and upbeat sense of type while focusing heavily on the basics. We played with different sans serif combinations and font sizes based on the modular scale. We finally decided to use Source Sans Pro for the headings and Myriad Pro for the content.

Digging deeper into type, we also set a 21px baseline grid which was respected throughout our visual design in the later scales. Also, the progression in font sizes involved mathematics and a lot of tweaking with different heading sizes.

Level 2 (Pricing)

Level 2 (Pricing)

As a part of the five-member design team handling an entire redesign, focusing on the right problems and a well thought out process was key. Following a very rigid style guide and a component first approach made ours and developer's lives much simpler in the later stage because both the teams were reusing components (or habitats).

We were 5 people, highly cross-functional design team and all of us played a super important role in the redesign. We are basically Lokesh Khemani, Sagar Patil, Aaron Durham, Arun Pattnaik and our awesome intern Parag Nandi.

As a part of the five-member design team handling an entire redesign, focusing on the right problems and a well thought out process was key. Following a very rigid style guide and a component first approach made ours and developer's lives much simpler in the later stage because both the teams were reusing components (or habitats).

We were 5 people, highly cross-functional design team and all of us played a super important role in the redesign. We are basically Lokesh Khemani, Sagar Patil, Aaron Durham, Arun Pattnaik and our awesome intern Parag Nandi.