Back to blog

Salesforce Storefront Design: A User Experience Case Study

An internal UX project became a real-world solution for Salesforce, proving that great design isn’t just about aesthetics—it’s about strategy, innovation, and impact.

Huri Bonilla - UX Architect
Connect

Setting the Stage

Before I dive into my experience with this project, I want to share how it all began—because nothing happens out of nowhere. As Kirby Ferguson said in his TED Talk, everything builds on something that came before it.

When I first joined Saltbox Mgmt, one of my first projects was to create a storefront to show what we could offer to potential customers. At the time, I didn’t fully understand how important that internal project would become. Looking back, I can see how much it changed things.

That storefront became Precision Design, a made-up brand we carefully built to feel real. We spent hours choosing colors, fonts, images, and content to make sure anyone exploring our demo had an experience that felt complete and realistic.

From a Demo to a Deal

Fast forward to October 2024. I was talking with Shane Smyth, Saltbox’s Chief Technology Officer (CTO) and the person behind many of my biggest challenges here, about how great Dreamforce 2024 had been. Dreamforce is one of the biggest tech conferences in the world, and it gave us the perfect chance to show off our work and meet leaders in the industry.

Dreamforce 2024

During our conversation, Shane told me how many people were impressed by our approach—especially one person who was really interested in how we build solutions for customers. They were drawn to Precision Design, our demo storefront, and wanted to know more.

That person worked for Salesforce.

It took me a moment to process—Salesforce wanted us to build something for them. This solution would be available for anyone on their main site. I felt a mix of excitement and disbelief, but most of all, I saw it as an incredible chance to prove that you don’t have to be one of the big four consulting firms to create world-class solutions.

Taking on the Challenge

I’ve been a User Experience (UX) designer for a long time. Before that, I worked as a visual and graphic designer, as well as a front-end developer. UX is something we have always believed is important. Many people at Saltbox Mgmt are developers, but we know that the front end needs to look great and work smoothly to create the best experience. This project was the perfect opportunity to make that vision real, since it would be seen by potential customers, existing clients, and visitors through Salesforce: The Customer Company.

Laying the Groundwork

A successful project starts with clear goals, well-planned deadlines, and an understanding of what is and isn’t possible. Using knowledge from past projects helped us set priorities and plan our effort wisely.

We followed the three key parts of innovation that every UX strategy should have:

  • Desirability – Do users want this?
  • Feasibility – Can we actually build this?
  • Viability – Will this work long-term?
The Three Lenses of Innovation

Learning from the Past

Some of the solutions we needed were already hidden in past projects. Since we had worked on storefronts for many industries, we had seen lots of different customer needs, user behaviors, and technical challenges. We always try to reuse what we’ve already built to keep projects efficient while making sure customers still get the best possible solutions.

Many of the components we built had already been tested and used by other clients. Instead of starting from scratch, we used past research to guide us when possible. But for brand-new features, we had to dig deeper, making sure they were easy to use and worked well for everyone.

Creating a Seamless Experience

One of the biggest challenges was designing three different storefronts while making sure they all had a similar experience:

  1. Direct to Consumer (D2C)
  2. Business to Business (B2B)
  3. Headless eCommerce (a fully customized storefront)

Each storefront needed desktop and mobile versions, interactive designs, and strong accessibility features to make sure they worked for all users.

D2C and B2B were mostly built using standard Salesforce components, with a few customizations. The headless storefront, however, was more challenging since it wasn’t built with Experience Cloud, the usual technology for customer-facing websites.

Staying on Track

A common challenge in UX design is unclear documentation. Without well-written requirements, people waste time asking the same questions over and over.

To stay organized and avoid confusion, we followed the Saltbox Success System—an internal process that helps teams document and share project knowledge. At any time, we could look at guides or start discussions to solve problems.

For example, our Product Detail Page (PDP) documentation in Confluence included:

  • Features to develop
  • What was needed for success
  • Storefronts where each feature would appear
  • Links to user stories and tasks

Having this information in one place saved time and kept everyone aligned.

The UX Process

Before jumping into design systems, colors, and interactions, we had to analyze the data—this included user metrics, stakeholder interviews, past research, and industry reports.

To understand this data better, I created diagrams and user flows to map out how users would interact with the site. This helped us spot problems and find opportunities to make things better.

Simple flow to exemplify how to show different storefronts depending on the persona

Once we had clear user flows, we created wireframes to plan out the design and features of key pages:

  • Homepage
  • Product list page
  • Product detail page
  • Search results page

Then, we figured out which components could be reused and which ones had to be built from scratch.

Wireframe of the D2C storefront

After Salesforce approved the wireframes, we turned them into detailed mockups. Using Figma and a growing design system, we sped up our design work while making sure everything looked and worked consistently.

Mockup of the D2C storefront

For the headless storefront, we wanted something truly unique. After discussing our goals, Shane shared insights that helped shape the final design.

This is why I believe UX is a team effort—anyone who cares about improving the experience is part of the process, not just the designers.

Headless storefront. Desktop and mobile version.

Final Thoughts

Every project brings challenges, no matter your role, industry, or experience level. Success takes commitment, flexibility, and the ability to handle uncertainty.

For this project, the biggest challenge was communication. Designing for Salesforce—the most well-known name in our industry—was both an honor and a responsibility. Meeting their brand style standards pushed us to improve our work and make sure every detail matched their vision for a top-tier user experience.

This project was a huge learning experience—one that pushed us to think bigger, work smarter, and prove that great UX is just as important as great development. Designing for Salesforce gave us a chance to show what we can do at the highest level, and we’re just getting started. Thanks for reading—there’s a lot more ahead!

Take a few minutes to explore the Salesforce Self-Guided Demo sites and see what the magic is all about.

Stay up to date with Saltbox

Sign up for our newsletter to hear the latest

Thank you for your submission!

Oops! Something went wrong while submitting the form.