top of page

Building ConSoul’s Digital Presence: Leading Strategy, Collaboration, and Execution from Vision to Launch.

A leadership-led design story - from hiring a cross-functional team to defining direction, structure, and delivery for a MarTech brand’s first semi-dynamic website.

mockup of home page.png

Background & Context : Setting the Scene

When ConSoul Solutions approached me, they didn’t have a website.
They were a growing Martech company specializing in customer retention, but they lacked an online presence that reflected their credibility, capability, and values.

Their immediate ask was clear: "We need a website.”

 

But through my early conversations with the founders, I realised the problem was much deeper–they didn’t just need a website; they needed a digital identity that could build trust, communicate their story, and position them as a strategic partner to CMOs and CEOs in the MarTech space.

 

This project wasn’t just about visuals. It was about establishing presence, shaping perception, and enabling growth.

​​​​​

Discovery : Talking to People and Defining the Problem

Before moving into design, I spent the first few weeks in conversation mode. I knew that the right solution would only emerge from the right questions.

​I began speaking with:

  • The founder and co-founder of ConSoul, to understand their long-term goals, target audience, and differentiators. 

  • Two of their existing clients, to learn how they discovered similar agencies, what they valued in a Martech partner, and what built trust for them.

  • senior MarTech consultant, who helped me understand how decision-makers (CMOs, CXOs, marketing heads) assess vendors and what kind of digital presence inspires confidence.

Some of the questions I asked included: 

  • What first impression do you want a client to have when they land on your site?

  • What do you think differentiates you from other Martech firms?

  • If your site could communicate only three messages, what would they be?

  • What information do your clients usually look for before reaching out?

In the initial discussions, we also discussed what were the technical expectations from the website:

  • A custom-made or builder website

  • Static, dynamic or semi-dynamic

  • Which sections did they want to be dynamic and why

  • Any other preferences they had with respect to how the interface (asked to share references)

These conversations revealed an important truth:

'ConSoul website wasn't meant to sell, it was meant to build belief.' 

​​​​​​​

ConSoul Solutions - Discussions.png

I scheduled a call with them to dive deep into understanding what they think this website will solve for them and why. By the end of our 1.5-hour call, I had a clear sense of:

  • Why they wanted a website in the first place,

  • Who they were building it for,

  • What a "new-age website" meant for them (phrase they emphasised multiple times in our first two phone calls), and

  • What they saw as the key parameters or selling points for their visitors.

ConSoul Solutions - red.png

Locking in on the initial requirements:

Before hiring a team, I wanted to fully understand the requirements and make sure the client and I were aligned. So, I created shared this document with them.

Once I got their go-ahead, I spoke to a few developers in my network to understand:

  • Whether it was feasible to build a a semi-dynamic website that’s SEO-enabled and visually immersive?

  • How much time it would take to code?

  • The cost of developing a semi-dynamic or mildly immersive site, and

  • If there were any additional costs involved in achieving this?

Team Formation & Collaboration : Building a Cross-Functional Core

By now I had locked in on the content writer and a developer. I was now looking for a technical expert who would guide us in the right direction while creating the content of the website. 

I hired and led a small but sharp team:

  • A full-stack developer who could build a semi-dynamic, SEO-optimised website.

  • A UX writer who understood the tone and vocabulary of digital marketing.

  • A digital marketing expert for SEO and analytics integration.

  • A senior Martech advisor to guide us toward positioning the site correctly for executive-level decision-makers.
     

On-boarding UX writer and getting on with 1st phase discussions:

hkjhk​

I made sure to onboard a UX writer early in the process because content was the most crucial part of this project.

Once Rimjhim, the UX writer, joined in, we began regular discussions to deeply understand the client’s expectations.

 

We studied the references they had shared, did brainstorming sessions where we broke down each site to understand their flow, and how they used content hierarchy to tell their story.

ConSoul Solutions - Content discussions.png

Early discussions with the developer

 

After speaking with several developers in my network, I decided to hire Rishabh, a full-stack developer who I had earlier worked with on a small project. Once he was onboarded, we discussed possible interactions for the website, limitations around certain types of design components, and how we could build dynamic pages that would still be easy for the client to manage.

We first had an in-depth discussion within our internal team, followed by one with client, to ensure everyone was on the same page. 

How I simplified UI implementation for the developer

I wanted to prevent any friction between designing and coding; which led me to explore free UI libraries that came with pre-written codes for the interactive UI components. This gave me the freedom to design engaging and immersive interactions without giving the developer a headache.

Although I wanted to come to this part later, I had to lock-in on the visual treatment so we could define the scope for the developer. 

Research & Strategy : Turning Conversations into Structure

The next step was to transform our learnings into a strategic blueprint. I synthesised all interview and research data into clusters on Figjam for mapping goals, user needs, and brand values.

