Uttertale

Landing Page Redesign to Drive User Engagement

Landing Page Redesign to Drive User Engagement

Project Details

Project Details

Timeline: 1 week

Customer: Uttertale

Industry: Media

Tools Used: Figma, Notion

Timeline: 2 weeks

Type: Client Project

Industry: Media

Tools Used: Figma, Notion


My Team

My Team

Me (UX Designer, UI Designer, UX Writer)

Nitin Gaur (Design Lead)

Rishu Singh (Co-founder)

Aman (Front-end Developer)
Pranit (Back-end Developer)

Problem

Problem

The existing look of the landing page failed to effectively convey the true value of the product, and it lacked the ability to engage users. There was also a need to reduce the page loading time, to improve search engine rankings and user satisfaction.

Solution

Solution

I boosted product visibility by refining both the copy and visual aesthetics of the landing page for a more compelling representation of the product to drive user engagement. In the process, I also reduced page loading time by 27%.

About the Customer

Uttertale is a platform that aims to help businesses grow by connecting them to verified content publishers. Its goal is to build a community to bolster collaboration and to promote innovation in the industry.

Uttertale is looking to launch soon, and I came along to support their design needs by providing a significant visual boost to their landing page and reducing page loading time in an effort to improve customer conversion rates.


Uttertale is looking to launch soon, and I came along to support their design needs by providing a significant visual boost to their landing page in an effort to improve customer conversion rates.

Uttertale is looking to launch soon, and I came along to support their design needs by providing a significant visual boost to their landing page and reducing page loading time in an effort to improve customer conversion rates.

A well-designed landing page should communicate the product's unique value proposition, and compel its users to delve deeper into its offerings. This is crucial as it significantly impacts customer conversion rates.

A well-designed landing page should communicate the product's unique value proposition, and compel its users to delve deeper into its offerings.

This is crucial as it significantly impacts customer conversion rates.

A well-designed landing page should communicate the product's unique value proposition, and compel its users to delve deeper into its offerings. This is crucial as it significantly impacts customer conversion rates.


Opportunities for Improvement

Opportunities for Improvement

UX Analysis of Other SaaS Product Pages

UX Analysis of Other SaaS Product Pages

The first step was to gain an understanding of the company’s mission and values to align the redesign with its overall brand.


Next, I conducted a competitive UX analysis to identify standard practices in the market. For this, I looked at 6 other SaaS product companies, and particularly focused on their design elements, navigation structure and content presentation.

Key Insights

1

Hero section with a clear value proposition to communicate how the product solves user’s needs

1

Hero section with a clear value proposition to communicate how the product solves user’s needs

2

Screenshots of product with features highlighted to demonstrate the unique value proposition

2

Screenshots of product with features highlighted to demonstrate the unique value proposition

3

Social Proof to build trust and authority with users

3

Social Proof to build trust and authority with users

The Power of Good Copy

The Power of Good Copy

Users tend to scan rather than read every word. Therefore, it's important to craft impactful copy that captures their attention and conveys the key messages effectively.


In the hero section, instead of the headline simply describing what the product does, it’s beneficial to showcase how users can benefit from it. Highlighting the value proposition and communicating why your product is the right choice for them can create a huge impact.


Ideally, the headline should address two key user questions:

"What am I getting out of this?" and "Why do I care?"


Ideally, the headline should address two key user questions:

"What am I getting out of this?" and "Why do I care?"


Ideally, the headline should address two key user questions:

"What am I getting out of this?" and "Why do I care?"

For the features section, to make information easily comprehendible, I condensed the bulky text into concise and impactful sentences.

I also changed the font from Roc Grotesk to Poppins. The impact was two-fold:

  • Poppins is a more screen-friendly font, allowing for better pixel rendering and legibility

  • Using Poppins throughout reduces the possibility of parallel loading, hence reducing page loading time

Engaging Visuals

Engaging Visuals

It was crucial to choose visuals that conveyed the concept of "community". I opted for illustrations featuring people actively participating in discussions, collaborations, and engagements to create an inviting atmosphere of a connected community, that would in turn reinforce the message for users.


I ensured that the colors of the illustrations aligned with the brand colors throughout the website.

I purposefully opted for SVG illustrations due to their smaller file sizes in comparison to JPEG, resulting in quicker loading times. Moreover, SVG images offer the advantage of being scalable to any size without compromising quality, making them ideal for responsive design.

Measuring Success

While I did not have the opportunity to conduct testing at this stage, the next steps would involve A/B Testing and Qualitative Studies to ensure the creation of a strong user experience.

  • A/B Testing can help to answer if the majority of the conversions are happening at the beginning or ending of the landing page. This can shed light on the need for refinements in the hero section to enhance its descriptive nature.

  • Conducting qualitative studies can provide insights into user comprehension of the product's value proposition and the effectiveness of feature explanations.

Enhancements for v2

To further enhance the website, it would be great to


  1. Include Animations: To highlight key features and to showcase user interactions

  2. Include Testimonials (After release of MVP): To instill a sense of credibility amongst users

What this Redesign Taught Me

  1. The Importance of Constant Communication and Collaboration with Developers: Frequent calls and detailed explanations were necessary to ensure a smooth translation from design to development.


  2. Responsive Design Considerations: Designing for different laptop, mobile and tablet sizes and ensuring responsiveness across various devices was a significant challenge. It required us to conduct frequent testing on different screen sizes and resolutions.


Landing Page Final Redesign - Before and After


Landing Page Final Redesign

Measuring Success

While I did not have the opportunity to conduct user testing at this stage, the next steps would involve Qualitative Studies to answer the following:

  • To see if majority of the conversions are happening at the beginning or ending of the landing page. This can shed light on the need for refinements in the hero section to enhance its descriptive nature.

  • To gain insights into user comprehension of the product's value proposition and the effectiveness of feature explanations.


Testing the new design also resulted in a 27% reduction in page loading time. Yay!

Enhancements for v2

To further enhance the website, it would be great to


  1. Include Animations: To highlight key features and to showcase user interactions with the product

  2. Include Testimonials (After release of MVP): To instill a sense of credibility amongst users

What this Redesign Taught Me

  1. The Importance of Constant Communication and Collaboration with Developers: Frequent calls and detailed explanations were necessary to ensure a smooth translation from design to development.


  2. Responsive Design Considerations: Designing for different laptop, mobile and tablet sizes and ensuring responsiveness across various devices was a significant challenge. It required us to conduct frequent testing on different screen sizes and resolutions.

© 2023 Meenakshi Shyamsundar

© 2023 Meenakshi Shyamsundar

© 2023 Meenakshi Shyamsundar