Problem Statement

This was my first web design assignment done as a part of the 10kdesigners masterclass. I was supposed to design a landing page for a cycling company that sells anything related to the cycling niche. Selecting what the product and service would be was up to us. We also had to come up with the name and logo of the company.

Research & Ideation

I first started the design process with some research and ideation. I tried to look for the products and/or services that a cycling company could sell. The typical answer would be to sell cycles or cycles related products like clothing, accessories etc. However when I thought a bit more about it, I felt like selling cycling tours could be an interesting idea, hence I decided to go with that.

A cycling tour is where a group of people travel to different places (across cities and/or countries) majorly on their bicycles, they live in camps and explore localities.

As part of my research, I also looked up some reddit groups and blogs on the internet to better understand how cyclists travel and interact and what are the things they look out for.

Information Architecture, Copy and Wireframes

In this stage, I figured out what would be the sections that the landing page should have and how the different elements on the page should be placed. That's when I started wireframing. This was also the stage where I decided majority of the copy of the landing page. I took inspiration from different blogs and websites that seemed relevant.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3cd1b8ee-684d-4880-8f70-ab5b43a5cf2f/CamScanner_12-02-2020_15.36.28_1.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d4481494-421e-41bf-aae5-0b3814506ae2/CamScanner_12-02-2020_15.36.28_2.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/93f18b85-a0bc-427b-8f80-aff7daa79d45/Frame_5_(5).png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6726a6df-adbd-433e-a4a9-5ac24e186b99/CamScanner_12-02-2020_15.51.42_1.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/af8b3f9a-64e7-4983-bb8b-e711de0c2f86/CamScanner_12-02-2020_15.51.42_2.jpg

Branding

In this stage I decided the name and design for logo of the company.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb85d48a-0e9c-490c-b849-db7fdfdfa365/Frame_9_(5).png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b573c9c6-0f5b-40bb-9c66-f9729b344f48/Frame_6_(3).png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/32454021-6076-421e-a129-d63cf8a41991/Frame_8_(3).png

Final:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/73c266cd-e9ed-4c78-a824-31aee62dfca1/MacBook_Pro_(32).png

Visual Design

Watch the video below to see the full landing page.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a4d41d4c-91ce-4efa-9626-96945e165298/Recording_32.mp4