#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools

CASESTUDY

Redesigning the UX and UI of a Shopify based store

A case study on how we adopted low code design principles of Shopify platform while designing and developing a D2C store.

Industry

eCommerce

Duration

5 months

Services

Design audit, UX/UI design,
Shopify Development

Devices

Web & Mobile

GT Tools has been in the automobile industry for over 34 years as a windshield repair tool manufacturer. They’ve been conducting their business both online and offline and it was only recently that their online revenue surpassed their offline one.

Post that, they started giving serious thought about getting their current website based on a low code platform like Shopify redesigned.

They approached us with the project and with our expertise in low code platform design, we helped them design and develop a customer-friendly and accessible website with a powerful search feature.

eLearning design process

Design

Development

eCommerce design approach

Design Audit

Being a Shopify redesign and development project, we had to take into account the limitations and roadblocks we would face during this low code platform design assignment.

The next step was to perform a heuristic evaluation before stakeholder interviews. The reasoning behind this was to avoid any bias seeping in when understanding the system, and to have an objective opinion of its usability.

This was followed by multiple stakeholder interviews, and product audits performed parallelly with competition analysis.

The last stage was to synthesize our findings, prepare a report and present it to our client.

In this report, we also shared the potential issues we would face during this low code patform design and how we planned to fix those.

The Audit was concluded with the understanding of what would be needed to achieve the goals of making this Shopify redesign more user friendly, and conversion-centric.

Homepage

Narrative

In modern eCommerce design, the homepage is no longer the only entry point for new users. Given this, we decided to use the homepage to build a narrative to introduce users to the brand.

What helped us in creating an efficient narrative, was understanding the business and its owners. This, paired with introducing important CTAs throughout the narrative, helped guide the user’s journey.

We also used improved pictures and iconography to present the brand in a fresh and minimal aesthetic.

The header, footer, and search

As part of the homepage revamp, we also redesigned the header and footer section in this Shopify UX design project.

Our new header had an improved search function that would be an important navigational tool for users. Additionally, we also put an information strip above the header. The purpose of this strip was to show current, relevant and important information – sales, festive offers, delivery delays etc.

This strip would be visible at all times, showing information that would be beneficial to users.

#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools

Product List Page

The product list page was another important touchpoint in the user journey. Optimizing it efficiently was important because users on the product list page always represents a stronger intent to buy than users on other landing pages.

A few key features of the product list page that we improved were as follows.

Improved category navigation

Given the nature of the client’s business, there were a lot of categories available for users to narrow down their purchase choices. We improvised the category navigation on the left panel to be able to easily switch between categories.

#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools

Product category and description

One of the most undervalued sections on the product list page is the section mentioning the product’s category and description. It serves as an important anchoring point for users and also hosts important links to learn more about certain product categories.

For example, the manufacturing processes or quality standards etc.

#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools

Product listing

The most obvious improvement that we made was the product lists on the listing page. We added unique elements like Out of Stock indicators, Pre-order indicators, SKUs and tags that are not widely seen across eCommerce stores.

It was important to add SKUs because certain users might want to use SKUs to search for physical distributor catalogs for certain products.

#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools

Product Detail Page

The product detail page is arguably the most important part of an eCommerce store and the user journey. This is the point where the intention to buy a product often reaches a tipping point.

Hence, it was important to present all relevant options and details to help users make an informed decision. During this Shopify redesign, we added a few key features

The ability to show product variants in the thumbnail

Some products have configurable parts but it is generally difficult to access, change and compare them. The visual selector/switcher that we designed would let the users easily switch between the different available options with minimum delay.

This was a challenge to implement owing to the close ended nature and technical constraints Shopify has . However, our experienced developers were able to fix this with their expertise in Shopify development and minimize the delay.

Briefer description section

With most eCommerce stores, a lot of product details are hidden under the “Read more” dropdown. However this information is key when users are trying to make a purchase decision.

With our redesign, it was important to us that users could keep looking at the information at the top of the page while parallelly diving deeper into more detail if they wanted to.

Widget access to FAQ and customer support

Just because the internet has evolved so much doesn’t necessarily imply that the human psyche has too. Even today, most people are uncomfortable making an expensive purchase without having all the needed information about a product or talking to a human first.

We tried to fix this problem through our design with the help of a widget to quickly access product information or talk to customer support.

#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools

Easier access to shipping and warranty details

On most eCommerce websites, the shipping and warranty details are revealed only after a long scroll down the page. This in no way promotes transparency and trust.

Thus, in line with our goal to make this Shopify based eCommerce store more user friendly, we made these details easily accessible at the right point in the user journey.

Klarna Insurance Widget

The Klarna insurance widget that was active on the site was functional but not very useful. Our audit revealed that buyers of products priced on the higher side may want to investigate financing options.

In light of this information, we designed the page to provide answers sequentially to questions already on the user’s mind.

Sticky Product Header

Because of the detailed information available on eCommerce sites, the pages can sometimes be a bit lengthy. We wanted the users to see the product’s price alongside the CTA to Add to Cart.

To solve this, we designed a sticky product header that would follow the user as they scrolled down the page.

#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools
#tcules #eCommerce #shopify #case #study #ccasestudy #GTTools
Final Outcome

A Shopify based eCommerce store that lets the users

  1. Effortlessly find products
  2. Answers potential questions proactively
  3. Enables easy access to support

We also design for Magento, Woocommerce and other eComm platforms

You might be interested in

eCommerce is here and it’s here to stay. In this blog, we share how you can create well-designed websites to serves as an extension of your business and leverage the internet to meet business objectives. 

A case study about how we helped UK’s largest direct-to-consumer eCommerce store design and develop their Magento based website that led to an increase in organic traffic, revenue and reduction in cost.

Have a project for us?

    contact tcules