Helping e-commerce brands build customer trust

with verified sustainability data.

B2B

B2C

SaaS

E-commerce

Sustainability

Oct 2023 - Feb 2025

Role: Product Designer

2 Developers + CTO

Sales/Marketing team

Project Manager

Graphic Designer

Visit More-Gratitude

My Role &

Responsibilities

Led end-to-end UX & UI from concept to production.

Designed & iterated all core features across admin, client, customer user roles.

Built from scratch a multi-brand design system.

Defined visual design language.

Partnered with cross-functional teams to align UX decisions with product goals & technical feasibility.

{/1}

Challenges

& Solutions

{/1}

Challenges

& Solutions

Problem

Statement

E-shop customers are skeptical of vague “green” claims.

Brands often lack the verified proof behind those claims in the form of third-party certificates, etc.

Even when proof is provided, it is either too technical, too shallow, or doesn’t have visually engaging storytelling.

Problem

Statement

E-shop customers are skeptical of vague “green” claims.

Brands often lack the verified proof behind those claims in the form of third-party certificates, etc.

Even when proof is provided, it is either too technical, too shallow, or doesn’t have visually engaging storytelling.

Business

Objectives

Help sustainable brands increase market exposure and revenue by building customer trust.

Give customers trustworthy, engaging sustainability data to support more informed buying decisions.

Position Gratitude as a trusted solution in ethical e-commerce and grow B2B revenue via SaaS subscriptions.

Business

Objectives

Help sustainable brands increase market exposure and revenue by building customer trust.

Give customers trustworthy, engaging sustainability data to support more informed buying decisions.

Position Gratitude as a trusted solution in ethical e-commerce and grow B2B revenue via SaaS subscriptions.

Solution

Deliver a web platform that lets e-commerce brands showcase their verified sustainability data — traceable supply chain steps, claims & certificates, price breakdowns — through an embeddable e-shop widget and mobile product stories behind QR-code.

Solution

Deliver a web platform that lets e-commerce brands showcase their verified sustainability data — traceable supply chain steps, claims & certificates, price breakdowns — through an embeddable e-shop widget and mobile product stories behind QR-code.

Grt-dashboard
Grt-dashboard

{/2}

Deliverables

{/2}

Deliverables

B2B Web Platform

For brands to get their sustainability data verified and configure it for public showcase.

B2B Web Platform

For brands to get their sustainability data verified and configure it for public showcase.

B2C Experiences

E-shop widgets and QR-code mobile presentations for e-commerce customers.

B2C Experiences

E-shop widgets and QR-code mobile presentations for e-commerce customers.

Back-Office Tool

For Gratitude admins to verify client data and manage platform content.

Back-Office Tool

For Gratitude admins to verify client data and manage platform content.

Project

Timeline

{/3}

The work on this project followed iterative processes within an agile environment — collaboratively implementing feature by feature across design, development, and strategy.

Project-Timeline
Project-Timeline

UX Strategy &

Research

{/4}

Instead of traditional user interviews or usability testing (which weren’t feasible at that stage in our startup environment), I focused on a lean UX approach, defined by competitor analysis and client feedback.

Competitor analysis of direct and adjacent sustainability tools to assess how sustainability data was structured, visually represented, and embedded into e-commerce.

This helped inform the design of our widget and product presentation logic.

Client feedback loops: While early designs were based on hypotheses and industry standards, we validated them through demo sessions and follow-ups with real clients.

Their input led to several refinements — such as varying widget sizes for different e-shop layouts and streamlining document uploads.

Information Architecture

{/5}

Based on early research and requirements, I shaped the platform’s information architecture for both B2B and Gratitude Admin roles.

Information-Architecture
Information-Architecture

{/6-1}

Design UI Features Decisions & Impact

{/6-1}

Design UI Features Decisions & Impact

Claim Verification & Display

Sustainable brands need a fast, guided way to prepare and get their sustainability claims verified — and have them displayed transparently on webpages of their products. That means a clear way of associating claims with products and understanding the requirements for the proof documentation that needs to be uploaded to substantiate claims.

Claim Verification & Display

Sustainable brands need a fast, guided way to prepare and get their sustainability claims verified — and have them displayed transparently on webpages of their products. That means a clear way of associating claims with products and understanding the requirements for the proof documentation that needs to be uploaded to substantiate claims.

Add Claim

Browse and quickly find relevant claims through search & filters.

Define Submission

Select claim level and see clear requirements for proof.

Document Upload

Attach certificates/reports, add context for customers.

Link Products