From this synthesis emerged three guiding principles:

  1. The right keywords are game changers - We learned that in the world of marketing technology, certain keywords instantly resonate with people.  

  2. Proof drives conversion - People want to see the impact you have brought for others before putting their trust in you. 

  3. Problem diagnosis and custom solution - Many companies are stuck at problems they don’t fully recognise.

 

Our strategy throughout the website was to incorporate these insights through content and design. 

ConSoul Solutions - breakdown1.png

Website breakdowns with the UX writer:

​​

The UX writer and I spent some time doing a really interesting exercise — we broke down a bunch of websites to see how they structured their homepages.

This helped us shape our own narrative flow for ConSoul’s website. We wanted to make sure the story we’re telling feels familiar to people who are already looking for a mar-tech partner. It ties back to Nielsen’s second heuristic–the match between system and the real world.

In simple terms, we wanted visitors to land on our site and immediately feel, “Okay, these people get it. They understand my world.”

 

How we Planned ConSoul's Case Studies' Flow on the Homepage:

We devised a crisp format which would tell the impact-oriented story in just one quick glance. Why? to save time to learn about the Impact ConSoul can create

 

  • A headline that sums up the problem, solution, and impact in one clear line.

  • A short subtext to add context and connect with the reader.

  • Three key impact points that highlight what ConSoul achieved for that client.

IMG_0684_edited.jpg

Strategy for testimonials, free resources (dynamic), designing high-conversion/ lead generating sections, header navigation, back & front end of other dynamic pages.

High conversion and lead-generating sections in Home page

 

We (UX writer, Marketing expert and I) had a brief discussion about:

  1. Sections in home page that have the highest conversion rates. We learned this through secondary research by reading multiple studies and expert articles. 
     

  2. How and where we could include a lead generation section. We decided to do it through: 
    - An enquiry form 
    - A free resource that can be downloaded upon entering basic details

ConSoul Solutions - conversions.png
free resource.png
PDF lead gen form.png

Top - Free resource (dynamic) PDF

that visitors can download.

 

Left - A quick lead-generating Pop-Up that is to be filled to download the PDF. 

Rating the sections from low-to-high conversion based on our research.

Prioritising the placement of menu buttons at the navigation

Menu bar.png

Nothing in the design was accidental. Every font, colour, theme, visual hierarchy choice, page layout, fold, and even the order of the navigation buttons was intentionally discussed and planned.
 

First - We wanted visitors to first understand what ConSoul can do for them, so Services came first.

Next - We highlighted Case Studies to show proof of our work, followed by Resources (Blogs), then Careers, and finally an easy way to get in touch.

Finally - The navigation ends with a clear CTA to book a call with us.

One of the most crucial parts of the project: How are we going to build the dynamic pages?

The client wanted certain sections of this custom-built website to be fully editable and manageable on their own. These included:

  • Success Stories (case studies)

  • The Blog section

  • Free Resources on the homepage

The challenge:

  • The client's expectations required a very high level of flexibility and control over multiple sections.

  • Providing this level of freedom meant essentially building a custom CMS from scratch.

  • It was almost equivalent to creating a full blogging platform within the website, which became clear only later in the process 

  • This late realisation created difficulties in balancing client expectations with technical feasibility.

Planning the back-end of 'Success Stories' and 'Blog' sections making it editable by the client:

How will the client access the back-end?
The easiest way to do this was to give them an Admin account which was accessible from the Footer section.

 

How do we ensure no-one else could access the back-end?

Generating a log-in credential with two-factor authentication.

ConSoul Solutions - SS list.png

Locking in of the Success Stories' listing page's layout and picking the sections that would be managed by client.

The client wanted to be able to manage the contents in Filter section too - so we created a solution for that in our back end, see the image below.

