Shift4Shop Website Overhaul

Role

UX/UI Product Designer

Team

2 Project Managers

4 Engineers

3 QAs

1 Product Director

1 Head of Product

1 VP of Design

Tools

Figma, Notion, Loom, User-guiding, Agile, React

Overview

Shift4Shop is an ecommerce solution originally known as 3dcart. Following its acquisition by Shift4, the product was rebranded as Shift4Shop. While the name transition had already occurred by the time I joined, the website experience did not yet reflect the visual maturity, credibility, or enterprise positioning of the Shift4 brand.

The existing site still carried legacy patterns from 3dcart both visually and structurally. Messaging felt fragmented, navigation was feature heavy without clear hierarchy, and the overall experience did not align with Shift4’s broader ecosystem of payments, commerce, and business technology.

My role focused on leading the UX and UI redesign of the Shift4Shop marketing website in close collaboration with marketing leadership and the executive team. The goal was to fully realign the website with Shift4’s brand presence while improving clarity, scalability, and conversion.

The Problem

The Shift4Shop website faced several challenges following the acquisition:

The brand experience did not match Shift4’s modern, enterprise level identity
Legacy IA and page structures reflected product driven thinking rather than user intent
Solutions and features were difficult to differentiate for new visitors
Navigation and page templates were inconsistent and hard to scale
Marketing teams lacked flexible templates for launching new solutions and features

This created friction for prospective customers evaluating the platform and made it difficult for internal teams to evolve the site alongside the product.

Goals

The redesign focused on four primary objectives:

Establish a cohesive Shift4Shop brand experience aligned with Shift4

Clarify the product value across solutions, features, and use cases

Create a scalable design system and page framework

Improve usability, content hierarchy, and conversion readiness

My Role & Team

I led UX and UI design across the Shift4Shop marketing site. This included information architecture, wireframing, interaction design, visual system alignment, and page level UI execution.

I partnered closely with marketing stakeholders and leadership to translate business goals into a flexible design system that could support both current and future needs.

Process

Information Architecture and Sitemap

One of the first priorities was restructuring the site architecture. The legacy structure was feature dense but lacked clear mental models for users.

I led the redesign of the sitemap and primary navigation, organizing the experience around clear solution pillars such as Create, Sell, Market, and Manage. This allowed users to quickly self identify based on their business needs rather than navigating a flat list of tools.

The new architecture also introduced a modular relationship between solutions, feature detail pages, resources, and supporting content. This made the site easier to expand without introducing structural debt.

Wireframing and Page Frameworks

With the architecture defined, I designed a comprehensive set of wireframes for key page types including the homepage, solutions landing pages, feature detail pages, website builder pages, and supporting marketing templates.

These wires focused heavily on content hierarchy, scanning behavior, and narrative flow. Each page was designed to answer three core questions quickly: what this is, who it is for, and why it matters.

Reusable sections were intentionally designed to support consistency across the site while allowing marketing flexibility for messaging updates.

UX to UI Translation

Once wireframes were validated, I transitioned the work into high fidelity UI aligned with Shift4’s brand direction. This included typography refinement, spacing systems, component consistency, and visual rhythm across long form marketing pages. The goal was to create a clean, confident interface that felt enterprise ready without sacrificing approachability for small and mid sized businesses.

The UI system supported scalability by defining repeatable components for feature blocks, value propositions, CTAs, and educational sections.

Design System Thinking

Although the project focused on marketing UX rather than a full product design system, the work was approached with system level thinking.

Page templates, section patterns, and component rules were designed to be reused across dozens of pages. This reduced design and development friction while allowing the marketing team to move faster with new launches and updates.

Outcome

The redesign resulted in a significantly more cohesive and scalable website experience that aligned Shift4Shop with the broader Shift4 brand.

The new site architecture clarified the product offering and improved discoverability of key features. Visual consistency and content hierarchy elevated the brand perception and created a stronger sense of trust for prospective customers.

Internally, the new page frameworks and templates enabled faster content creation and reduced dependency on one off design work.

Key Takeaways

This project reinforced the importance of aligning UX decisions with business transitions such as acquisitions and rebrands. A name change alone is not enough. The experience must fully support the new narrative.

It also highlighted the value of treating marketing websites with the same level of system thinking typically reserved for product design. Scalable UX foundations enable teams to grow without redesigning from scratch.