The Process
Research + UX
During the UX and research stage of the website design, 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 objective during this initial phase was to curate 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 embarked on developing a comprehensive design system and style guide that served as the foundation for consistent visual elements, including components, colors, and typography.
To cultivate an atmosphere of relaxation and trustworthiness, I carefully selected a palette of blue tones, complemented by light pastel colors. When it came to typography, I opted for modern and crisp sans-serif fonts that maintain their clarity across various screen sizes. Informed by competitor analysis, it became evident that sans-serif fonts aligned best with the product's nature. The design system was meticulously constructed within the Figma platform, facilitating seamless collaboration and implementation.
UI Design
Drawing insights from the moodboards and user testing conducted, it became evident that users had a strong inclination towards a design that embodied modernity while exuding a sense of playfulness and organicity. To align with this preference, I crafted mobile and desktop mockups for each screen, ensuring a cohesive visual experience.
Throughout the design, an abundance of fluid and organic shapes were thoughtfully integrated, harmonizing seamlessly with the light color palette. This design direction deviates from the conventional norms within this vertical, making it all the more gratifying for me to conceptualize and implement.
To meet the highest standards of inclusivity, all font choices and color combinations underwent rigorous testing to ensure compliance with WCAG AA (Web Content Accessibility Guidelines) contrast requirements. I'm delighted to report that the design successfully surpassed these accessibility tests, achieving outstanding results.
Regarding the article page, recognized as the site's most critical component, great emphasis was placed on presenting a clean and uncluttered layout. Our primary objective was to accentuate the content, ensuring each article is effortlessly readable and highly engaging for users, promoting seamless interaction.
Front-End Development
I provided support to the development team by seamlessly transforming my mockups into an optimized and streamlined WordPress theme.
At this stage, my responsibilities encompassed constructing the HTML markup, SCSS styling, JavaScript implementation, and occasionally delving into PHP (although PHP is not my primary expertise). 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. These guidelines included employing the BEM (Block-Element-Modifier) naming convention for SCSS, establishing preferred formatting conventions, and prioritizing the use of modern CSS techniques, such as CSS grid layout and custom properties. My aim was to keep the CSS codebase minimal, less restrictive, and easily maintainable, without relying on third-party libraries.
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. To ensure a seamless user experience across multiple platforms, I conducted thorough cross-browser testing on the latest two versions of major mobile and desktop browsers.