Inside a success story, I created this layout where only the content can be changed by the client (while still being able to add or remove number of "Key highlights', pointers in "Key challenges' and 'We helped..' sections. 

SUCCESS STORIES - Filter.png

In the filter section, client can edit/ add new filter options (checkbox items) under existing categories.

How? see below screenshots to see the back-end works.   

Screenshot 2025-11-24 at 4.43.29 PM.png
Screenshot 2025-11-24 at 4.44.08 PM.png

In the above screenshots you can see how we created the backend of the success stories section, and similarly for the blog section as well. The part highlighted shows how we designed the customisability of the filter section - which is, by choosing the 'other' option from the drop-down, and manually entering a new filter option under respective category.  

Design & Execution : Leading Through Collaboration

With structure in place, I moved to design, but this phase wasn’t just about pixels; it was about alignment.

I started by defining a visual direction that reflected ConSoul’s brand–intelligent, confident, and understated.

 

To achieve this, I focused on:

  • Clean typography and generous whitespace for readability.

  • Subtle scroll-based animations for engagement.

  • Modular grids for scalability.

  • Brand colors used strategically to highlight key messages.

Throughout design, I shared early drafts in Figma and hosted live review sessions with the writer and developer. Instead of presenting finished designs, I invited them into the process–to co-own decisions.

Homepage UI

1st Fold - Hero section

Our main copy focused on the flagship service that ConSoul delivers, which is 'Customer Retention'. It is then proceeded by a supporting line of how they achieve the result, concluded with 3 key takeaways for their clients. 

The moving visual on the right shows mock-ups of front and back-end of how things work, customer communication, overall benefit of having Consoul on board. 

Hero.png

2nd Fold - Services

This section was designed to tell a clear story of how ConSoul works—starting with data-driven strategy, followed by evaluating and aligning the client's MarTech tools, and finally executing and optimising campaigns.

We broke this down into three visually distinct panels, each highlighting the services under that phase with simple, benefit-led headlines, engaging visuals, and relatable copy.
 
The tone was kept accessible yet professional, and the flow helps users understand the full journey at a glance. We ended with dual CTAs to guide both curious and ready-to-act users.

Services.png

View prototype here: 

3rd Fold - A Dynamic Free Resources Section to Help Generate Leads

We designed this dynamic section to serve as a value-driven lead generation tool. It highlights free, in-depth content pieces (like articles, guides, or templates) that ConSoul can easily update or replace from the backend as per their campaign or content strategy.

To access the resource, visitors are prompted to enter their basic details—turning each download into a qualified lead for ConSoul.

This approach not only adds educational value for users but also supports ConSoul’s marketing goals by consistently capturing new prospects through gated, high-value content.

4th Fold - Social Proof (Testimonials & Clientele)

testimonials.png

5th Fold - Trust Building & Lead Generation

This section was designed to address two key objectives: build trust and capture leads. The “Why Choose Us?” block highlights ConSoul’s key differentiators in a quick-scan format—reinforcing their value proposition with clear, benefit-focused points.

Below it, we created a personalised lead capture form that feels more like a conversation than a form. It introduces the founder, Vani Garg, to build a personal connection and assure visitors of hands-on leadership involvement.

The form is tailored to collect relevant lead data while giving visitors the option to indicate their areas of interest—making it easier for the ConSoul team to follow up with contextual solutions.

Section 9 - why choose us.png

6th Fold -  More Trust Building Through Success Stories 

Section 5 - Success story 1.png

7th and Final Fold -  Existing Tech Stack and a Final Nudge at The End

Tech stack - Tools worked on:

This section was designed to visually showcase the breadth of ConSoul’s Martech expertise. Featuring a curated set of recognizable tool logos, it assures potential clients that ConSoul is platform-agnostic and well-versed in industry-standard technologies. We kept the layout clean and easy to scan, reinforcing trust through familiarity while subtly communicating capability and flexibility.
 

Final Nudge - Are you ready to...?

Positioned as the final nudge, this call-to-action section is designed to convert interest into engagement. With a clear, motivating question and dual CTAs—one for those ready to talk and another for those still exploring—it ensures that visitors at different stages of the decision-making journey feel catered to. The tone is warm yet direct, making the transition from browsing to taking action feel seamless.

Section 10 - partners.png

7th and Final Fold -  Existing Tech Stack and a Final Nudge at The End

Footer - desktop.png

Other Pages UI

Services Page

For the sake of brevity, the case study will only showcase the first page of the service section (Media & OTT) - You may check the entire service section here: <<add figma link>>

Other Pages UI

About Us

Other Pages UI

Careers - Dynamic Page

Feedback, Refinement & Adaptation

We conducted feedback sessions at two key points:

  1. After the prototype was ready

  2. During staging before go-live

The founders wanted a few sections to be more marketing-driven, while our research showed that C-suite visitors preferred clarity over persuasion.


I facilitated a joint discussion — balancing brand aspiration with user psychology. We rewrote the hero headline and refined the CTA placement to serve both. What you see in the designs were a result of the final  that is also tested with users. 

Instead of reacting to feedback defensively, I treated it as a dialogue – a way to align everyone on what the site should make people feel.

Outcome & Impact ​

The final website launched with all the intended semi-dynamic sections, SEO integration, and analytics tracking.

For ConSoul, it became more than just a website — it became their first true digital handshake. With a credible online presence, they could now confidently share their website with clients and partners, replacing the static PDF decks they once relied on. The new experience reflected their expertise, strengthened client trust, and positioned them as a serious Martech contender.

For me, this project was a defining moment in my design leadership journey. It reinforced that great design leadership isn’t about doing everything yourself — it’s about bringing clarity, alignment, and momentum to a team.

You have reached the end of this case study

Hi, I am Pragya Gupta – a Deep UX Generalist 
designing end-to-end FinTech and MarTech products.

E-mail : reachpragyagupta@gmail.com

Phone : +91 98200 07753

Location : Gurugram (Delhi NCR), India

bottom of page