Bulk-select products to connect with verified claims.

Track Status

Monitor submissions, validity, and approvals in one place

Add Claim

Browse and quickly find relevant claims through search & filters.

Define Submission

Select claim level and see clear requirements for proof.

Document Upload

Attach certificates/reports, add context for customers.

Link Products

Bulk-select products to connect with verified claims.

Track Status

Monitor submissions, validity, and approvals in one place

Add Claim

Browse and quickly find relevant claims through search & filters.

Define Submission

Select claim level and see clear requirements for proof.

Document Upload

Attach certificates/reports, add context for customers.

Link Products

Bulk-select products to connect with verified claims.

Track Status

Monitor submissions, validity, and approvals in one place

  • Clients can submit a new claim in under 10 minutes — from selection to submission.

  • Clients can submit a new claim in under 10 minutes — from selection to submission.

  • Time-saving features like submission duplication and product reassignment reduce repetitive work, especially for similar submissions or renewals of expiring ones.

  • Time-saving features like submission duplication and product reassignment reduce repetitive work, especially for similar submissions or renewals of expiring ones.

  • The process eliminates to the maximum extent the need for support requests.

  • The process eliminates to the maximum extent the need for support requests.

The Widget behaviour in desktop and mobile browsers displaying sustainability claims

Approved claims appear instantly in the product e-shop widget with description, document proof, and a blockchain record. B2B Admin controls widget order and size. It is optimized for desktop and mobile views.

Approved claims appear instantly in the product e-shop widget with description, document proof, and a blockchain record. B2B Admin controls widget order and size. It is optimized for desktop and mobile views.

  • Customers understand sustainability claims instantly, without needing to read PDFs or search elsewhere.

  • Customers understand sustainability claims instantly, without needing to read PDFs or search elsewhere.

  • Having the proof at hands, claims can inform the customer at more conscious shopping decisions.

  • Having the proof at hands, claims can inform the customer at more conscious shopping decisions.

  • Various widget sizes and layouts ensure seamless integration with different e-shop designs.

  • Various widget sizes and layouts ensure seamless integration with different e-shop designs.

{/6-2}

Feature 2

{/6-2}

Feature 2

Price & Supply Chain

Transparency

Brands often struggle to present their product journey and cost breakdown in a way that’s both trustworthy and easy to digest for customers.

With Gratitude clients can define Price Transparency (PT) and Supply Chain Transparency (SCT) for each product. These two modules are closely linked in both UX and logic — and are designed to make data input intuitive and updates efficient even for non-technical users.

Price & Supply Chain

Transparency

Brands often struggle to present their product journey and cost breakdown in a way that’s both trustworthy and easy to digest for customers.

With Gratitude clients can define Price Transparency (PT) and Supply Chain Transparency (SCT) for each product. These two modules are closely linked in both UX and logic — and are designed to make data input intuitive and updates efficient even for non-technical users.

PT - Define Cost Categories

Select or create categories that reflect product pricing.

PT - Specify Cost Breakdown

Assign percentages and reorder for clear widget display.

SCT - Set Supply Chain Steps

Use pre-selected defaults or add custom steps to map the journey.

SCT - Add Step Details

Upload documents, locations, and multiple items without clutter.

PT - Define Cost Categories

Select or create categories that reflect product pricing.

PT - Specify Cost Breakdown

Assign percentages and reorder for clear widget display.

SCT - Set Supply Chain Steps

Use pre-selected defaults or add custom steps to map the journey.

SCT - Add Step Details

Upload documents, locations, and multiple items without clutter.

PT - Define Cost Categories

Select or create categories that reflect product pricing.

PT - Specify Cost Breakdown

Assign percentages and reorder for clear widget display.

SCT - Set Supply Chain Steps

Use pre-selected defaults or add custom steps to map the journey.

SCT - Add Step Details

Upload documents, locations, and multiple items without clutter.

  • Re-using the filled-out forms as templates - massive time saver.

  • Re-using the filled-out forms as templates - massive time saver.

  • Automatic data validation eliminates user errors.

  • Automatic data validation eliminates user errors.

  • The interface patterns for both features are similar. That sped up the development of the platform, and users save time by going through familiar workflows.

  • The interface patterns for both features are similar. That sped up the development of the platform, and users save time by going through familiar workflows.

The Widget behaviour in desktop and mobile browsers displaying Supply Chain and Price Transparency respectively

Price Transparency: Customers instantly see where their money goes with a pie chart graph and percentage breakdown with additional descriptions.

