Creating a seamless customer experience through better design should be a priority when running an online storefront. Except for many eCommerce brands, website design often consists of:
- Finding a pretty off-the-shelf theme.
- Changing the colors and fonts to match your brand.
- Moving along.
You can do that, sure.
But the world’s highest-performing brands are focused on more than just pixels. They’re looking into how customers interact with their site and, more importantly, how they can make that experience seamless through better design.
By distilling the five elements of the UX design framework into your online shopping experiences, you’ll not only help create that seamless experience, but you’ll also convert more visitors into buyers.
Isn’t that what it’s all about?
Defining the Five Elements of UX Design
Jesse James Garret, who wrote the book The Elements of User Experience: User-Centered Design for the Web, states the principles of UX design consist of five S’s:
- Strategy
- Scope
- Structure
- Skeleton
- Surface
It’s essentially a framework that helps you take an idea from abstract to concrete. To explore this framework more in-depth, we’ll take a look at the brand WheelerShip and how they have utilized it successfully with their own eCommerce storefront.
Strategy
During the strategy phase of the elements of UX design, decisions are made regarding the objectives of the end product. Strategy is considered the bottom plane of the framework.
In your case, that would be your eCommerce website. Some questions you should ask in the strategy phase are:
- What’s the goal or purpose of your website?
- Why do you need it?
- What will your target market use it for?
By conducting some user research, you can determine what your users want to use your website for, and design your website to deliver what they want.
In the case of WheelerShip, you discover immediately that the purpose of the website is to find the car parts you need, and if you require additional help, you can speak to an expert.
So it’s readily apparent they are selling car parts and expertise, and their users can use the website to search their inventory for what they need to purchase.
Scope
The next layer of the framework is the scope. The scope of a UX design refers to the different elements that need to be included for your website to be successful.
This can include things like user research, information architecture, interaction design, and visual design. In the case of building an eCommerce website, the scope may cover many different elements, such as navigation, layout, search, and checkout.
There are a lot of moving parts that need to be taken into account, so it’s important to consider the user’s journey from start to finish, from landing on the home page to making a purchase. You should also take into account the different devices users will use and the various payment methods that need to be supported.
In addition, you’ll need to establish what kind of support will be needed after the purchase is made. Ultimately, the scope is where you decide what your website actually needs to provide your visitors with a seamless experience and what content and moving parts will be required to help facilitate it.
On WheelerShip’s website, you can see there is a primary navigation menu that makes it easy to find what you need on their website. They also have the “Find Your Part” search form, and a callout box directing users to call them if they need the help of an expert.
They’ve got a speedy, built-in shopping cart and simple checkout process, a FAQs page, and easily found links for customer support. All of these different elements (and others) serve to make their eCommerce site simple and intuitive to use.
Structure
Structure is a key component in the principles of UX design. A well-designed website will have a clear and intuitive structure that makes it easy for users to find what they are looking for.
The best way to achieve this is to use a framework that clearly defines the different pages and features of the site. This will help to ensure that each page has a purpose and that users can easily navigate between them.
Every navigational element should be decided during this phase, including content hierarchies and the way content is arranged to communicate clearly. You also need to know what happens when users take a certain action, even if it’s an erroneous one.
A good UX design framework should also be flexible so that it can be easily adapted to add new products or incorporate changes in your business. By having a solid structure in place, you can be sure that your eCommerce website will provide a smooth and enjoyable experience for all users.
WheelerShip facilitates a good user experience by using main product/content buckets in their top navigation, along with content hierarchies, including those in the footer containing relevant page links for each main topic––About WheelerShip, Customer Support, and additional Help pages.
Skeleton
A skeleton in UX design is a lean and basic structure of your website that allows you to focus on key features and content without getting bogged down in details.
Often, a skeleton is a wire-frame or low-fidelity prototype that showcases the essential elements of your site, such as the navigation, homepage, product pages, and checkout flow.
You can use this as the starting point for further design work, or use it to test user flows and early prototypes with potential customers.
Though the skeleton may not include all the bells and whistles of your final site design, it is an important tool for streamlining the design process and ensuring the core user experience is up to par.
Surface
Think of the surface level of the framework as the face of your eCommerce website, the part that users will interact with that encompasses all the previous elements of UX design.
It’s important to create a surface that is both visually appealing and easy to use. This can be accomplished by using an intuitive layout, clear labels and navigation, and consistent branding. It should also be designed to accommodate different screen sizes and devices.
By taking the time to create a well-designed surface, you help ensure your users have a positive experience and are more likely to make a purchase.
WheelerShip does an excellent job of this. When you land on their site, you immediately know it’s primarily a parts store for auto wheels and other car accessories. You know this because of the name of the site, as well as the images chosen for the main page, and the main navigation menu.
Their site is clean and easy to explore with no unnecessary content, their fonts and color palette is simple and consistent site-wide, and their shopping experience is easy and fast.
You also have multiple ways to search for products, which is convenient because some users will already know exactly what they want, while others will need some guidance.
Principles of UX Design Distilled into Common Sense Tips
At the end of the day, an eCommerce website should always be designed with the user experience in mind. You could distill the five elements of UX design into a few simple core themes.
- Clarity: When a user lands on your homepage, they should be able to understand what your site is about within seconds. Make sure your navigation is clear and easy to use, and that your content is well-organized and easy to scan.
- Purpose: Every page on your website should have a specific purpose. Don’t make users guess what they’re supposed to do––make it abundantly clear. Use strong CTAs and helpful visuals to guide users through the conversion process.
- Usability: Your website should be easy to use, even for first-time visitors. That means having a clean, simple design and intuitive navigation. Ask yourself whether users will be able to find what they’re looking for quickly and easily––if not, make some changes!
- Credibility: In order for users to trust your website, it must look professional and credible. Make sure your site includes testimonials, customer reviews, social proof, and other elements that build trust.
- Delight: If you want users to keep coming back, you need to give them a reason! Don’t be afraid to add some personality to your website, and include little touches that will make the experience more enjoyable. When done right, delight can turn first-time visitors into lifelong customers.
By incorporating the five elements of the UX design framework into your processes, you can create (or re-create) a website that is not only visually appealing but also easy and enjoyable to use––AKA a site that customers will be happy to come back to again and again. Try putting these principles into practice, and let us know how your conversion rate improves!
