Designing an eCommerce Landing Page: UX and Digital Marketing Case Study

 In Project Showcase

Wolf Clothing Co is a local Vancouver luxury clothing brand, selling men’s business attire such as; dress socks, underwear, and formal accessories. Check out the other design work I have done for them, product packaging design.

The Client

Wolf Clothing Co is a local Vancouver luxury clothing brand, selling men’s business attire such as; dress socks, underwear, and formal accessories.

Check out the other design work I have done for them, product packaging design.

The Goal

To increase online sales conversions: through;

  • directing more traffic to the website
  • improving user experience

Sell the Product

A conversion here is defined as an online purchase of featured product, being a sock box set (4 men’s mix-and-match dress socks)

boxset

Market Research

Using data from google analytics for their website, and using the client’s target audience goals, these were the determined target demographics for this project:

  • 75% Male, 25% Female, Adults (25yr-40yr average)
  • Canada, USA
  • 50% Mobile, 45% Desktop, 5% Tablet

Deliverables

 The Sales Funnel

07a3109fec93dcae61b42c3f9ea62410

Step 1: Acquisition

2 entrance points; first being the homepage for general traffic, second being targeted acquisition of a landing page. To maximize exposure, both entrance points will be advertised with targeted Google AdWords and paid facebook & Instagram ads.

Step 2: Email collection.

Upon leaving the website, users will be prompted with a pop-up to entice them to supply their email in exchange for a sales coupon code. By adding visitors to an email list, we can retarget ads to potential customers and bring them back to website at a later time.

Step 3: Promotional landing page.

Along with the clicks from the email campaign, a landing page will also be advertised with PPC (pay-per-click) to acquire targeted traffic with keywords.

Step 4: Checkout experience.

The landing page is designed to motivate visitors to add the product to their cart, and checkout. A distraction-free design is to be made and sell the product.

Step 5: Conversion complete!

An online sale has been made. The customer’s email is added to the mailing list for re-targeting purposes.

UX adjustments to main website

  • Improve homepage
  • Add product reviews, for social proof
  • Improve main navigation

Landing Page Design

Wireframe

wireframe

Final Design

fistboxpromo-v2

Prototype

Using Invision, I built an interactive prototype to test and collect feedback.

User testing

User testing is a crucial step in UX design, as it is real data used to support design decisions that leverage results.

With UsabilityHub, I sent out the initial landing page prototype to real users to test the interface, and collect feedback from the target audience (male adults, Canada & USA).

Targeted Surveys

68 participants

3 Questions

  1. “What is the page about? First impressions?”
  2. “What areas are you most drawn to?”
  3. “Is anything confusing, lacking, or distracting?”

With User Look, I also collected a 10-minute video review from a student from Los Angeles, CA, 27, Male.

With all this feedback I received, I as able to make some important changes with the next version to clear up an confusion or lack of information the users were experiencing. 

Web Development

The final design was built as a Shopify page.

Paid Promotions

What is a good website design without any traffic? So the last step in this strategy is to acquire specific traffic. We targeted our pre-defined audience with demographic selection, keyword targeting, as well as user behaviour patterns.

Google AdWords Campaign

I set up 2 ad groups, to target general website traffic and landing page specific traffic – those who are specifically in the market for dress socks.

General Website Traffic

Increase traffic flow to homepage of website.
Using generic keywords for entire site.

Landing Page Promo Traffic

Bring traffic specifically to promo.
Using product-specific keywords for landing page campaign.

01922e06e5af739aabe23ad0df2144e8-1
Recent Posts