Web2.5 payment
and account flow
for digital fashion

Web2.5 payment and account flow for digital fashion

How to convert users with different technological backgrounds
into return customers and long-term fans?
How to convert users with different technological backgrounds into return customers and long-term fans?

Introduction

Purchase flow for fiat and crypto

The Fabricant is a digital fashion house that aims to target users who come to shop with very different backgrounds. They offer augmented reality clothing (AR), crosschain customisable and phygital NFTs among many others.

Introduction

Purchase flow for fiat and crypto

The Fabricant is a digital fashion house that aims to target users who come to shop with very different backgrounds. They offer augmented reality clothing (AR), crosschain customisable and phygital NFTs among many others.

Introduction

Purchase flow for fiat and crypto

The Fabricant is a digital fashion house that aims to target users who come to shop with very different backgrounds. They offer augmented reality clothing (AR), crosschain customisable and phygital NFTs among many others.

Problem

Personas with very different technological backgrounds

The Fabricant users come to shop with very different backgrounds and expectations. Some of them are new to web 3.0 (crypto & nft, etc) and some of them are highly experienced and knowledgable about the field. We needed to deliver a payment and account system that would convert both these groups to return customers.

Problem

Personas with very different technological backgrounds

The Fabricant users come to shop with very different backgrounds and expectations. Some of them are new to web 3.0 (crypto & nft, etc) and some of them are highly experienced and knowledgable about the field. We needed to deliver a payment and account system that would convert both these groups to return customers.

Problem

Personas with very different technological backgrounds

The Fabricant users come to shop with very different backgrounds and expectations. Some of them are new to web 3.0 (crypto & nft, etc) and some of them are highly experienced and knowledgable about the field. We needed to deliver a payment and account system that would convert both these groups to return customers.

2 of our main personas

Doesn't have a crypto wallet yet

&

Trades regularly and has multiple wallets.

Solution

Simplify choice, build trust, and progressive disclosure

Enable our users to access most of the utilities our digital fashion items have to offer by adjusting to their technological background.

With the help of a third-party integration, we were able to set up a lightweight user flow where experienced people can make NFT purchases directly to their wallet, and beginner users can create an account just like how they used in web2.0 without the hassle of creating a wallet.

Solution

Simplify choice, build trust, and progressive disclosure

Enable our users to access most of the utilities our digital fashion items have to offer by adjusting to their technological background.

With the help of a third-party integration, we were able to set up a lightweight user flow where experienced people can make NFT purchases directly to their wallet, and beginner users can create an account just like how they used in web2.0 without the hassle of creating a wallet.

Solution

Simplify choice, build trust, and progressive disclosure

Enable our users to access most of the utilities our digital fashion items have to offer by adjusting to their technological background.

With the help of a third-party integration, we were able to set up a lightweight user flow where experienced people can make NFT purchases directly to their wallet, and beginner users can create an account just like how they used in web2.0 without the hassle of creating a wallet.

Scroll to UI design

Scroll to UI design

Personas

Based on empirical knowledge

Organising our audience into personas proved to be useful to create a shared knowledge of our hypothesis and after having validated the personas through numerous interviews, surveys, and data they also acted like a constantly evolving repository of knowledge.

  • Helped us get on the same page and prioritise

  • Easy point of reference in our conversations inside and outside the product team.

  • We kept updating and referring to personas throughout the whole design and development process

  • Helped with detailed oriented decisions like constructing vocabulary and branding guidelines.

Personas

Based on empirical knowledge

Organising our audience into personas proved to be useful to create a shared knowledge of our hypothesis and after having validated the personas through numerous interviews, surveys, and data they also acted like a constantly evolving repository of knowledge.

  • Helped us get on the same page and prioritise

  • Easy point of reference in our conversations inside and outside the product team.

  • We kept updating and referring to personas throughout the whole design and development process

  • Helped with detailed oriented decisions like constructing vocabulary and branding guidelines.

Personas

Based on empirical knowledge

