Blog Redesign: Driving User Engagement, Content Visibility, and Brand Identity for Novatr

Blog Redesign: Driving User Engagement, Content Visibility, and Brand Identity for Novatr

Blog Redesign: Driving User Engagement, Content Visibility, and Brand Identity for Novatr

Image Credit : All the stunning illustrations are brought to life by the exceptional visual design team at Novatr.

Image Credit : All the stunning illustrations are brought to life by the exceptional visual design team at Novatr.

👁️ Project Summary

To enhance user engagement, brand identity, content discoverability and drive CRO through a strategic redesign of the Novatr blog platform.

🏮 Highlights

Project Timelines: March’24 - April‘24 (4 weeks)


Project Category: Product led growth


Stakeholders: Product Manger, Product Designers, HubSpot Developers, Brand & Marketing

🥷🏻 What did I do?

Research, Competitive analysis, Stakeholder Alignment, Identifying key metrics, UI / UX, High fidelity prototyping, Developer Hand-off, Design- Ops

Team & relevant stakeholders

2 PMs, 2 PDs, 2 engineers + more

Product Designers

Advitiya Sodha

Ved Pathak

Product Manager

Nikhil Priyatham

Tech Support

Kavita Bisht

Jatin Sharma

Product Analyst

Pankaj Sharma

SEO Expert

Tanmay Gadade

About the company

Novatr is to architects and engineers what launchpads are to rockets. As India's leading AEC-focused ed-tech platform providing online training, it helps fast-tracking careers with industry-certified courses and collaborative learning, propelling professionals towards success in the ever-evolving AEC industry with tech-first and future-proof skills.

Blogs at Novatr

Blogs are one of the biggest contributors to organic traffic at Novatr. About 22% of our revenue comes through organic channels. Blogs alone contribute to 10% of that organic revenue.


Moving forward, the organisation is committed to strategically bridging the gap between paid and organic marketing channels and blogs can play a significant role in this initiative.

📈 Conversion% through blogs | Duration (Jan-Feb-Mar 2024)

Page Name

Traffic to lead %

Archi Course Page

20%

Archi Landing Page

8.39%

CD Course Page

28.57%

CD Landing Page

16.46%

Civil Course Page

28.57%

Civil Landing Page

12.64%

Business context

The business aims to generate more leads by enhancing market penetration to boost brand visibility and increase user retention on blogs (lead generation then becomes a by-product of these efforts).


Developing a blogging strategy and aesthetics tailored for global consumption that appeal to international audiences.

 Initial Research | Blogs can help us in:

Building Brand Authority

& Trust

Expertise Showcasing

Blogs allow ed-tech companies to demonstrate their expertise and knowledge in specific subjects, building trust and authority in the industry.

Customer Confidence

High-quality, informative content can increase potential customers' confidence in choosing your services or products, directly influencing purchase decisions.

Thought Leadership

Sharing insights on education technology trends and innovation positions the startup as a thought leader, influencing both brand perception and attracting partnerships or investment opportunities, which can indirectly contribute to revenue.

User Segmentation

Curious beginners (ToFu)

This audience is likely unfamiliar with your core offerings and may have stumbled upon your blog while seeking general information. They require basic knowledge and awareness building.

Aspiring enthusiasts (MoFu)

Individuals in this group have a general interest in the topics related to your courses but aren’t deeply versed in the specifics. They are potential students who might be considering various learning paths.

Enthusiasts (BoFu)

This group is knowledgeable about the specific niche or features covered in your core courses. They are likely to be industry professionals or enthusiasts who have a good understanding of the subject matter.

Visitor Segments & Content Needs

User Type

Intent

TOFU ~ Individual seeking information about the AEC industry

Gather information about the AEC industry or learn about career paths in AEC.

MOFU ~ AEC professional

Gain insights into specific AEC topics or stay up-to-date on industry trends.

BOFU ~ Individual interested in enrolling in a course

Learn more about a specific course offering and determine if it's right for them.

Understanding the conversion funnel

⭐️ To summarise, Top of the funnel will generate more traffic and Bottom of the funnel will generate more conversions.

