UX Case studY

Creating a product details page

The product details page (PDP)

A product details page design can often make or break a sale.

Every point along the customer's journey from research to purchase is important. There is one place, though, where the customer is called upon to make a choice of exceptional consequence.

Therefore, I was responsible for MeidaMarkt's re-design of their new website.

Research, A/B testing, reporting and design planning were part of my daily business.

The Goal

Create a more organized and user-centric product details page in order to enhance usability, elevate user satisfaction, and consequently, boost the conversion rate.

Road to the MVP

The path to our MVP involved carefully distilling you our concept into its core elements, focusing on essential features that offer value to users.

We gathered insights and of the following key elements:

business KPI's

Competitor analysis

best practices

pdp elements

card sorting

User personas

Demographic User Personas

To craft a prosperous product, comprehending the demographics of individuals engaging with the website is crucial.

To accomplish this, we conducted a thorough 3-day workshop to construct user personas. This approach enabled us to swiftly validate assumptions and efficiently prioritize features throughout the developmental phase.

For our product's scope, we generated 5 distinct personas, aiming to address the primary requirements of our key user segments.

paula

Paula knows exactly what she wants. She needs a replacement for something she already has. She's done previous research and has picked the item she wants. She's been showrooming, researching items in stores but wants to buy online.She is goal-oriented. She knows what she needs and she wants the site to give it to her quickly.She isn't looking to browse the site. She only wants to locate the product, confirm it's the right one, and buy it. Sometime she doesn't look at product descriptions at all. A quick look at the name and picture confirms that the product is the right one and she'll buy it.The goal is speed. She wants to get to the right product, know it's the right product, and take them to checkout. Usually seh's not in a hurry, but she isn't in the mindset to linger and spend quality time with the site.She may notice an upsell opportunity, but she's more likely to continue with her intended purchase without distraction.

Bernd

Bernd is leisurely shopper who goes to his favorite sites or new sites for inspiration or to kill time. He wants to stay up on the latest trends, dream of future purchases, or be prepared for the next shopping trip by webrooming, or looking online in advance of a visit to a store like:"I have a bunch of good things, but I know I'll go in person in a few days and see the items up close."He actively chose to spend time on our website, with MM Club and with MM as a brand. He is using the webiste site as entertainment and inspiration. If He has a consistently good experience on websites finding items he likes and seeing the latest products. He is more likely to think of our website - or local store - when he is ready to buy.Bernd wants to see what's new, what's popular, and what's on sale. When he comes to our site on a regular basis, he doesn't want to see the same information that he saw the week before. It's to see what changed. He's interested in the latest items, the latest deals, what other people are buying.Related items and suggested products help him navigate the site, leading to new areas or new products. Top-selling products, popular products, and top-ranked products can all attract him.

stefan

Stefan looks for the best deal possible. His behavior may impact any of the other types of shoppers. He is sometimes simply looking for bargains, enticed into purchases by the idea of getting a good deal.He needs to be able to locate deals. Prices need to be clearly listed. Sale items must not be hidden on the site, but listed alongside full-price items, with savings highlighted. Available discounts must be easy to use.Stefan is willing to return to the site because he's looking for a sale. He is attracted to coupons, offer discounts, and free shipping with minimum purchases. Signing up for newsletters in order to receive a discount is a great deal for him.He repeatedly jumps through hoops to qualify for deals that requires a minimum purchase. He spends extra time and money on the site in order to qualify for savings.

Ralph

Ralph, like product-focused shoppers, is goal driven. He plans to purchase, but the purchase may happen today, tomorrow, next week, or in six months.He's collecting information about products and prices and may be in any stage of research. He may leans about new product types or is well educated about the products he's looking for. He is searching for the right price or the right combination of features. Research may be done over several in-depth visits or it can involve just a quick decision between options.Ralph may visit multiple sites to gather information before committing to a purchase. Trust is important in his online transactions. If he sees that the site offers detailed product descriptions, excellent support and clear navigation, he's more likely to buy. If the site offers limited or unclear product information, he won't spend the time researching, let alone buying. If the site offers a great source of information and products, he'll probably convert from a researcher into a buyer.Ralph looks for details in products descriptions, so product comparison is essential for him. This does not necessarily mean large, elaborate comparison engines (though some such tools work quite nicely for him). He easily needs to determine what the differences are between products.

