Uttertale
Me (UX Designer, UI Designer, UX Writer)
Nitin Gaur (Design Lead)
Rishu Singh (Co-founder)
Aman (Front-end Developer)
Pranit (Back-end Developer)
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.
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%.
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
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.
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
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.