Traceable Journeys: Every step from raw materials to distribution is on display — complete with names, origins, suppliers, document & links. In case of large number of items or large chunks of information, these are collapsed and can be instantly viewed by expanding.

Price Transparency: Customers instantly see where their money goes with a pie chart graph and percentage breakdown with additional descriptions.

Traceable Journeys: Every step from raw materials to distribution is on display — complete with names, origins, suppliers, document & links. In case of large number of items or large chunks of information, these are collapsed and can be instantly viewed by expanding.

  • Visual breakdowns of price and supply chain make complex data digestible in seconds.

  • Visual breakdowns of price and supply chain make complex data digestible in seconds.

{/6-3}

Feature 3

{/6-3}

Feature 3

Presentation Configurator & QR-Code Stories

Product packaging have limited space — they can only fit short labels or certification logos, leaving most sustainability data unseen. For brands that invest heavily in transparency, this means their efforts are often hidden.

By adding a product-specific QR code that opens an interactive, mobile-friendly presentation, shoppers can quickly see the full picture: where the product came from, how it was made, and why it’s a better choice. In a store, that extra context can be one of deciding factors that drives a purchase.

Presentation Configurator & QR-Code Stories

Product packaging have limited space — they can only fit short labels or certification logos, leaving most sustainability data unseen. For brands that invest heavily in transparency, this means their efforts are often hidden.

By adding a product-specific QR code that opens an interactive, mobile-friendly presentation, shoppers can quickly see the full picture: where the product came from, how it was made, and why it’s a better choice. In a store, that extra context can be one of deciding factors that drives a purchase.

Select Products

Choose which products will share the same story.

Define Story Structure

Start with pre-selected sections in logical order, reorder if needed.

Customize Content

Add text and media per section with live mobile preview.

Generate QR Code

Instantly create a product-specific QR-code linking to the story.

Select Products

Choose which products will share the same story.

Define Story Structure

Start with pre-selected sections in logical order, reorder if needed.

Customize Content

Add text and media per section with live mobile preview.

Generate QR Code

Instantly create a product-specific QR-code linking to the story.

Select Products

Choose which products will share the same story.

Define Story Structure

Start with pre-selected sections in logical order, reorder if needed.

Customize Content

Add text and media per section with live mobile preview.

Generate QR Code

Instantly create a product-specific QR-code linking to the story.

  • Effortless Storytelling: Non-designers can create engaging, mobile-ready product stories in under 10 minutes (layout is already pre-defined and most of the data pre-fetched).

  • Effortless Storytelling: Non-designers can create engaging, mobile-ready product stories in under 10 minutes (layout is already pre-defined and most of the data pre-fetched).

  • Visual Brand Consistency: Pre-built templates ensure a unified brand voice across all product presentations, without losing flexibility for minor adjustments.

  • Visual Brand Consistency: Pre-built templates ensure a unified brand voice across all product presentations, without losing flexibility for minor adjustments.

  • Reduced Marketing Workload: Instead of spending a lot of time on custom solutions, brands can use our tool and save the time for their business activities.

  • Reduced Marketing Workload: Instead of spending a lot of time on custom solutions, brands can use our tool and save the time for their business activities.

The QR-code product presentation in action

The customer scans QR-code and an intuitive Instagram-like story opens: splash intro, product/brand story, video explaining the product/brand, a list of claims with details on expand, product’s price and supply chain breakdown. At the end of the journey user can leave feedback by rating the experience and share the story.

The interface is adaptable to any modern smartphone layout: from largest iPhones to smallest 320px iPhone SE.

The customer scans QR-code and an intuitive Instagram-like story opens: splash intro, product/brand story, video explaining the product/brand, a list of claims with details on expand, product’s price and supply chain breakdown. At the end of the journey user can leave feedback by rating the experience and share the story.

The interface is adaptable to any modern smartphone layout: from largest iPhones to smallest 320px iPhone SE.

  • Customers scan and an have an instant access into the product story without downloads or logins.

  • Customers scan and an have an instant access into the product story without downloads or logins.

  • The whole story can be watched within a minute or five, depending on content. The smooth transitions, familiarity of Instagram-like experience and value of information keep the user engaged.

  • The whole story can be watched within a minute or five, depending on content. The smooth transitions, familiarity of Instagram-like experience and value of information keep the user engaged.

  • Presentations have the room for new future features such as life-cycle assessment, product care tips, or related product highlights, as well as more visual customisation.

  • Presentations have the room for new future features such as life-cycle assessment, product care tips, or related product highlights, as well as more visual customisation.

