Costco Auto Program


Costco Wholesale’s automotive sales program.


Company:

Affinity Development Group

Project Dates:

June 2023 - Ongoing

Project Type:

Vehicle Sales & Management

Laying a Foundation

Understanding the user


My primary focus coming into the world of Costco Auto was gaining an initial understanding of their primary users.

Learning the motivations behind their actions and end goals allows me to shape my future designs with their ideals in mind.

Data Analysis & Personification


Due to the high traffic to Costco Auto Program’s site, I was able to utilize several different data collection tools to form some baseline analytics on user age, location, and device type.

I used heatmaps and session recordings to learn more how users interacted with the site and what exactly they were set out to accomplish.

Addressing Challenges


A new challenge arose at Costco Auto - learning to utilize the numerous teams effectively. I adapted by tailoring my approach—using clear specs for IT, collaborative reviews with the copy team, and aligning closely with our Ops team to understand business goals.

A New Process

Establishing Workflow

Learning how to navigate the layers of communication and team protocol was one of my biggest challenges at Costco Auto Program. I was forced into adapting my current work environment and create a new workflow that would allow design projects to flow smoothly while still reaching all the eyes they needed to.

Planning the future

There were a lot of big projects I took on at Costco Auto Program, and so it was essential to map out how I would plan on tackling them. The one shown is the main site redesign, which was uniquely challenging and required some out of the box thinking from me!

Projects & Solutions

Cards!

Througout my time at Costco Auto, I was always focused on desktop designs that were responsive on mobile, since they made up a majority of our userbase. I’m going to be showing you all desktop designs moving forward, so just keep that thought in mind.

I also really, really like cards for this. I can condense information into a way that’s digestible and easily translates into a reactive format and can be displayed on tablets, phones, and computers and still delivers it’s message.

CAP Site Redesign

Thankfully, the time I put into my process gave me the opportunity to push my redesigns through the labriynth of approvals required, giving our site a much-needed refresh.

A touch of modern design

The site’s visual design language was refreshed to align with modern UI standards, focusing on improved spacing, refined typography, updated color palettes, and streamlined components. These updates brought a more cohesive and accessible experience while elevating the overall aesthetic and usability across the platform.

Made for every situation

One of my first additions was introducing a highly requested dark mode feature to enhance accessibility and overall visual clarity.

I led the design process from research through implementation, ensuring visual consistency, performance, and seamless user experience across devices. The feature boosted engagement and demonstrated the team's commitment to user-centered improvements.

Audi Microsite

Our first microsite partner, Costco Auto wanted us to come out of the door swinging. To me, that meant a design that told Audi we meant business. (literally!)

A new way to get around.

With a broad fleet of models, Audi required a navigation bar that made it easy for users to quickly find their vehicle while also aligning with a key goal: highlighting electric vehicles. The design balanced clarity, scalability, and brand priorities to support both exploration and strategic messaging. This improved user flow and made it easier for visitors to explore the full range of vehicles.

Highlighting the details.

I designed a way to highlight our promotional prices for Audi’s model pages. Using color and boxes (who doesn’t love boxes?) to help users recognize their CAP member incentives, following over from the last page.

Electric Vehicles Landing Page

The EV site project has since evolved to larger proportions encompassing so much more behavior, but I like taking a look back at its humble beginnings. As my first project at Costco Auto, it was my way of defining the direction I wanted to take the company on.

A bright future

The EV landing page was themed to evoke a sense of innovation and sustainability, blending futuristic design with organic elements and clean UI.

This approach reinforced Costco Auto’s vision for a modern, electric future.

All you can read

I opted for a carousel to efficiently showcase a wide range of EV content, making it easy for users to browse and discover relevant information.

The carousel features intuitive navigation, clear hierarchy, and engaging visuals to keep users informed and connected without overwhelming the page.

This design enhanced content accessibility and encouraged deeper exploration of electric vehicle topics.

Communicating via Design

With new ideas comes the inevitable miscommunication, something I actively tried to avoid with my communication skills, but sometimes pictures just work better than words. I made numerous diagrams such as these to help our development team understand what I’m thinking and hopefully make their jobs just a bit easier.

And so much more!

I haven’t been able to get everything I’ve been working on over the past two years over from Costco Auto, but this case study encapsulates my methodology and results from that time until now. If you have any questions or want to know more, please feel free to reach out.

“True simplicity is, well, you just keep on going and going until you get to the point where you go, ‘Yeah, well, of course.’ Where there’s no rational alternative.”

- John Ivy

Previous
Previous

Moodyboard