Organising our audience into personas proved to be useful to create a shared knowledge of our hypothesis and after having validated the personas through numerous interviews, surveys, and data they also acted like a constantly evolving repository of knowledge.

  • Helped us get on the same page and prioritise

  • Easy point of reference in our conversations inside and outside the product team.

  • We kept updating and referring to personas throughout the whole design and development process

  • Helped with detailed oriented decisions like constructing vocabulary and branding guidelines.

Our 3 main personas

Interviews & usability tests

Mix of indepth qualitative and at scale quantitative research

Recruitment
I planned and conducted user interviews to enrich our personas with details specific to payment and accounts using Userinterviews.com.

Automated usability tests
As the project went on we started to use automated prototype tests at scale and to validate our decisions on usability. Sometimes I still conducted one on one tests to dive deeper into specific problems.

Building empathy
Sometimes I invited team members to join the interviews and usability tests to help them build empathy towards our users.

Interviews & usability tests

Mix of indepth qualitative and at scale quantitative research

Recruitment
I planned and conducted user interviews to enrich our personas with details specific to payment and accounts using Userinterviews.com.

Automated usability tests
As the project went on we started to use automated prototype tests at scale and to validate our decisions on usability. Sometimes I still conducted one on one tests to dive deeper into specific problems.

Building empathy
Sometimes I invited team members to join the interviews and usability tests to help them build empathy towards our users.

Interviews & usability tests

Mix of indepth qualitative and at scale quantitative research

Recruitment
I planned and conducted user interviews to enrich our personas with details specific to payment and accounts using Userinterviews.com.

Automated usability tests
As the project went on we started to use automated prototype tests at scale and to validate our decisions on usability. Sometimes I still conducted one on one tests to dive deeper into specific problems.

Building empathy
Sometimes I invited team members to join the interviews and usability tests to help them build empathy towards our users.

Customer maturity model

A model to track user behaviour and nudge them along the path

We considered the business value of having experienced people create accounts and created a user maturity model to nudge them along the long-term customer journey we thought to be most valuable for our users as well as for business.

Similarly, we also tracked the maturity journey of beginner users and thought about how we can help them become power users and consequently advocates for our platform.

Customer maturity model

A model to track user behaviour and nudge them along the path

We considered the business value of having experienced people create accounts and created a user maturity model to nudge them along the long-term customer journey we thought to be most valuable for our users as well as for business.

Similarly, we also tracked the maturity journey of beginner users and thought about how we can help them become power users and consequently advocates for our platform.

Customer maturity model

A model to track user behaviour and nudge them along the path

We considered the business value of having experienced people create accounts and created a user maturity model to nudge them along the long-term customer journey we thought to be most valuable for our users as well as for business.

Similarly, we also tracked the maturity journey of beginner users and thought about how we can help them become power users and consequently advocates for our platform.

Competitor analysis

Finding our niche as mid-tech & high-fashion platform

We explored the topic by looking at the competitive landscape through different lenses and plotting out the result in a matrixes like I show here.

High-fashion and wearability is rarely paired with easy to access technology and no one is helping luxury brands access the non web3 market at scale.

Competitor analysis

Finding our niche as mid-tech & high-fashion platform

We explored the topic by looking at the competitive landscape through different lenses and plotting out the result in a matrixes like I show here.

High-fashion and wearability is rarely paired with easy to access technology and no one is helping luxury brands access the non web3 market at scale.

Competitor analysis

Finding our niche as mid-tech & high-fashion platform

We explored the topic by looking at the competitive landscape through different lenses and plotting out the result in a matrixes like I show here.

High-fashion and wearability is rarely paired with easy to access technology and no one is helping luxury brands access the non web3 market at scale.

Competitor analysis instance:
X axis - technical background necessary, Y axis - wearability features

Prototyping

Reduced complexity, trust signifiers

I used different fidelity prototypes to validate my assumptions. Since I was working from an already established design system it was easy to use high fidelity components but the level of functionality differed greatly depending on my goals in order to achieve speed and focus.

I recruited numerous people from both target groups (beginners and experts) based on a pre-screening survey. Also used prototypes often for communicating current state of design to the entire company on a weekly basis.

Prototyping