It also gives an insight into knowing what each audience segment wants and shaping your content around that is a much more effective approach.

Targeted Nudges: Tailoring Engagement for Diverse User Segments

ToFu

ToFu

Our top-of-the-funnel blogs aim to introduce potential customers to our brand and industry, offering valuable insights and sparking initial interest.

Our top-of-the-funnel blogs aim to introduce potential customers to our brand and industry, offering valuable insights and sparking initial interest.

MoFu

MoFu

Mid-funnel blogs focus on nurturing leads and guiding them towards making a decision. By providing more targeted information and addressing common pain points, we aim to move potential customers closer to conversion.

Mid-funnel blogs focus on nurturing leads and guiding them towards making a decision. By providing more targeted information and addressing common pain points, we aim to move potential customers closer to conversion.

BoFu

BoFu

Our bottom-of-the-funnel blogs are designed to convert highly engaged leads into customers. By offering persuasive content, exclusive offers, and a sense of urgency, we aim to close the deal and drive conversions.

Our bottom-of-the-funnel blogs are designed to convert highly engaged leads into customers. By offering persuasive content, exclusive offers, and a sense of urgency, we aim to close the deal and drive conversions.

Targeted Nudges: Tailoring Engagement for Diverse User Segments

Issues with Blogs v1 : Shortcomings of the old product

Issues with Blogs v1 : Shortcomings of the old product

Issues with Blogs v1 : Shortcomings of the old product

UX Issues

Multiple levels of navigation inside individual blog / category pages.

Navigation and categorisation issues - not mapped properly across all pages.

Text size (H1/H2) not distinguishable in certain blog pages.

Clash between similar blogs and related articles.

Current blog design is not optimised for mobile. (50% of the audience consumes our blogs on Mobile).

Technical Issues

Slow loading speed.

Search bar not discoverable.

Data Tracking

No data being tracked related to forms filled, clicks on CTAs, social shares, loading time etc.

JSON v/s Hubspot

It is majorly related to content updates but its effects trickle down to CRO, Design and Tracking:

Any changes related to CRO will need tech help apart from the overall HubSpot tech support.

Design is completely different from Hubspot blogs.

Tracking is limited because can't use UTM links in it.

Novatr Blogs v1

Novatr Blogs v1

Novatr Blogs v1

Current IA of blog web on Novatr.

Novatr Blogs V1, old designs.

Drag to see before & after.

Drag to see before & after.

📌 To note :

Overall, we focused more on content and value-delivery to build a trustworthy relationship with our users.


From design perspective, our primary aim was to make discovery and navigation of blogs as intuitive and seamless as possible. Visually, we wanted to keep the design simple yet not run-of-the-mill. As our design language had evolved over time, the core foundation and UI components were updated to be visually striking yet minimalist in aesthetic.

Industry best practices & Competitive Analysis Takeaways :

High quality images

Making index sticky

Making actions cards sticky

Actively promoting social sharing

Providing links to related articles within the content

Actively promoting social sharing

Progress indicator

Touchpoint for the user to access product offerings

Supporting content with infographics

Competitive benchmarking

Data dashboard requirements:

Tracking the right metrics is crucial for understanding the performance of blogs, gauging user engagement, and identifying areas for improvement.

Traffic

Metrics

Engagement

Metrics

SEO

Metrics

Conversion

Metrics

Content

Performance

Technical

Performance

User

Feedback

  • Page Views

  • Unique Visitors

  • Traffic Sources

  • Bounce Rate

  • Average Session Duration

  • Pages per Session

  • Email Subscribers

  • Search Clicks

  • Keyword Rankings

  • Backlinks

  • Organic Search Traffic

  • Conversion Rate

  • CTA Click-Through Rate

  • Top Performing Posts

  • Social Shares

  • Page Load Time

  • Mobile Usability

  • Upvotes

  • Comments

North Star Metric

For this project, the consensus was that our North Star Metric should be engagement rather than conversion at this point. Reasons:


  • If people find enough value in the content, conversion then becomes a by-product of customer engagement.

  • Engagement is a more direct metric to track for a content strategy like ours (Content Led) v/s Conversion, where you adapt various marketing strategies to sell a product (Content Oriented).

