The Process
The Problem
System1's premium auto vertical, CarsGenius, required a new content site to boost advertising revenue. The CarsGenius brand previously had a subpar design and visitor experience, so a complete design overhaul would be needed for the new content site.
Goals
- Establish a high-quality content site: Create a dedicated website for informative, high-quality articles to engage users and provide valuable industry-related content.
- Enhance the user experience: Craft a fresh, innovative design that not only prioritizes user experience but also incorporates intuitive interfaces and interactive elements, ensuring higher engagement and satisfaction for visitors.
- Optimize ad click-through: Strategically encourage user interaction with advertisements within article pages to improve ad click-through rates and monetization opportunities.
Research + UX
During the UX and research stage of this project, our team collaborated closely with stakeholders to conduct comprehensive research. This involved identifying our target audience, analyzing competitor landscapes, and determining the most effective layout strategies.
My primary objectives during this initial phase were to create lo-fidelity wireframes, moodboards showcasing a diverse range of aesthetics, and conducting A/B tests to evaluate various early design concepts.
Design System
As the dedicated UI designer overseeing CarsGenius, I developed a comprehensive design system and style guide that served as the foundation for consistent visual elements, including components, colors, and typography.
UI Design
Drawing insights from the moodboards and user testing conducted, it became evident that users had a strong inclination towards a design that was modern, playful and organic. This design direction deviates from the conventional norms within this vertical, making it a very unique project to work on.
Throughout the design, an abundance of fluid and organic shapes were integrated, which harmonize well with the light color palette.
To meet the highest standards of inclusivity, all font choices and color combinations underwent testing to ensure compliance with WCAG AA (Web Content Accessibility Guidelines) contrast requirements.
The article page on CarsGenius is the site's most critical component, and great emphasis was placed on presenting a clean and uncluttered layout.
Front-End Development
I provided support to the development team by transforming my mockups into an optimized and streamlined WordPress theme.
My responsibilities encompassed constructing the HTML markup, SCSS styling, and any interactions with JavaScript. To ensure consistency and adherence to best practices, I formulated a comprehensive set of markup and CSS guidelines that served as a reference for every developer involved.
Accessibility was a core consideration throughout the development process. I incorporated accessible markup, accommodating features such as keyboard focus support, compatibility with screen readers, and rigorous color contrast tests. Cross-browser testing was done on the latest two versions of major mobile and desktop browsers.
Outcome
- Enhanced user experience: Users reported high satisfaction with the site's usability, resulting in increased time spent on pages and reduced bounce rates.
- Visual appeal: The modernized appearance attracted more visitors and positively influenced brand perception, improving credibility.
- Engagement: CarsGenius garnered significant traffic (1,000,000+ monthly visits via paid and organic traffic!), with users actively engaging articles and the advertising throughout.