top of page

Seamless Consumer Experience:
Checkout

SCE Banner_Mockup.png
Anchor 1

Team

Seamless Consumer Experience at Autosync

Duration

5 Months

Tools

Figma

Miro

Confluence

Methodology

Agile

Scrum

My Role

Design Lead

This project was undertaken by my Seamless Consumer Experience Team and is part of our 18-month plan to redesign the seamless cross-platform experience. As a member of the team, I was specifically assigned to conduct research for this project.

​

  • Managing and conducting user research and concept development

  • Working closely with marketing and product management teams to identify research topics

  • Collaborating with design, product management, content strategy, engineering, and marketing teams

  • Participating in recruitment activities for user research

  • Planning and implementing the overall user research strategy and methods

  • Mockup, prototype, and concept delivery

This project marks the beginning of Autosync's comprehensive 18-month plan to significantly improve the smooth and uninterrupted cross-platform experience for its users. The dedicated Product team has conducted a thorough analysis and identified the pressing issue of data inconsistency as a top priority to address. At present, users often face challenges and experience unreliability when navigating across multiple platforms. The primary objective is to tackle this problem head-on by devising a unified header and footer that seamlessly integrates all platforms, thereby fortifying the brand's presence and guaranteeing users a cohesive and harmonious experience throughout their interactions with Autosync's products and services.

Objectives

Our Strategy

I began by collecting all the headers within the TAdvantage ecosystem. This involved gathering a list of over 100 dealerships, which also provided me with more than 50 templates. Next, I organized the information displayed in these headers and grouped them based on common data. Using this approach, I created a list of the data that we need to highlight in the new design:

​

  1. Quick Links

    1. Inventory

    2. Book Service

    3. About Us

  2. Hours of Operation

    1. Sales

    2. Service

    3. Parts

  3. Address

  4. Terms & Conditions

  5. Privacy Policy

  6. Social Media

​

Using this list, I began crafting different headers that could accommodate this data in various ways. After examining the existing examples, I noticed that most headers displayed all available data upfront, without hiding any numbers or utilizing drop-downs or quick links for accessing other information. I recognized the value in creating a template that leveraged existing patterns to ease the concerns of dealerships who preferred their current headers and didn't want to stray too far from what they were familiar with. Building upon this insight, I brainstormed three different approaches for this template. The first approach would involve an information dump, providing everything the user needs to know. However, I knew I couldn't go any bigger than that, so I started grouping items together to determine what could be hidden, rearranged, or retained. After careful consideration, I identified the following categories as a starting point:

​

  1. User-related information: login, my vehicles

  2. Dealership information: address, contacts, logo(s)

  3. Promotional information: CTA's, seasonal deals

  4. Legalities: Language Toggle

 

These groups influenced my layout design and allowed for easy scanning of information and dropdown menus in the headers.

​

Innovation

Currently, we lack control over the design of dealer websites and OEMs. This inconsistency in the cross-platform experience forces consumers to switch between products, disrupting the overall user experience. To address this, we have identified banners as an element we can control to create a sense of familiarity and reassure users that they are still within our experience.

 

I proposed a template-based approach to tackle this issue. Currently, headers can be customized by dealers, resulting in over 50 different templates. By reducing this number to three templates, we strike a balance between providing customization options for dealers and maintaining control over our brand usage. I have emphasized the importance of Autosync Design establishing guidelines rather than blindly accommodating every client request. Having clear guidelines is crucial for preserving the quality of our product and positioning Autosync as a design-first company.

Elegance, Clarity & Emotion

Elegance, Clarity
&
Emotion

Once I identified the different sections for the new headers, I started with the first approach of including all necessary information in the header. I began by showing only the category sections, condensing the information as much as possible to create a minimal header. This allowed consumers to focus on the page content without being overwhelmed by excessive information. However, I realized this approach was too comprehensive.

 

Moving on to the second concept, I aimed for a balance between the first and last approaches. This concept served as a template that could be customized to match the desired information dealers wanted to display. I provided clear guidelines on the type of information to be included in each header, including logo sizes, copy regulations, and design guidelines. By establishing clear guidelines, we aimed to enhance the quality of our experience and product.

Although dealers have the freedom to design their websites according to their preferences, we recognized the importance of delivering a header that aligned with Autosync's design approach. Thus, we focused on creating a header that accurately represented our design principles.

Impact

ADD IT FROM SPEC DOC​

to create a cutting-edge and engaging experience that leverages a substantial amount of data

The aim was to ensure that this experience is accessible and usable across over 150 different platforms. However, we faced significant challenges during the development process. Our main focus was on refining the core experience from the ground up.

 

One of the major hurdles we faced was the lack of ownership of our data. This created obstacles in accessing dynamic images, compatible protection plans, and available vehicle colors. To address this, we implemented a modular step flow and conflict-solving modals. Additionally, we collaborated with a third party to gain access to higher-quality images.

​

Looking ahead, we are excited and eagerly preparing for the launch of this cutting-edge experience in early 2024. This project marks a pivotal first step in redefining the direction of Autosync. Our goal is to pivot towards a modern, design-first, cross-platform experience that extends across Canada in the world of motocommerce.

bottom of page