UX for Commerce: Who Pulls the Strings?
Designing for Multiple Layers of Experiences
When we think of shopping, we imagine the stores we visit — digital or physical — to shop for birthday gifts, electronics, concert tickets, food, or entertainment while in transit. Online experiences in particular are carefully crafted to optimize conversion rate, facilitate purchases, and ultimately grow the business.
With close to two trillion dollars on the line, ecommerce is big business. But who is behind that experience? As it turns out, there are more layers than you might think of at first. Various personas work behind the scene to make a shopper’s wish come true, whether it’s a new pair of sneakers or a new tent for their camping trip to Yosemite Park.
At Salesforce, the Commerce Cloud UX team has been hard at work designing tools and experiences to empower our customers in orchestrating these experiences and generating revenue on our platform.
Who are the personas who pull the strings and how do we support them?
Enabling Web Designers to Delight Shoppers and Optimize for Conversion
Our customers, which include top brands such as Adidas, L’Oreal, and Puma, aim to create engaging shopping experiences. Their teams of web designers and UI developers are first in line: they own the look and feel of the storefront. The experience is crafted to leverage and strengthen the brand through visual elements such as logo, fonts, and colors.
Our customers then create, select, and add content with a similar mindset: how will images, articles, and videos connect the shopper to the brand? How will it nurture loyalty and create unique experiences? Visitors are tracked every step of the way to anticipate and personalize what they see and might want. The checkout process leverages the most recent metrics to remove any friction and lead the shopper to conclude the transaction quickly and easily.
Outside of the site itself (such as on social media), shoppers will also see reminders of what they might have left behind due to distractions or lack of motivation to buy. Personalizing with dynamic retargeting throughout the web is another way to attract and keep shoppers engaged.
Beyond branding and experience, performance has been over the years— and continues to be — a top priority. If, for instance, one of our customers ends up processing as many as 1500 orders per minute on a popular product, we need to support that. This year, we are also addressing another one of our customers’ top concerns: while shoppers spend more time browsing online stores on their phone than they would on a desktop, mobile conversion is lower. Our team agreed that a mobile-first design solution would eliminate friction and improve the entire mobile shopping experience.
To address this, we analyzed data, conducted research with customers, and redesigned our online store reference application (SiteGenesis), which provides templated solutions for a fully functioning online store. As a result of the redesign, our customers can now deploy a brand new reference application to use as a framework, a set of design assets, and best practices. We empower our customers to create a cutting edge mobile experience that’s customizable to their own needs.
As part of this effort, we also incorporated Apple Pay and Android Pay into our solution: shoppers can use Apple Pay with Safari — or Android Pay with Chrome — to check out faster. Additionally, it reduces the need to invest in expensive native phone applications.
Creating delightful and efficient storefronts is essential, but there’s more to ecommerce than that!
Empowering Merchants to Orchestrate Data Driven Shopping Experiences
In addition to storefronts, our customers also must consider product placement, pricing, inventory, discounts, new arrivals, shipping options, and the product life cycle as a whole.
Merchandisers, for instance, assess product placement on the storefront. Let’s say a shopper is looking at sandals to buy for their next vacation. The top items they see in that category are set by the merchandisers, who configured the items with a number of criteria in mind, such as:
- Novelty
- Inventory levels (the merchandiser may want to push items with high inventory)
- Trends identified for a given market (e.g. black gladiator sandals are selling fast in the Southwest)
Following this, the marketers set up promotions and their content, e.g. “free shipping today and tomorrow.” These promotions target a group of shoppers (e.g. “VIP customers”), who will then see customized landing pages for said promotions.
We engaged in journey mapping to understand key workflows in and out of our core product, Business Manager, which is used by merchandisers and marketers in their daily tasks of managing a storefront. We also conducted interviews that help us understand our customers’ challenges, skills, and responsibilities, which all feed into our persona development work.
We learned that merchandisers are highly visual users: they need and want to see pictures of the products they manage, not only on the storefront, but also in the back-end interfaces. One of their top requests was the ability to re-organize products by “drag and drop” in a category landing page.
That being said, they are happy with dense screens full of data, considering that they might manage in the order of 2+ million SKUs organized in 4,000+ categories. That’s a lot of data to fit on the screen! Their eyes are trained to scan lists of products or promotions (as long as the right filters are available). This led to our “visual merchandizing” feature that lets them interactively move around products to sort the top ones on the storefront.
Content and photography are also critical in creating the ultimate shopping experience. Merchandisers want increased control and a faster cycle in creating a landing page, which involves managing layouts, images, and products. This insight led us to work on page editing using templates with no involvement from designers or developers.
Being one of the first — and most powerful — Commerce Cloud platforms on the market means that we have to modernize the UI technology that has powered our core product experience for over 10 years. Aging and evolving without breaking is a challenge any enterprise software faces. To address this, we incorporate SLDS (Salesforce Lightening Design System) as we re-design or introduce key functionality.
Aging and evolving without breaking is a challenge any enterprise software faces.
Adding Intelligence to the Mix
As we integrate more and more predictive intelligence capabilities into our products, merchandisers can also use the Salesforce Einstein engine to assist them in tailoring the shopping experience. For instance, if a woman shopper comes back to a site looking for a hoodie, she will see recommendations tailored to her profile. The search suggestion will automatically show her women’s hoodies (based on her past visits).
Personalization is useful for not only the shoppers but also for the merchants: automation saves them considerable time, because they can skip manually intensive tasks such as linking recommended products. Data shows that it also increases revenue. Black Diamond, a customer of ours that sells climbing, hiking, and skiing products, saw a 9.6% increase in conversion rate and a 15.5% increase in revenue per visitor thanks to automated intelligent recommendations provided by our platform.
Merchants also need to make decisions such as: “What is the best promotion to run in April when the new collection is in?” or “Who to target given a myriad of data points that keep growing?” The only way to go was to manually analyze results from past years to decide what works and doesn’t. Our goal is to speed up this process by making predictive suggestions powered by the Einstein engine.
The End Goal: a Unified Experience Centered on the Shopper
Finally, connecting the dots to offer a unified shopping experience is our ultimate engineering and design challenge. While the back-end integration is happening, designers are working through the core use cases affecting the various personas as they interact directly — or indirectly — with shoppers. Commerce touchpoints (such as online stores, call centers, physical stores, airport kiosks, and social media stops) have to work together to offer a smooth and consistent experience with all the flexibility that today’s shoppers expect: buy online, return in store, get a shipping label on Facebook, ship to my hotel, pick up in store, and more.
For any touchpoint, all the business personas involved — call center agents, store associates anywhere in the world, online chat agents — must see the same information (orders, pricing, products, cart, promotions, etc.) in order to assist the shopper. As they interact with the shopper, they need to quickly grasp the shopper’s context: Where is my order? Can I apply this coupon I got online? Can you ship to a store close to me for free? etc.
Commerce touchpoints … have to all work together to offer a smooth and consistent experience with all the flexibility that today’s shoppers expect.
For instance, when we design for a call center interaction, key flows such as capturing an order should be consistent with physical and digital store patterns. Checkout options (with complex shipping and payment options) should mirror the checkout in our mobile first shopping application. If a customer service agent is mediating the shopping experience on behalf of a shopper, the options available to place and manage an order should mirror what a shopper would see. A consistent experience ensures efficiency and improves customer satisfaction.
As you can see, ecommerce is quite complex behind the scenes. Multiple actors work hard to orchestrate rich and effective shopping experiences around each and every shopper. This is made possible because we design power tools that support access, transparency, and consistency across all commerce touchpoints. The shopper and merchant journeys are closely intertwined.
As these experiences become more seamless and as data flows more freely, transaction points are bound to pop up everywhere. Merchants have more opportunity than ever to engage shoppers — through social media and other places — and continuously nurture customer relationships and loyalty.
Thank you to the CC UX team for their awesome work: Saloni Borar and Christian Mücke (new Site Genesis Mobile First storefront), Ishani Sharma (fully re-vamped Catalog management), Aesh Verma and Daryn Cox (mobile store apps), Thom Bartsch (Call Center apps).
Thank you Raymon for reviewing and helping edit this blog!
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
