liv.rent blog

liv.rent blog redesign

I took on the challenge of completely redesigning and revamping liv.rent's outdated blog, breathing new life into it with a fresh and cohesive look. Although the design system had not yet been implemented on the blog, I meticulously incorporated our standardized design tokens and formed the foundation of the new website.

To enhance the user experience, I optimized the website for smaller screens and improved its speed. I also leveraged my CSS and JavaScript skills to introduce custom elements, adding a touch of uniqueness to the WordPress platform. The end result is a visually stunning and highly functional blog that seamlessly integrates with the liv.rent ecosystem.

In addition to my extensive redesign efforts, I meticulously crafted a comprehensive deployment plan for liv.rent's blog revamp. We prioritized the website's stability and reliability by implementing backup measures and conducting thorough testing at every stage. By adhering to this detailed deployment plan, I successfully launched the redesigned blog without a hitch, providing liv.rent with a seamless and error-free user experience.

role

UX/UI Designer
Full Stack Developer

tools

FigJam
Figma
Wordpress
CSS
Javascript/JQuery
PHP

timeline

3 months

the challenge

The existing liv.rent/blog presented a host of challenges that needed addressing. It exhibited a lack of consistency with the liv.rent design system, suffered from inadequate padding, inconsistent font usage, and an overall uninspiring visual appeal. Moreover, the absence of organized categories and subcategories led to confusing navigation, making it difficult for users to locate relevant content. The homepage failed to captivate users' attention and encourage exploration. The goal of this UX redesign project was to overhaul the entire liv.rent/blog, from wireframing and prototyping to development and optimization, in order to create an engaging, user-friendly, and visually cohesive platform.

We wanted a solution that would:
‍
-> Design System Alignment: Ensure blog redesign adheres to liv.rent's design system, reinforcing brand identity
‍
-> Enhanced Visual Appeal: Create a visually engaging design reflecting liv.rent's modern image
‍
-> Consistency Improvement: Address font and padding issues for a uniform and polished look
‍
-> Streamlined Navigation: Organize content into clear categories for seamless exploration
‍
-> Captivating Homepage: Design an enticing, informative homepage showcasing key content

key takeaways

-> Confusing Dual Navigation: The double navigation system hinders clear content hierarchy and confuses users.

-> Inconsistent Padding: The lack of uniform padding disrupts visual consistency and readability.

-> Unengaging Hero Section: The plain hero section fails to capture user interest effectively.

-> Long, Plain Content: Unformatted lengthy content can lead to user disinterest and shorter time on page.

-> Distracting Sidebar:
A cluttered sidebar diverts focus from the main content, lowering engagement.

-> Inconsistent Button Styles:
Varying button designs confuse users, reducing click-through rates.

sitemap & low fidelity

During the wireframing phase, meticulous attention was given to organizing categories and subcategories seamlessly into a unified navigation structure. This ensured that users could effortlessly navigate through content, fostering a smoother user experience. The UX team creatively experimented with diverse layouts, incorporating unique elements like subscription forms and interactive polls. This process allowed us to visualize the user journey, optimizing both information architecture and engagement opportunities.

Effortless Design Consistency and Content Styling: A Unified Approach

Integrating the design system into the backend CMS was pivotal. Global colors, typography, padding, and margins were meticulously aligned, ensuring a cohesive visual identity across the platform. By crafting standardized components—such as primary and secondary buttons, image styles, and hover states—we established a uniform user experience site-wide. This meticulous implementation fosters a seamless and harmonious interaction between design and functionality, reinforcing brand consistency and user engagement.

Simplifying tasks for our marketing team, I implemented an automated styling mechanism for newly added blogs and content. By seamlessly integrating design system tokens on the backend, all content effortlessly adheres to our established design guidelines. This automation ensures uniform styling across the board, eliminating the need for manual adjustments. Additionally, I introduced global components within the CMS, empowering the placement of CTAs, newsletter sign-ups, buttons, and various sections anywhere in the blog. This strategic implementation guarantees consistent visual elements, enhancing user engagement and reinforcing a coherent and visually pleasing blog experience.

addressing the challenges

-> Strategic Navigation Enhancements
Placing the top bar on the right, a familiar spot for external links, aligns with user expectations. This offers efficient access and reduces cognitive load. The dropdown approach in the main navigation simplifies content discovery, enhancing engagement. These choices leverage familiarity and hierarchy, contributing to a smoother, more intuitive user experience.

-> Enhancing UX with Read Time Tags
Recognizing digital challenges in displaying article length, I introduced read time tags to our liv.rent blog posts. Unlike traditional metrics such as page or word count, which vary across devices and reading speeds, read time provides a consistent measure. This aligns with design principles, offering a clear and universally understood indication of article length. Our commitment to user-centric design and responsiveness is reinforced through this approach.

-> Tailored Category Sections
This approach ensures fresh visual layouts as users explore sections, preventing monotony and sustaining engagement. Varied styles, including thumbnails, icons, and content arrangements, add visual diversity and help users swiftly find preferred content. This aligns with UX principles, catering to user preferences while maintaining coherence for a dynamic and captivating homepage.

In a collaborative effort with the marketing team, I delved into addressing challenges on the blog page. Through productive discussions, we identified pain points and devised solutions that catered to both UX and SEO requirements. By combining UX research findings with SEO optimization strategies, we revamped the blog layout to enhance readability, navigation, and content discoverability. This collaborative approach not only improved user experience but also bolstered the blog's search engine visibility, aligning with our goal of delivering a holistic and impactful online presence.

redesign impact on key metrics

The comprehensive redesign yielded remarkable results for liv.rent/blog and its subdomains. Notably, there was a substantial 32.26% surge in organic traffic. The bounce rate, a critical metric, witnessed a notable reduction from 68% to 53% within three months, highlighting improved user engagement. Impressively, impressions surged by 50%, signifying increased visibility and traction. The redesign's effectiveness is further underscored by a significant 100% surge in keywords, showcasing enhanced search engine optimization.

optimization

prototype

view figma prototype

view production