Reduced complexity, trust signifiers

I used different fidelity prototypes to validate my assumptions. Since I was working from an already established design system it was easy to use high fidelity components but the level of functionality differed greatly depending on my goals in order to achieve speed and focus.

I recruited numerous people from both target groups (beginners and experts) based on a pre-screening survey. Also used prototypes often for communicating current state of design to the entire company on a weekly basis.

Prototyping

Reduced complexity, trust signifiers

I used different fidelity prototypes to validate my assumptions. Since I was working from an already established design system it was easy to use high fidelity components but the level of functionality differed greatly depending on my goals in order to achieve speed and focus.

I recruited numerous people from both target groups (beginners and experts) based on a pre-screening survey. Also used prototypes often for communicating current state of design to the entire company on a weekly basis.

The sequence of iterations of the opening screen.

UI Design

Working from a robust already established and pixel perfect design system the final stage is more about mapping edge cases and creating the phases delivery together with the product owner and developers.

UI Design

Working from a robust already established and pixel perfect design system the final stage is more about mapping edge cases and creating the phases delivery together with the product owner and developers.

UI Design

Working from a robust already established and pixel perfect design system the final stage is more about mapping edge cases and creating the phases delivery together with the product owner and developers.

Clear focus on next step & subtle secondary options

  • Payment method selection as first step

  • Changing item amount available on all screens

  • Visible NFT and conversion price at all steps

Final MVP purchasing flow on desktop.
Final MVP purchasing flow on mobile.

View NFT on mobile

While purchase is being made the NFT should stay visible to raise the confidance of users by providing them with context.

Data & delivery

After the MVP was delivered we continued to keep our eyes on the quantitative data with out data scientist. I made requests to him every week to validate my highest priority assumptions of the time and discussed his findings in depth.

I also continued to conduct interviews and usability tests replacing the prototype with the delivered product and which helped me understand what the next steps should be and if our efforts are paying off in the way we expected them to.

Data & delivery

After the MVP was delivered we continued to keep our eyes on the quantitative data with out data scientist. I made requests to him every week to validate my highest priority assumptions of the time and discussed his findings in depth.

I also continued to conduct interviews and usability tests replacing the prototype with the delivered product and which helped me understand what the next steps should be and if our efforts are paying off in the way we expected them to.

Data & delivery

After the MVP was delivered we continued to keep our eyes on the quantitative data with out data scientist. I made requests to him every week to validate my highest priority assumptions of the time and discussed his findings in depth.

I also continued to conduct interviews and usability tests replacing the prototype with the delivered product and which helped me understand what the next steps should be and if our efforts are paying off in the way we expected them to.

Conversion growth

After deploying the new payment flow and account system, it was clear that our conversion rate no longer suffers from usability issues caused by lack of understanding or confidence in the outcome.

Conversion growth

After deploying the new payment flow and account system, it was clear that our conversion rate no longer suffers from usability issues caused by lack of understanding or confidence in the outcome.

Conversion growth

After deploying the new payment flow and account system, it was clear that our conversion rate no longer suffers from usability issues caused by lack of understanding or confidence in the outcome.

Error rate reduced

A previously high error rate resulting from unsteady technology of bank card payments involving crypto was successfully addressed. Error rates reached and succeeded industry standards on both of our payment methods.

Error rate reduced

A previously high error rate resulting from unsteady technology of bank card payments involving crypto was successfully addressed. Error rates reached and succeeded industry standards on both of our payment methods.

Error rate reduced

A previously high error rate resulting from unsteady technology of bank card payments involving crypto was successfully addressed. Error rates reached and succeeded industry standards on both of our payment methods.

User account growth

A larger portion of our visitors started to create accounts while completing their purchase than before even without the intention to make a purchase just to make sure they are part of our ecosystem.

User account growth

A larger portion of our visitors started to create accounts while completing their purchase than before even without the intention to make a purchase just to make sure they are part of our ecosystem.

User account growth

A larger portion of our visitors started to create accounts while completing their purchase than before even without the intention to make a purchase just to make sure they are part of our ecosystem.

More projects