Website Design

Website Design

Website Design

Insights

Insights

Insights

June 7, 2000

June 7, 2000

June 7, 2000

Our Proven Website Design Process for CRO-Focused Websites

Our Proven Website Design Process for CRO-Focused Websites

Our Proven Website Design Process for CRO-Focused Websites

We consistently design websites our clients love & visitors convert. In this article, we dive deep into how we create these amazing websites for our clients.

We consistently design websites our clients love & visitors convert. In this article, we dive deep into how we create these amazing websites for our clients.

We consistently design websites our clients love & visitors convert. In this article, we dive deep into how we create these amazing websites for our clients.

3 mins

3 mins

3 mins

Author:

Siddharth Vij

Co-Founder, Bricx

Hi, I'm Sid. I lead design at Bricx. We work with B2B & AI SaaS companies to craft unforgettable user experiences.

We have two primary outcomes for every website design project:

  1. It will look better than any competitor

  2. It will convert better than any competitor.

With these objectives in mind, we divide the project into two workstreams:

  1. CRO & Messaging Workstream

  2. Branding & Visual Design Workstream

CRO & Messaging

Primary Data Analysis

After our onboarding call, we analyze all your existing research & data. In case you have primary data i.e. user surveys, sales calls recordings, onboarding call recordings, online reviews, etc - we use those as our starting point.

In case you don’t have primary data, we create a plan to collect the minimum viable primary data good enough to start making decisions.

This means we reach out to your dream clients and get them on the phone to validate our hypothesis and understand their pain points.

Messaging & Brand Positioning

Using the primary data & competitor research, we find missing gaps in the market that aren’t fulfilled by anyone. We create a sheet for all our messaging in the future. This includes:

  1. Pain Points

  2. Desires

  3. Fears

  4. Beliefs

  5. Objections

  6. Bonuses



Once we have this understanding, we craft a brand positioning that stands out from the competitors and fills a real gap.

Information Architecture

Next, we want to create a conversion friendly information architecture of the website. This means what sections do we want & in what order do we want them.

The goal of this activity is to create a structure when read top to bottom that narrates a story & sparks the right messages when read, they want to take the primary action of the website.

We do this for every single page of the website.

Copywriting

Now, we’ll take everything and write a copy for each section - making sure our goals are achieved and our positioning is represented in a way we thought it would.

We do this for each section making sure we’re communicating as much information as possible in the least amount of words.

Every message. Every word is written with a primary objective to make users feel something and move them closer to taking action.

Visual Design & Branding Workstream

Moodboarding

The second workstream starts with creating a vast moodboard of different design inspirations. It includes the most modern & trending visual design styles.

We share access to the Figma file and expect you to comment what you like/dislike & we also give our recommendations. It gives us an idea of your visual design taste and will shape our next steps together.



Branding Explorations

We take your feedback on the moodboard & the IA activity we did to create 3-5 different visual design explorations of your website’s hero section.

This gives you an idea of what your website could potentially look like and we can iterate before designing the whole page.



Homepage Design

Once the hero section is approved, we extend the same visual design to the whole homepage based on the information architecture created earlier.

We showcase different layouts for each section, maximizing our chances at improving conversions - one section at a time.



Other Pages Design

Based on the scope, we start designing the next pages in a similar fashion. We already have the visual design set.

We use it to create unique sections based on the information architecture of each page. You always have access to the live Figma file so you can comment wherever you have feedback.

Webflow/Framer Development

As each page gets finalized, we start handing them off to our webflow/framer developers. They develop mobile responsive, fast, and pixel perfect versions of the design.

To reduce the project timeline, we keep development running in parallel so as the design wraps up, development is also wrapping up.

Handoff & Support

After the website is made live after your final approval, the project is marked complete. If you want additional support of our agency as an extended design team, we have monthly packages.

You can request all sorts of design work ranging from new landing pages, UX research, product design, pitch decks, and more.

Conclusion

If you’re looking to work with a design partner who has a proven process to create conversion-focused beautiful websites, book a call with our team here.

We have two primary outcomes for every website design project:

  1. It will look better than any competitor

  2. It will convert better than any competitor.

With these objectives in mind, we divide the project into two workstreams:

  1. CRO & Messaging Workstream

  2. Branding & Visual Design Workstream

CRO & Messaging

Primary Data Analysis

After our onboarding call, we analyze all your existing research & data. In case you have primary data i.e. user surveys, sales calls recordings, onboarding call recordings, online reviews, etc - we use those as our starting point.

In case you don’t have primary data, we create a plan to collect the minimum viable primary data good enough to start making decisions.

This means we reach out to your dream clients and get them on the phone to validate our hypothesis and understand their pain points.

Messaging & Brand Positioning

Using the primary data & competitor research, we find missing gaps in the market that aren’t fulfilled by anyone. We create a sheet for all our messaging in the future. This includes:

  1. Pain Points

  2. Desires

  3. Fears

  4. Beliefs

  5. Objections

  6. Bonuses



Once we have this understanding, we craft a brand positioning that stands out from the competitors and fills a real gap.

Information Architecture

Next, we want to create a conversion friendly information architecture of the website. This means what sections do we want & in what order do we want them.

The goal of this activity is to create a structure when read top to bottom that narrates a story & sparks the right messages when read, they want to take the primary action of the website.

