Select Page

Order Widget Concept

About the project

There are numerous vital steps in a buyers journey that may derail the buying decision, which is why I took up the task of evaluating and optimizing areas of the website to remove any friction and to guide visitors to the order confirmation page.

One of those vital areas on a product page is the order area (I will be calling it a widget from now on). It doesn’t just serve to inform the visitor of the product price; it also serves as an area that allows visitors to customize their purchase by selecting their own preferences.

The primary business goals for the order widget is to:

  • Offer a clear view of the various product options
  • Allow visitors to customize their selection
  • Increase the shopping cart value 


What is the problem

After reviewing sales & traffic data, heatmaps and talking to customer service reps, I identified four possible problems that are causing issues for visitors and costing the campany sales.

Problem 1 – Confusing product options

The first issue with the current setup is that there is no clear view of the available product options without clicking the drop down. Once you select the drop-down, not all presented options allow you to make a purchase – some inform you to call the sales team. Additionally, the “On Your LMS” is a subset of Streaming/eLearning, while the “Instructor Package with MP4” is a subset of the DVD/USB buying option. The drop-down hides the fact that some of these options are a subset of other options, which can create confusions with customer.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Problem 2 – Reduced awareness of available products

While the order widget drop-down is used quite often (based on the website heatmap), it seems that the majority of the visitors are still only viewing the default drop-down selection and making their decision based on that. We saw this issue come up when our management team wanted to boost video streaming sales (higher profit margin). They decided to create an experiment and make the, less popular, streaming option the default screen/selection and bury the, more popular, DVD option in the drop-down menu. In that week, not only did our Streaming sales not increase, our DVD sales plummeted.

Problem 3 – Low consistency in formatting and design

There is little to no consistency between the product options. The DVD section looks different from the USB section and the Instructor Package won’t even allow you to add it to the cart. The overall design of the order widget is very dated and makes the product feel old.

Problem 4 – Hidden content

We receive numerous live chat and emails from website visitors asking us what they will be receiving if they buy a specific product. This issue may be due to the fact that they have to click on a tiny icon next to the product name in order to view the list of items that comes with the film.

 

Research

The website and product offerings are quite unique, as customers can buy physical and digital content, which is why I started my initial research by reading case studies and usability tests on eCommerce checkout processes. One of such usability studies was conducted by baymard.com on drop-downs and how/when to use them. There they point out that “…using drop-down menus for the “wrong” input types can lead to slower checkout completion times, field validation errors, and unnecessary user attention being devoted to optional fields, all of which increase the likelihood of checkout abandonments”.

Keeping this research in mind, it was clear that a drop-down order menu is the wrong type of interface for these types of products. I started researching possible ways to present the various purchasing options while satisfying the primary business goals of the order widget.

The fact that there are multiple versions of a product (based on format, language, geography, platform), I felt an order widget that gives the visitors ways to customize the product is the way to go. Looking at clothing retailers, I noticed that they also sell products that have multiple variations (size, color, style), so this was the perfect way to display our multiple product variations.

Another example that shows a possible way to display the various product formats can be seen on most Amazon books product pages. There, Amazon can sell both physical books and digital content (kindle, audiobooks) on the same product page.

Using a hybrid approach of tabs and buttons might be a much better alternative than the current drop-down order menu. 

Solution

Scouring various eCommerce retailers and reading numerous usability tests, I started to brainstorm some ideas on how to best display the product options. Below are a few initial concepts that I sketched out on paper.

Once I established the required content pieces and the positioning of that content, I started working on a low-fidelity wireframe. This was also the ideal time to share the wireframe with the decision makers and try to get their feedback.

After receiving feedback from my manager and the business owner, I moved on to developing the project’s visual features and final design specs.  The final design did change a little compared to the wireframes based on the feedback of the business owner.