website flow map

Design a Website Flow With Call to Actions to Generate Leads or Increase Conversions (Real Case Study)

Before I go through the process that I designed a website flow from one of my past projects, you should check out the article Why do You Need to Take Call to Actions Into Consideration While Designing Websites? if you don’t quite the idea of implementing call to actions on websites. It’s a quick read and will help you understand the following content better.

Let’s start step by step

1. Find websites providing similar products or services as reference

Easily go to websites which are in the same industry or even from competitors, it can give you a general idea regarding what content or pages your site need to have.

This past project I worked with is a blockchain company, KryptoGO Inc., offers a DeFi wallet for asset management. It has some famous competitors like Crypto.com, Coinbase Wallet, Bitkeep, etc. At the beginning, I went through all these sites and specifically looked at the footer areas where usually list out all the pages they have. (If the site lists out its sitemap, that’s even better.)

The footer of Crypto.com and shows what pages the site includes
The footer of Crypto.com and shows what pages the site includes

2. List down pages you would like to put on the site

Based on the research from step 1, now you can write down pages you would like to list on the site. Remember to add or delete pages based on your business or current situation.

Since KryptoGO offers not only DeFi wallet but also one-stop compliance solution, I separated two products with two different pages. Under Pricing, Company and Contact, I also planned to put down essential pages for visitors to understand the company well and easily get in touch.

The draft of pages on KryptoGO website
The draft of pages on KryptoGO website

3. Use flowchart or mind map to design the website flow between pages

We have planned pages in hand and it’s time to link them together. Flowchart (or mind map) is a convenient tool to tackle this task. (Miro is highly recommended.)

For every website, you need a Home page as the starting point to link to other pages. For KryptoGO project, besides Home page, pages highlighted in orange in the flowchart were based on the draft from step 2 and under these 4 categories (Products, Pricing, Company and Contact) , they all contained pages we planned earlier such as Compliance and Wallet under Products. I used colors to define different layers (For example, pages with orange colors were at the same layers.) and lines to link pages, so the relationship between pages would be easy-to-understand.

The flowchart of KryptoGO website
The flowchart of KryptoGO website

4. Think of call to actions for each page to increase engagement, generate leads or close deals

Each page now should have at lease one line linked to it and you can start to think of what types of call to actions can be implemented. Each call to action should be able to drive visitors to next page, check out or submit contact forms.

Let’s dive in the flowchart of KryptoGO project and take a look at how to use call to action buttons to drive the flow. As you can see, About Us is under Company category and has two outbound links. One links to Join Us page by “Job Openings” button (highlighted in green) and another links to Press page by “See More” CTA button (highlighted in fuchsia).

Moreover, on Press page, there is another call to action button “Contact” which visitors can hit it and submit a contact form. The rest of pages were applied with the same concept.

Remember to implement at lease one call to action on every page and try to link pages between each other. This will improve your site performance a lot and even collect leads (For e-commerce sites, it will be conversions.)

The flow details of About Us page with two outbound links
The flow details of About Us page with two outbound links

Conclusion

Once you’re happy with the flow and call to actions, you can start to fill in the full content for each page. Sometimes you will need to go back and modify the flow direction or call to action buttons several times to meet up your objectives.

The flow design is never a one-time job. Usually we’ll come back and keep adjusting it once for a while based on the performance. If you’re adding new products or pages on the site, then you’ll need to go through the flow again and maybe redesign it. Keep optimizing the flow or call to actions, eventually you’ll see the result improved.

If you have any feedback or results you’d like to share with me, please leave the comment below.