tina

Tina may be product focused, browsing, bargain hunting, or researching. She is often a gift-card recipient, gift-card buyer or gift buyer. She may come with a goal in mind, such as a list of products that the gift recipient is interested in. She has no intentions to visit the site after the initial purchase; she is visiting due to a one-time need.Tina is not familiar with the site that she is visiting, or even, in many cases, with the products the site carries. She needs clear site navigation to get to products of interest and to see site inventory and selection. Clear product descriptions help her determine which item best fits her needs. Company information can help her trust an unknown site with her personal and financial information.A main complaint of Tina is site registration. The most time complaines about the laborious process of registration and checkout. But one-time shoppers was particularly annoyed by required registration, since she were doubtful that she would ever return to a site, and did not want to create an account or have the site remember anything about her. Tina appreciated sites that allowed her to make a purchase without requiring her to create an account.

Competitor Analysis & Benchmarking

Comparing Designs and Wireframes of different ecommerce stores and products helped me to find the best solution and also created a symbiosis of best features. We analyzed 47 different websites and brands to get inspiration for our upcoming product.

Research

Guerilla Card Sorting

Based on our benchmarking, case studies and assumptions, we have created a small card sorting / sitemap and visited the place where your users tend to appear - the local stores.

The users should re-locate the specific parts of the website based on their needs.

This helped us to see a possible way of the structure and set the base for the following sketches, wireframes and prototypes.

Wireframes and first drafts

Wireframes and sketches play a pivotal role in the realm of my design process. They serve as the blueprint, the initial visualization of my concept.

They allow me to visualize, iterate, collaborate, and test ideas efficiently while keeping the user's needs at the forefront.

Research

Personal Interviews

To make sure my assumptions were correct, I created a user testing scenario in our own build user experience laboratory.

Therefore we invited 10different users of our focus group and asked them to try our new and old product whilst they're being filmed and observed live.

One room was prepared for the participants with cookies, drinks and three different devices - Desktop and smart phones. The observers (Product owners, UX-Designers and researchers) were sitting in antoher room and monitoring how the user behaved.

During the interview, we provided tasks to the participant and a moderator guided him through the process. Meanwhile, all the spectators noted down everything interesting and pinned thewalls of their room with post-its.

The Solution

After the usability lab, we had to iterate on minor details and adapt some insights from the test.

At this point of the project, we were convied that the new product details page will increase the conversion rate, help the user make decisions faster, more confident, and easier.

The MVP was built and tested live in six countries and the product have been successfully rolled out globally.

Chart Position

If an app or game is on the Top Charts, you’ll see the ranking on its app page. So you know how popular it is right now.

Videos

So. Many. Videos. Watch how an app works before you download it or get a preview of the gameplay.

Ratings and Reviews

The streamlined ratings system makes it easy to see how much an app is loved. And when a developer answers a question, everyone can see the response.

Editors’ Choice Badge

This seal of approval is given to apps and games that really deserve a download. If you see this, you know it’s going to be extraordinary.

In-App Purchases

It’s easy to find and make in-app purchases for the apps and games you already own. You can also subscribe to an app or level up in a game even if it’s not on your device yet.

BLOG & CASE STUDIES

Our Latest News & Updates

MARKETING

Why will webflow dominate the web in 2020.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Learn More
DESIGN

How to craft a perfect marketing campaign.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Learn More
BUSINESS

Learn how to get started with webflow interactions.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Learn More

STATISTICS ABOUT US

Over 600+ completed
webflow projects.

623

PROJECTS

13,323

GITHUB PULLS

34

AWWWARDS

ABOUT US

Creative and Technology Partner for Growing Brands

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

Search Engine Optimization

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"

Mark Smith (CEO & Founder)

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"

Joran Lee (Head of Marketing)

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"

Kate Jose (Business Advisor)