{/7}

Style &

Component Guide

A short notice: the design system was built from scratch, with use of variables, and maintained for further design iterations.

{/7}

Style &

Component Guide

A short notice: the design system was built from scratch, with use of variables, and maintained for further design iterations.

Grt-designsystem
Grt-designsystem

{/8}

Measuring Success

Important Note

In February 2025 Gratitude Co. faced severe lack of investments, the whole project halted at this stage.

Important Note

In February 2025 Gratitude Co. faced severe lack of investments, the whole project halted at this stage.

Although formal analytics tools weren’t implemented during the MVP stage, the platform was designed with clear points for measuring adoption and impact:

  • 17 sec — average time customers spent interacting with the widget (early engagement metric);

  • Widget engagement rate — % of product page visitors in e-shop who opened the widget;

  • QR scan rate — number of customers scanning product QR-codes in-store;

  • Feedback review — how many customers found the widget / presentation experiences valuable or not valuable, and how many does not give any feedback at all.

  • Proof document open rate — measuring trust-building behavior;

  • Feature adoption — 4 early clients integrated Claims, PT, and/or SCT; 2 also prepared QR presentations (though not yet rolled out on packaging).

These metrics would guide product iteration, highlight ROI for clients, and validate the platform’s role in influencing sustainable purchasing behavior.

{/9}

Results &

Key Takeaways

{/9}

Results &

Key Takeaways

Live product

launch in Jun 2024, growing 0→5 paying B2B clients from 🇸🇰, 🇫🇮, 🇨🇾 by Jan 2025. 4 of them integrated our features into their business.

Positive feedback

from the clients regarding not only the final product — e-shop widgets & QR-code presentations, — but also the intuitive and time-efficient workflow behind the platform.

Live product

launch in Jun 2024, growing 0→5 paying B2B clients from 🇸🇰, 🇫🇮, 🇨🇾 by Jan 2025. 4 of them integrated our features into their business.

Positive feedback

from the clients regarding not only the final product — e-shop widgets & QR-code presentations, — but also the intuitive and time-efficient workflow behind the platform.

Scalable product

with potential expanding to the wider EU market, both in terms of B2B brands and their customers.

This project showed me how tightly-aligned business requirements, a clear UX vision, and consistent iteration can produce a product that serves both operational efficiency and customer engagement — even in the lean, high-pressure environment of a startup.

Scalable product

with potential expanding to the wider EU market, both in terms of B2B brands and their customers.

This project showed me how tightly-aligned business requirements, a clear UX vision, and consistent iteration can produce a product that serves both operational efficiency and customer engagement — even in the lean, high-pressure environment of a startup.

Partnering with Gratitude has significantly enhanced our ability to showcase our commitment to sustainability. Their verification widget provides clear, trustworthy proof of our values, setting us apart and building greater trust with our customers.

Andrej Chovan

CEO of Lebeddie, Gratitude client

We are real business and customers, who are looking for natural, effective skin care on our website, can spot more-gratitude icon, which helps in customer’s decision making as part of the purchasing process and journey on our website.

Andrej Chovan

CEO of Lebeddie, Gratitude client

{/10}

Next Steps

{/10}

Next Steps

If development continued, high-impact improvements and iterations could include:

  • AI-powered translations — automatically localize claim descriptions and document summaries for local market audiences.

  • Dashboard implementation — give B2B clients insight into widget/QR-story engagement, helping them track the performance of these storytelling tools.

  • Future feature branches — integration of life-cycle assessment data, cross-selling sustainable products, and in-store tips for end customers.

  • More visual customisation for QR-code presentations — expand presentation templates with adjustable layouts, imagery, and branding elements.

  • Widget dark mode — adapt to darker e-shop themes.

If development continued, high-impact improvements and iterations could include:

  • AI-powered translations — automatically localize claim descriptions and document summaries for local market audiences.

  • Dashboard implementation — give B2B clients insight into widget/QR-story engagement, helping them track the performance of these storytelling tools.

  • Future feature branches — integration of life-cycle assessment data, cross-selling sustainable products, and in-store tips for end customers.

  • More visual customisation for QR-code presentations — expand presentation templates with adjustable layouts, imagery, and branding elements.

  • Widget dark mode — adapt to darker e-shop themes.

Thank You 💫

If you have any questions left, feel free to reach out to me anytime.

Back to all Case Studies

Serhii Klymenko

Updated: Sep 2025

Designed & Built by Me 💚

Serhii Klymenko

Updated: Sep 2025

Designed & Built by Me 💚