Leveraging analytics and user testing to enhance engagement, reduce complexity, and ensure design cohesion.
Project Overview
The Buick site redesign project aimed to enhance the overall user experience while ensuring the website accurately reflected Buick's latest branding and vehicle offerings. This project addressed navigational complexities, streamlined user interactions by minimizing call-to-action buttons (CTAs), and comprehensively presented information. Another key focus was maintaining a consistent UI across the website by implementing a design system.
My Role
As a Senior Experience Designer, I led the design efforts, collaborating closely with a Senior Art Director under the strategic guidance of the VP of Experience Design. My responsibilities included:
Implementing the design from initial concepts.
Integrating Buick's brand identity.
Creating a design system.
Mockups.
Prototyping for User Testing.
Tools and Methodology Used
The project leveraged a suite of design tools and methodologies to ensure a robust design process and outcome:
Axure RP: Used to build interactive prototypes to test and refine design concepts.
Sketch: Employed for high-fidelity UI design creation.
Invision: Facilitated collaboration, feedback, and design system management.
Site Analytics: Leveraged to gather insights from the existing site's performance, identifying areas for improvement and understanding user behavior patterns.
User Testing: Implemented to validate design decisions, gather user feedback, and iterate on the designs to enhance usability and effectiveness.
Approach
The project started with initial insights, including quantitative data from internal teams and qualitative insights from previous user testing sessions on related sites. This dual approach allowed us to pinpoint critical user pain points and establish a data-driven foundation for the redesign.
Analytics Findings
The ongoing analytic reports of the existing Buick.com site presented several challenges that could have improved optimal user experience. Addressing these issues during the redesign was crucial to improving site usability and enhancing user satisfaction with the updated Buick site experience.
CTA Overload: Many calls to action confused users and diluted the decision-making process.
Inconsistent UI: The lack of a unified design system led to a disjointed visual and interactive experience, undermining the brand's identity and user trust.
Navigational Complexity: Users found it difficult to locate information quickly due to a convoluted menu structure.
Findings From Other GM Brand Site Testing
Through collaborative conversations with other design teams of GM brand sites such as Chevy, Cadillac, and GMC, we identified key trends that could aid in improving the Buick site redesign. Chevrolet, which our sister agency recently redesigned, was perceived as an improvement in user experience over the current live Chevrolet site for its navigation, Homepage, and Model Overview page updates.
Readability was a significant concern among existing sites, given that these sites utilized small text that did not meet ADA compliance standards and were text-abundant regarding information.
Users favored designs perceived for cleanliness and openness, noting quicker access to crucial information and finding the page lengths necessary.
Areas identified for refinement included confusion among existing sites, Model Overview pages and secondary navigation menus, and the need for straightforward navigation between vehicle model years.
Design System Creation
Initial wireframes established the site's structure, emphasizing improved navigation and content organization. In parallel, we developed a comprehensive design system to maintain UI consistency, ensuring a unified design throughout the website. Agile design sprints allowed for iterative layouts, mockups, and component development using Sketch and Invision. This process ensured effective collaboration and smooth handoffs to the development team.
User Testing & Prototyping
Desktop Prototype
Mobile Prototype
User Testing Findings
Usability testing revealed positive feedback for its clean, straightforward design and intuitive navigation. Users found the length and amount of information appropriate and well-organized. The footer, in particular, garnered significant interaction, indicating its importance in user information gathering. Overall, testing showed only minor, individual issues rather than systemic flaws. Interestingly, preferences varied among different age groups, reflecting the subjective nature of design perception.
The testers deemed page length and information volume suitable.
The site's organization facilitated easy navigation and content discovery.
Positive feedback on the font and layout.
Users described the site's look and feel as clean, fresh, visually appealing, and with good imagery.
CTAs, especially those in orange, were practical and easily understood by users.
The "Chat Now" feature received a neutral response, with its visibility more pronounced on the desktop than mobile.
Carousel vs. Non-Carousel Masthead layouts had mixed impacts on the content below, notably the visibility of "awards" content.
Main Navigation was well-received, but the 'More' option for the Mobile menu needed to be more intuitive.
Vehicle Offers "Ex: 20% discount" were noticed but needed a more straightforward presentation.
Vehicle availability and segment navigation need to be more prominent.
These findings allowed us to make additional tweaks to finalize the site design.
Conclusion
The Buick.com redesign successfully addressed the initial challenges, offering an enhanced user experience characterized by intuitive navigation, streamlined CTAs, and a consistent visual identity aligned with Buick's branding. Reflecting on the project, the critical role of taking user feedback into the design process early on was evident, highlighting the potential for even more significant improvements through more extensive user testing and feedback integration throughout the design process.