CASE STUDY
Slate Maker
ROLE
UX Designer
TIMELINE
Q2 2025 – Q1 2026
PLATFORMS
Web (desktop, mobile)
XFN TEAM
Brand Designer 3D Artist UX Researcher UX Writer UX Manager Software Engineer Head of Mobile VP of Design
CASE STUDY
Slate Maker
ROLE
UX Designer
TIMELINE
Q2 2025 – Q1 2026
PLATFORMS
Web (desktop, mobile)
XFN TEAM
Brand Designer 3D Artist UX Researcher UX Writer UX Manager Software Engineer Head of Mobile VP of Design
01
SNAPSHOT
01
SNAPSHOT
01
SNAPSHOT
CASE STUDY
Slate Maker
ROLE
UX Designer
TIMELINE
Q2 2025 – Q1 2026
PLATFORMS
Web (desktop, mobile)
XFN TEAM
Brand Designer 3D Artist UX Researcher UX Writer UX Manager Software Engineer Head of Mobile VP of Design
Slate Maker
I redesigned the configurator where customers built and reserved Slate’s electric pickup responsible for $4B+ in potential order value across 160,000+ paid reservations.
THE CHALLENGE
Slate was a new EV brand with no track record. Its configurator had to make the truck feel real and turn interest into reservations.
WHAT I DID
I redesigned Slatemaker’s information architecture, color picker and component library for mobile and desktop.
THE OUTCOME
160K paid reservations, an estimated $48M in pre-order revenue, and $4B in potential order value.
THE CHALLENGE
Slate was a new EV brand with no track record. Its configurator had to make the truck feel real and turn interest into reservations.
WHAT I DID
I redesigned Slatemaker’s information architecture, color picker and component library for mobile and desktop.
THE OUTCOME
160K paid reservations, an estimated $48M in pre-order revenue, and $4B in potential order value.
02
THE PROBLEM
02
THE PROBLEM
Slate was a new brand with no track record, and it had to earn trust before reservations would turn into sales.
Slate was a new brand with no track record, and it had to earn trust before reservations would turn into sales.
Starting point
Slatemaker was where most customers met the brand and reserved a truck, yet it didn’t convince them the truck was real. They had to be won over without seeing it in person.
Starting point
Slatemaker was where most customers met the brand and reserved a truck, yet it didn’t convince them the truck was real. They had to be won over without seeing it in person.
MOBILE · BEFORE
DESKTOP · BEFORE
MOBILE · BEFORE
DESKTOP · BEFORE
03
WHAT SUCCESS MEANT
03
WHAT SUCCESS MEANT
Success meant customers built one or more configurations, shared them socially and placed a paid reservation.
Success meant customers built one or more configurations, shared them socially and placed a paid reservation.
04
CONSTRAINTS & TRADE-OFFS
04
CONSTRAINTS & TRADE-OFFS
A complicated codebase handover from a third-party vendor limited what UX and engineering could take on.
There were plenty of creative ideas, but not all of them were viable.
A complicated codebase handover from a third-party vendor limited what UX and engineering could take on.
There were plenty of creative ideas, but not all of them were viable.
SAFE
Patch what exists
Ship small UX fixes inside the inherited code and leave the design structure alone. Stay dependent on the vendor for any design change.
ADVENTUROUS
Staged handover
Sequence improvements that build on the foundation already in place, inherit a render pipeline we didn’t build, and maintain legacy code.
ASPIRATIONAL
Build from scratch
Design the ideal configurator in Unreal Engine and ignore the handover constraints. Requires significant additional engineering headcount.
SAFE
Patch what exists
Ship small UX fixes inside the inherited code and leave the design structure alone. Stay dependent on the vendor for any design change.
ADVENTUROUS
Staged handover
Sequence improvements that build on the foundation already in place, inherit a render pipeline we didn’t build, and maintain legacy code.
ASPIRATIONAL
Build from scratch
Design the ideal configurator in Unreal Engine and ignore the handover constraints. Requires significant additional engineering headcount.
05
APPROACH
05
APPROACH
I shipped a practical design for mobile and desktop that worked within our constraints, with transparent pricing and social sharing built in from the start.
I shipped a practical design for mobile and desktop that worked within our constraints, with transparent pricing and social sharing built in from the start.
I started by rebuilding the information architecture, then let the data point to the screens that needed the most help.
I started by rebuilding the information architecture, then let the data point to the screens that needed the most help.
Information architecture
Five levels, from Universal (L0) to Sub-variant (L4), borrowing browsing patterns from food delivery apps like Uber Eats.
On mobile, I replaced modal windows with nested accordion pickers and brought product details up front.
Information architecture
Five levels, from Universal (L0) to Sub-variant (L4), borrowing browsing patterns from food delivery apps like Uber Eats.
On mobile, I replaced modal windows with nested accordion pickers and brought product details up front.
Data insight
60% of customers who picked a custom wrap chose White. The next most popular colors were molten orange, neon green and vibrant purple, a gap that pointed to a deeper problem.
Data insight
60% of customers who picked a custom wrap chose White. The next most popular colors were molten orange, neon green and vibrant purple, a gap that pointed to a deeper problem.
Hypothesis
White was both the default and the first featured color, so customers were either dropping off as soon as they opened the color wheel, or taking the first option they saw.
Hypothesis
White was both the default and the first featured color, so customers were either dropping off as soon as they opened the color wheel, or taking the first option they saw.
DESIGN AUDIT
Testing the color picker on slow networks backed up my hypothesis: customers were leaving because of long load times.
As a side effect, the backend recorded a change to White regardless of customer intent.
Solution
I redesigned the color picker to be mobile-friendly and descriptive, and added a feature for power users: exact color matching.
I replaced the color wheel with clear swatch thumbnails and thick sliders sized for touch, and added exact color matching for customers with a specific hue and finish in mind.
Behind the scenes, this took close work with the CMF (colors, materials and finish) team to make sure our vinyl suppliers could match a customer’s spec.
Solution
I redesigned the color picker to be mobile-friendly and descriptive, and added a feature for power users: exact color matching.
I replaced the color wheel with clear swatch thumbnails and thick sliders sized for touch, and added exact color matching for customers with a specific hue and finish in mind.
Behind the scenes, this took close work with the CMF (colors, materials and finish) team to make sure our vinyl suppliers could match a customer’s spec.
The approved interaction model.
An alternate exploration of swatch thumbnails.
The approved interaction model.
An alternate exploration of swatch thumbnails.
DESIGN PROCESS
Swatches and sliders sized for touch, plus exact color matching.
Opportunity for delight
Customers couldn’t name their saved configurations, and adding names meant solving content moderation.
I proposed the vanity plate idea by printing the six letter code every configuration already gets onto the plate, turning raw data into art and a share code customers could use.
Opportunity for delight
Customers couldn’t name their saved configurations, and adding names meant solving content moderation.
I proposed the vanity plate idea by printing the six letter code every configuration already gets onto the plate, turning raw data into art and a share code customers could use.
Design sprint
I ran the UX team’s first design sprint to explore what the next version of Slatemaker could look like, bringing UX, exterior and interior design, marketing, e-commerce and engineering together for two days. Here are some of the outputs.
Design sprint
I ran the UX team’s first design sprint to explore what the next version of Slatemaker could look like, bringing UX, exterior and interior design, marketing, e-commerce and engineering together for two days. Here are some of the outputs.
06
COLLABORATION MAP
06
COLLABORATION MAP
Slatemaker was built by a small cross-functional team, on a roadmap that needed buy-in from four department heads.
Slatemaker was built by a small cross-functional team, on a roadmap that needed buy-in from four department heads.
XFN · BRAND
Brand Designer
XFN · 3D
3D Artist
XFN · RESEARCH + WRITING
UX Researcher, UX Writer
XFN · ENGINEERING
Software Engineer
UX · feature development
Me
leadership · DIGITAL
Director
leadership · E-COMMERCE
Senior Director
leadership · MARKETING
Head of Brand & Marketing
leadership · design
Head of Design
XFN · BRAND
Brand Designer
XFN · 3D
3D Artist
XFN · RESEARCH + WRITING
UX Researcher, UX Writer
XFN · ENGINEERING
Software Engineer
UX · feature development
Me
leadership · DIGITAL
Director
leadership · E-COMMERCE
Senior Director
leadership · MARKETING
Head of Brand & Marketing
leadership · design
Head of Design
PARTNER TEAMS
07
DESIGN SYSTEM / PATTERNS
07
DESIGN SYSTEM / PATTERNS
I built and maintained the Slatemaker component library and wrote redline specs for engineering.
I built and maintained the Slatemaker component library and wrote redline specs for engineering.
08
WHAT SHIPPED
08
WHAT SHIPPED
A redesigned Slatemaker, built on one set of shared components that works on mobile and desktop.
A redesigned Slatemaker, built on one set of shared components that works on mobile and desktop.
interactive prototypes
Shared foundations
1
Mobile and desktop Slatemaker share exactly the same information architecture.
2
Both draw from the same render pipeline, built in Unity.
3
On desktop, the right-hand rail is the same as the mobile scroll view, with navigation moved into its own dropdown.
interactive prototypes
Shared foundations
1
Mobile and desktop Slatemaker share exactly the same information architecture.
2
Both draw from the same render pipeline, built in Unity.
3
On desktop, the right-hand rail is the same as the mobile scroll view, with navigation moved into its own dropdown.
09
IMPACT
09
IMPACT
Slatemaker drove pre-order revenue and potential order value at scale, and cut infrastructure costs.
Slatemaker drove pre-order revenue and potential order value at scale, and cut infrastructure costs.
Have a product that needs to earn trust?
Have a product that needs to earn trust?
END OF CASE FILE