Diving into high-fidelity designs

Through a collaborative effort of brainstorming and iteration, we transitioned to designing high-fidelity screens for our blog platform.

Our initial designs encompassed the homepage, category pages, and templatising our three distinct blog categories i.e. ToFu, MoFu and BoFu.

Given the shortcomings of our legacy system, we meticulously charted a path for a smooth transition of our vast 400+ blog archive.

Home Page Iterations

To enhance the visual and international appeal of our blog platform, we conducted extensive homepage iterations. By exploring various color combinations and layouts, we sought to create a visually engaging and inclusive experience that captivated our readers worldwide.

Probable solutions & their impact:

Design led:

  • Templates & Navigation: Standardising blog design with 2-4 tested templates for a cohesive look and easy navigation. This might help us improve usability and reduce bounce rates.

  • Search & Progress Bar: Making search prominent for users to find specific content and add a progress bar to show completion rate, keeping users engaged with longer posts.

  • Interaction & CTAs: Fostering community with an interactive comment section and leveraging sticky CTAs to increase conversions by keeping calls to action visible as users scroll.

  • Custom Thumbnails (optional): Enhancing visual appeal with custom thumbnails that represent blog content and strengthening brand identity.

Beyond design:

  • Promoting blogs through our own social media channels like Instagram, LinkedIn.

  • Touchpoint for our other growth initiatives within blog space (i.e. career navigator etc.) to target ToFu & MoFu audience through product-led interventions.

  • Leverage email marketing to distribute latest posts to subscribers. Considering a regular newsletter that highlights top content, insights, and community highlights.

  • Social Media Engagement by using snippets, quotes, or questions to spark interest and discussion. Engage with followers by responding to comments and participating in relevant conversations.

  • Relooking at the “Learning Hub” space to include other organic traffic channels i.e. YouTube Videos, Media Room, E-Books etc. apart from blogs to establish trust and credibility for the brand.

📌 To note :

As with any 0 to 1 startup, experiments & campaigns run all the time so the design needed to be exhaustive and template based to ship in the lowest TAT and design involvement.

Hence the design was made with scalability in mind. The elements are designed in a way that can be reordered/modified from backend which reduces design dependency while still ensuring top of the line design quality and also have a quick learning curve for any person wanting to upload a blog through Hubspot.

Large Screen | Web

Typestyle

Typeface

Font Size

Line Height

Font Weight

Letter Spacing

Paragraph Spacing

Heading 1

Figtree

40

px

48

px

600

-2%

0px

Heading 2

Figtree

36

px

44

px

600

-2%

0px

Heading 3

Figtree

32

px

48

px

600

-2%

0px

Heading 4

Figtree

28

px

36

px

600

-2%

0px

Heading 5

Figtree

24

px

32

px

600

-2%

0px

Heading 6

Figtree

24

px

32

px

600

-2%

0px

Body for paragraph text

Source serif pro

20

px

28

px

400

0%

0px

Caption

Figtree

14

px

20

px

400

0%

0px

Small Screen | Mobile

Typestyle

Typeface

Font Size

Line Height

Font Weight

Letter Spacing

Paragraph Spacing

Heading 1

Figtree

28

px

36

px

600

-2%

0px

Heading 2

Figtree

24

px

32

px

600

-2%

0px

Heading 3

Figtree

22

px

32

px

600

-2%

0px

Heading 4

Figtree

20

px

28

px

600

-2%

0px

Heading 5

Figtree

18

px

28

px

600

-2%

0px

Heading 6

Figtree

18

px

28

px

600

-2%

0px

Body for paragraph text

Source serif pro

16

px

28

px

400

0%

0px

Caption

Figtree

12

px

16

px

400

0%

0px

Type, space & content guidelines

To ensure a cohesive and seamless user experience across all platforms, we worked to developed a comprehensive set of guidelines that govern typography, spacing, and content presentation on both our web and mobile interfaces.