We do this for every single page of the website.

Copywriting

Now, we’ll take everything and write a copy for each section - making sure our goals are achieved and our positioning is represented in a way we thought it would.

We do this for each section making sure we’re communicating as much information as possible in the least amount of words.

Every message. Every word is written with a primary objective to make users feel something and move them closer to taking action.

Visual Design & Branding Workstream

Moodboarding

The second workstream starts with creating a vast moodboard of different design inspirations. It includes the most modern & trending visual design styles.

We share access to the Figma file and expect you to comment what you like/dislike & we also give our recommendations. It gives us an idea of your visual design taste and will shape our next steps together.



Branding Explorations

We take your feedback on the moodboard & the IA activity we did to create 3-5 different visual design explorations of your website’s hero section.

This gives you an idea of what your website could potentially look like and we can iterate before designing the whole page.



Homepage Design

Once the hero section is approved, we extend the same visual design to the whole homepage based on the information architecture created earlier.

We showcase different layouts for each section, maximizing our chances at improving conversions - one section at a time.



Other Pages Design

Based on the scope, we start designing the next pages in a similar fashion. We already have the visual design set.

We use it to create unique sections based on the information architecture of each page. You always have access to the live Figma file so you can comment wherever you have feedback.

Webflow/Framer Development

As each page gets finalized, we start handing them off to our webflow/framer developers. They develop mobile responsive, fast, and pixel perfect versions of the design.

To reduce the project timeline, we keep development running in parallel so as the design wraps up, development is also wrapping up.

Handoff & Support

After the website is made live after your final approval, the project is marked complete. If you want additional support of our agency as an extended design team, we have monthly packages.

You can request all sorts of design work ranging from new landing pages, UX research, product design, pitch decks, and more.

Conclusion

If you’re looking to work with a design partner who has a proven process to create conversion-focused beautiful websites, book a call with our team here.

We have two primary outcomes for every website design project:

  1. It will look better than any competitor

  2. It will convert better than any competitor.

With these objectives in mind, we divide the project into two workstreams:

  1. CRO & Messaging Workstream

  2. Branding & Visual Design Workstream

CRO & Messaging

Primary Data Analysis

After our onboarding call, we analyze all your existing research & data. In case you have primary data i.e. user surveys, sales calls recordings, onboarding call recordings, online reviews, etc - we use those as our starting point.

In case you don’t have primary data, we create a plan to collect the minimum viable primary data good enough to start making decisions.

This means we reach out to your dream clients and get them on the phone to validate our hypothesis and understand their pain points.

Messaging & Brand Positioning

Using the primary data & competitor research, we find missing gaps in the market that aren’t fulfilled by anyone. We create a sheet for all our messaging in the future. This includes:

  1. Pain Points

  2. Desires

  3. Fears

  4. Beliefs

  5. Objections

  6. Bonuses



Once we have this understanding, we craft a brand positioning that stands out from the competitors and fills a real gap.

Information Architecture

Next, we want to create a conversion friendly information architecture of the website. This means what sections do we want & in what order do we want them.

The goal of this activity is to create a structure when read top to bottom that narrates a story & sparks the right messages when read, they want to take the primary action of the website.

We do this for every single page of the website.

Copywriting

Now, we’ll take everything and write a copy for each section - making sure our goals are achieved and our positioning is represented in a way we thought it would.

We do this for each section making sure we’re communicating as much information as possible in the least amount of words.

Every message. Every word is written with a primary objective to make users feel something and move them closer to taking action.

Visual Design & Branding Workstream

Moodboarding

The second workstream starts with creating a vast moodboard of different design inspirations. It includes the most modern & trending visual design styles.

We share access to the Figma file and expect you to comment what you like/dislike & we also give our recommendations. It gives us an idea of your visual design taste and will shape our next steps together.



Branding Explorations

We take your feedback on the moodboard & the IA activity we did to create 3-5 different visual design explorations of your website’s hero section.

This gives you an idea of what your website could potentially look like and we can iterate before designing the whole page.



Homepage Design

Once the hero section is approved, we extend the same visual design to the whole homepage based on the information architecture created earlier.

We showcase different layouts for each section, maximizing our chances at improving conversions - one section at a time.



Other Pages Design

Based on the scope, we start designing the next pages in a similar fashion. We already have the visual design set.

We use it to create unique sections based on the information architecture of each page. You always have access to the live Figma file so you can comment wherever you have feedback.

Webflow/Framer Development

As each page gets finalized, we start handing them off to our webflow/framer developers. They develop mobile responsive, fast, and pixel perfect versions of the design.

To reduce the project timeline, we keep development running in parallel so as the design wraps up, development is also wrapping up.

Handoff & Support

After the website is made live after your final approval, the project is marked complete. If you want additional support of our agency as an extended design team, we have monthly packages.

You can request all sorts of design work ranging from new landing pages, UX research, product design, pitch decks, and more.

Conclusion

If you’re looking to work with a design partner who has a proven process to create conversion-focused beautiful websites, book a call with our team here.

Author:

Siddharth Vij

CEO at Bricxlabs

With nearly a decade in design and SaaS, he helps B2B startups grow with high-conversion sites and smart product design.

Unforgettable Website & UX Design For SaaS

We design high-converting websites and products for B2B AI startups.

Similar Blogs

Similar Blogs

Similar Blogs