Costco Auto Program
Costco Auto Program
Costco Auto Program
June 2023 – January 2026
June 2023 – January 2026
Automotive E-Commerce
Automotive E-Commerce
Affinity Development Group
Affinity Development Group
Costco Wholesale’s automotive sales program.
Costco Wholesale’s automotive sales program.
Costco Wholesale’s automotive sales program.
01 — Research
Laying a Foundation
Laying a Foundation
Laying a Foundation
the real user(s)!
Understanding the user
Understanding the user
My primary focus coming into the world of Costco Auto was gaining an initial understanding of their primary users.
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 let me shape every design around what they cared about.
Learning the motivations behind their actions and end goals let me shape every design around what they cared about.
Data Analysis & Personification
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.
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.
I used heatmaps and session recordings to learn more how users interacted with the site and what exactly they were set out to accomplish.
MEMBER BASELINES
Age
Who’s shopping
Location
Where they’re shopping from
Device
How they’re shopping
Desktop
Mobile
Tablet
MEMBER BASELINES
Age
Who’s shopping
Location
Where they’re shopping from
Device
How they’re shopping
Desktop
Mobile
Tablet
MEMBER BASELINES
Age
Who’s shopping
Location
Where they’re shopping from
Device
How they’re shopping
Desktop
Mobile
Tablet
HEATMAPS & SESSION RECORDINGS
▶
0:00
3:12
HEATMAPS & SESSION RECORDINGS
▶
0:00
3:12
HEATMAPS & SESSION RECORDINGS
▶
0:00
3:12
IT
Clear specs / handoff
IT
Clear specs / handoff
Copy
Content Accuracy
Ops
Business alignment
Ops
Business alignment
Addressing Challenges
Addressing Challenges
A new challenge arose at Costco Auto - learning to utilize the numerous teams effectively.
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.
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.
02 — Process
A New Process
A New Process
A New Process
Establishing Workflow
Establishing Workflow
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.
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.
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.
Research
Initial Prototype
Testing (if needed)
Finalized Prototype
IT/Ops User Story Review
Initial Review (w/ Stakeholder)
Update Prototype
Secondary Review (w/ Stakeholder)
Final Review (w/ Leadership)
IT/Ops Dev Review
Finalize Prototype & Handoff
(if necessary)
Research
Research
Prototype
Prototype
Testing
Testing
Reviews
Reviews
IT/Ops
IT/Ops
Handoff
Handoff
Planning the Future
Planning the Future
Planning the Future
Redesigning a live site one page at a time usually leaves you with an amalgamation; half the pages look brand new, the other half look like they never got the memo. So I split the work into two passes.
Redesigning a live site one page at a time usually leaves you with an amalgamation; half the pages look brand new, the other half look like they never got the memo. So I split the work into two passes.
Redesigning a live site one page at a time usually leaves you with an amalgamation; half the pages look brand new, the other half look like they never got the memo. So I split the work into two passes.
The usual way
The usual way
Home
New Vehicle
Pre-Owned
RVs
Articles
Frankenstein site
Frankenstein site
Pass 1: Structure, page by page
Pass 1: Structure, page by page
Home
New Vehicle
Pre-Owned
RVs
Articles
Consistent the whole time
Consistent the whole time
Visual refresh applied site-wide
Visual refresh applied site-wide
Pass 2: Style, all at once
Pass 2: Style, all at once
Home
New Vehicle
Pre-Owned
RVs
Articles
One clean launch
One clean launch
The actual tracker from the project. Every page was split into two tracks, Logic and CSS, so structural and visual work could move separately.
The actual tracker from the project. Every page was split into two tracks, Logic and CSS, so structural and visual work could move separately.
LANDING PAGES
Homepage
ZIP Code Landing Page
Logic
CSS
New Vehicle
New Vehicle Landing Page
Logic
CSS
Build Vehicle (Configuration)
Logic
CSS
Compare Vehicles
Logic
CSS
Manufacturer Incentives
Logic
CSS
Limited Time Specials
Logic
CSS
How It Works
Logic
CSS
Saved Vehicles
Logic
CSS
Safety Information
Logic
CSS
Pre-Owned
Pre-Owned Landing Page
Logic
CSS
Factory Certified vs Select PO
Logic
CSS
Why Buy?
Logic
CSS
RVs
RV Landing Page
Logic
CSS
Factory Certified vs Select RV
Logic
CSS
Articles
Articles Landing Page
Logic
CSS
Buyer’s Guide
Logic
CSS
Costco Auto Program
Logic
CSS
Safety & Technology
Logic
CSS
Showcase Magazine
Logic
CSS
Logic / CSS:
Logic / CSS:
Done
Done
In progress
In progress
Not started
Not started
Development
Development
Testing
Testing
Not started
Not started
03 — Solutions
Projects & Solutions
Projects & Solutions
Projects & Solutions
Most of Costco Auto’s members browse on mobile but shop on desktop, so every design below is fully responsive.
Most of Costco Auto’s members browse on mobile but shop on desktop, so every design below is fully responsive.
Most of Costco Auto’s members browse on mobile but shop on desktop, so every design below is fully responsive.
Cards!
Cards!
Cards!
I also really, really like cards for this type of design. 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.
I also really, really like cards for this type of design. 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
CAP Site Redesign
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.
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.
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.
[SCREENSHOT] Vehicle page, before
[SCREENSHOT] Vehicle page, after
A touch of modern design
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.
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.
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
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.
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.
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
Audi Microsite
Audi Microsite
As they were our first microsite partner, Costco Auto wanted to come out of the door swinging. To me, that meant a design that told Audi we meant business. (Literally!)
As they were our first microsite partner, Costco Auto wanted to come out of the door swinging. To me, that meant a design that told Audi we meant business. (Literally!)
As they were our first microsite partner, Costco Auto wanted 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.
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.
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.
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.
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 Costco member incentives, following over from the last page.
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 Costco member incentives, following over from the last page.
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 Costco member incentives, following over from the last page.
Electric Vehicles Landing Page
Electric Vehicles Landing Page
Electric Vehicles Landing Page
The EV site has since grown into something much bigger, but I like looking back at where it started. As my first project at Costco Auto, it was my way of setting the direction I wanted to take the company in.
The EV site has since grown into something much bigger, but I like looking back at where it started. As my first project at Costco Auto, it was my way of setting the direction I wanted to take the company in.
The EV site has since grown into something much bigger, but I like looking back at where it started. As my first project at Costco Auto, it was my way of setting the direction I wanted to take the company in.
A bright future
A bright future
The EV landing page was themed to feel innovative and sustainable, blending futuristic design with organic elements and clean UI.
The EV landing page was themed to feel innovative and sustainable, blending futuristic design with organic elements and clean UI.
This approach reinforced Costco Auto’s vision for a modern, electric future.
This approach reinforced Costco Auto’s vision for a modern, electric future.
All you can read
All you can read
I chose a carousel to showcase a wide range of EV content, making it easy for users to browse and discover what’s relevant to them.
I chose a carousel to showcase a wide range of EV content, making it easy for users to browse and discover what’s relevant to them.
Clear hierarchy, intuitive navigation, and engaging visuals keep users informed without overwhelming the page, and encourage deeper exploration of electric vehicle topics.
Clear hierarchy, intuitive navigation, and engaging visuals keep users informed without overwhelming the page, and encourage deeper exploration of electric vehicle topics.
Communicating via Design
Communicating via Design
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.
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.
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.
04 — Takeaways
And so much more!
And so much more!
And so much more!
I haven’t been able to get everything I’ve been working on over the past years over at 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.
I haven’t been able to get everything I’ve been working on over the past years over at 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.
I haven’t been able to get everything I’ve been working on over the past years over at 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.”
“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.”
— Jony Ive
— Jony Ive