These guidelines will serve as a foundation for maintaining consistency as our platform scales and evolves, ensuring a unified brand identity and a cohesive user experience.

📌 To note :

To revitalize our blog's visual identity, we embarked on a comprehensive redesign. Central to this transformation was the introduction of the elegant "Source Serif Pro" font, complementing our existing "Figtree" typeface. By carefully crafting new text styles, we aimed to create a more dynamic and visually appealing reading experience.

By establishing strict guidelines from day one, we gained speed and stability as we scaled the product, maintaining consistency and excellence at all times.

These guidelines being in place from day 1, helped us monumentally as it helped in maintaining consistency and reducing any communication gaps between design, tech and CRM team without loosing our core vision.

Desktop layout and spacing

Mobile layout and spacing

  • CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

  • CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

    CRO experiments to convert user to lead

Conversion Rate Optimization | Exploration and Experimentation

While our blogs serve as a cornerstone of organic revenue generation, we strategically implemented various conversion rate optimization (CRO) tactics to maximize their impact. By carefully crafting compelling calls to action, optimizing individual blog pages, and leveraging personalized content, we successfully transformed casual readers into engaged leads.

How did we measure the success of this feature?

  • Standardised templates ensured consistent brand language across all blog posts, fostering a cohesive brand identity.


  • The new CMS empowered the marketing team to upload content directly through HubSpot, eliminating tech dependence and saving valuable time and resources.

  • User engagement increased, with readers scrolling 40% deeper, indicating a significant rise in content consumption.


  • The new strategy led to a significant growth in conversions on blog pages, highlighting the positive impact on lead generation.

  • Standardised templates ensured consistent brand language across all blog posts, fostering a cohesive brand identity.


  • The new CMS empowered the marketing team to upload content directly through HubSpot, eliminating tech dependence and saving valuable time and resources.

  • User engagement increased, with readers scrolling 40% deeper, indicating a significant rise in content consumption.


  • The new strategy led to a significant growth in conversions on blog pages, highlighting the positive impact on lead generation.

  • Standardised templates ensured consistent brand language across all blog posts, fostering a cohesive brand identity.


  • The new CMS empowered the marketing team to upload content directly through HubSpot, eliminating tech dependence and saving valuable time and resources.


  • User engagement increased, with readers scrolling 40% deeper, indicating a significant rise in content consumption.

  • The new strategy led to a significant growth in conversions on blog pages, highlighting the positive impact on lead generation.

Next steps for the project :

  • Implementing an editable Content Management System (CMS) that empowers the team to create, edit, and publish blog content with greater ease. This will help us ensure efficiency and streamline the content creation process.


  • Establishing clear writing and editing guidelines to ensure consistency in tone and quality across all blog posts.


  • Creating customised thumbnails for each blog post to increase visual appeal and entice readers to click through.


  • Incorporating more infographics into blog posts to improve reader comprehension and knowledge retention.

Next steps for the project :

  • Implementing an editable Content Management System (CMS) that empowers the team to create, edit, and publish blog content with greater ease. This will help us ensure efficiency and streamline the content creation process.


  • Establishing clear writing and editing guidelines to ensure consistency in tone and quality across all blog posts.


  • Creating customised thumbnails for each blog post to increase visual appeal and entice readers to click through.


  • Incorporating more infographics into blog posts to improve reader comprehension and knowledge retention.

Closing thought

The redesign of the Novatr blog web serves as a successful cross-functional collaboration between design, marketing, and CRM. By prioritising a consistent brand identity, flexible content management, and user-centric design, we’ve positioned our blogs to continue to educate and inspire learners, propelling us ahead of the curve.

Other references:

Thank you for reading! 🖤

Thank you for reading! 🖤

Thank you for reading! 🖤

  • Let's work together!

Reach out to me via :

Friday, January 10, 2025

©

advitiya / portfolio'2024

6:34:52 AM

  • Let's work together!

Reach out to me via :

Friday, January 10, 2025

©

advitiya / portfolio'2024

6:34:52 AM

  • Let's work together!

Reach out to me via :

Friday, January 10, 2025

©

advitiya / portfolio'2024

6:34:52 AM