Clothing Brand Hellstar's Authentication App
Clothing Brand Hellstar's Authentication App
Bridging physical products to digital experiences featuring authentication and content-driven approaches
Bridging physical products to digital experiences featuring authentication and content-driven approaches
Role
Product Designer
Product Designer
Timeline
6 weeks
6 weeks
Deliverables
Web App
Web App
Hi-Fi Protoypes
Hi-Fi Protoypes
Tools
Figma
Figma
Adobe CC
Adobe CC
Team
CEO
CEO
SWE
Sr Product Designer
Sr Product Designer
Product Designer
Product Designer
Background
Background
Dopamine
Dopamine
Dopamine is a B2B2C software company that transforms physical products into secure portals for brand engagement. They do this by offering NFC chips that are sewn onto brand merchandise and programmatically connected to customizable microsites offering various digital experiences according to the brands needs. Consumers directly tap the NFC chip on the merch using their smartphone devices, from which they are redirected to the brand microsite. In essence, Dopamine’s focus is on creating more intimate connections between brands and consumers using next-gen “phygital” technology.
Dopamine is a B2B2C software company that transforms physical products into secure portals for brand engagement. They do this by offering NFC chips that are sewn onto brand merchandise and programmatically connected to customizable microsites offering various digital experiences according to the brands needs. Consumers directly tap the NFC chip on the merch using their smartphone devices, from which they are redirected to the brand microsite. In essence, Dopamine’s focus is on creating more intimate connections between brands and consumers using next-gen “phygital” technology.
NFC Chips
NFC Chips
Dopamine chips use blockchain technology to enable unique digital identification of physical assets. Each chip, on creation, utilizes a cryptographic signing algorithm which generates a one-time private / public key pair in a secure (unreadable) part of the chip, which is registered on a decentralized chip registry on the blockchain. Once registered, on physically scanning the chip (using an NFC device such as a smart phone), a signature is generated by the chip and verified through the registry to be a legitimated 1 of 1 physical asset registered through Dopamine. This registry thus acts as a digital source of truth for all Dopamine-registered physical items, and is what enables creation of digital scarcity of physical objects.
Dopamine chips use blockchain technology to enable unique digital identification of physical assets. Each chip, on creation, utilizes a cryptographic signing algorithm which generates a one-time private / public key pair in a secure (unreadable) part of the chip, which is registered on a decentralized chip registry on the blockchain. Once registered, on physically scanning the chip (using an NFC device such as a smart phone), a signature is generated by the chip and verified through the registry to be a legitimated 1 of 1 physical asset registered through Dopamine. This registry thus acts as a digital source of truth for all Dopamine-registered physical items, and is what enables creation of digital scarcity of physical objects.
Mission
Mission
Dopamine’s mission is to empower brands by tightening the relationship between brands and consumers. By using Dopamine’s NFC technology, consumers and brands can develop relationships that extend beyond point-of-sale. Dopamine wants to ensure that the experience of scanning merchandise by a consumer results in a closer connection of that consumer with the brand, and that this connection could be amplified as a network effect by instilling forms of social proof in that interaction.
On top of this, from a more cultural standpoint, Dopamine wants to be the breeding grounds for the next wave of streetwear consumers, which is a testament to why Hellstar was chosen as their flagship partner.
Dopamine’s mission is to empower brands by tightening the relationship between brands and consumers. By using Dopamine’s NFC technology, consumers and brands can develop relationships that extend beyond point-of-sale. Dopamine wants to ensure that the experience of scanning merchandise by a consumer results in a closer connection of that consumer with the brand, and that this connection could be amplified as a network effect by instilling forms of social proof in that interaction.
On top of this, from a more cultural standpoint, Dopamine wants to be the breeding grounds for the next wave of streetwear consumers, which is a testament to why Hellstar was chosen as their flagship partner.
Problem
Problem
Authenticity
Authenticity
Hellstar has been having counterfeit issues and losing trust in customers when most of Hellstar’s products are sold through resell, not directly from Hellstar. Indeed, the global anti-counterfeit packaging market is valued at USD 179.4 billion in 2024 and bad actors grow their businesses by creating counterfeits, even hiring experts. Its impossible to see if a product, especially in brands wear, is legitimate or illegitimate which is why Hellstar needed the chip and authentication solution.
Hellstar has been having counterfeit issues and losing trust in customers when most of Hellstar’s products are sold through resell, not directly from Hellstar. Indeed, the global anti-counterfeit packaging market is valued at USD 179.4 billion in 2024 and bad actors grow their businesses by creating counterfeits, even hiring experts. Its impossible to see if a product, especially in brands wear, is legitimate or illegitimate which is why Hellstar needed the chip and authentication solution.
On top of the core problem of ensuring a seamless authentication UX, there are also two other authentication issues:
Even though the scanning process leading to an interface showing success of authentication is indicative that an authentic merchandise was scanned, it does not give FULL confidence of the fact.
The way the cryptographic Dopamine chips work is that on each scan they spit out a one-time, non-shareable URL that the mobile phone browser directs to. That URL contains the chip signature proving chip legitimacy, and the moment the URL is opened it cannot be reused again (i.e. requires a chip to be scanned again). The problem, however, is that a bad actor could theoretically take a real chip, generate a bunch of legitimate URLs without opening them, and then create a fake chip that essentially regurgitates out all these chips for each scan. Now, the infrastructure requirements to do this are considerable, but because of the demand Hellstar had, we had to make sure even this problem was also addressed.
On top of the core problem of ensuring a seamless authentication UX, there are also two other authentication issues:
Even though the scanning process leading to an interface showing success of authentication is indicative that an authentic merchandise was scanned, it does not give FULL confidence of the fact.
The way the cryptographic Dopamine chips work is that on each scan they spit out a one-time, non-shareable URL that the mobile phone browser directs to. That URL contains the chip signature proving chip legitimacy, and the moment the URL is opened it cannot be reused again (i.e. requires a chip to be scanned again). The problem, however, is that a bad actor could theoretically take a real chip, generate a bunch of legitimate URLs without opening them, and then create a fake chip that essentially regurgitates out all these chips for each scan. Now, the infrastructure requirements to do this are considerable, but because of the demand Hellstar had, we had to make sure even this problem was also addressed.
Dopamine's Project Goal
Dopamine's Project Goal
In order to ensure the likelihood of a user being domain spoofed by a fake chip was close to 0, the question is,
In order to ensure the likelihood of a user being domain spoofed by a fake chip was close to 0, the question is,
“How can I make sure my users are VERIFYING that the website is hellstar.dopamine.xyz and not something like hellstar.d0pamine.xyz or he11star.dopamine.xyz”
“How can I make sure my users are VERIFYING that the website is hellstar.dopamine.xyz and not something like hellstar.d0pamine.xyz or he11star.dopamine.xyz”
We will apply our mission to assist Hellstar in providing authenticity to their products and increasing brand loyalty with consumer.
We will apply our mission to assist Hellstar in providing authenticity to their products and increasing brand loyalty with consumer.
My goal as a Product Designer
for this project
My goal as a Product Designer
for this project
My goal as a Product Designer
for this project
Creating intuitive designs and branding for the product while consolidating complex hierarchy and ensuring all in product features and needs.
Creating intuitive designs and branding for the product while consolidating complex hierarchy and ensuring all in product features and needs.
Navigating through research and the crypto trading platform market to hold the defined’s product in high standards in competitiveness
Navigating through research and the crypto trading platform market to hold the defined’s product in high standards in competitiveness
Research
Research
Hellstar's Target Market and Consumer Personas
Hellstar's Target Market and Consumer Personas
Our first focus into UX research was to target who Hellstar’s consumers were, their behaviors, and their needs towards Hellstar. I surveyed through Hellstar’s discord which resulted in 500+ survey results. I analyzed the following that Hellstar’s consumers circle around these three values:
Our first focus into UX research was to target who Hellstar’s consumers were, their behaviors, and their needs towards Hellstar. I surveyed through Hellstar’s discord which resulted in 500+ survey results. I analyzed the following that Hellstar’s consumers circle around these three values:
In order to make sure that Sam and Hunter will be satisfied with the Hellstar Authentication app, we need to focus their problems of social activity + reassurance. Sam is based off of “The Desire of Social Status”, who is a reseller who collects streetwear products and influence people on social media. Hunter is based off of “The Need of Sustained Brand Culture and Art” a long-time fan of Hellstar and wants reassurance in the safety of Hellstar products and to be in a sustained community.
In order to make sure that Sam and Hunter will be satisfied with the Hellstar Authentication app, we need to focus their problems of social activity + reassurance. Sam is based off of “The Desire of Social Status”, who is a reseller who collects streetwear products and influence people on social media. Hunter is based off of “The Need of Sustained Brand Culture and Art” a long-time fan of Hellstar and wants reassurance in the safety of Hellstar products and to be in a sustained community.
Dopamine Competitive Analysis
Dopamine Competitive Analysis
To understand more about authentication brands, I analyzed how Dopamine can differentiate with other brands and who/what Dopamine is competing with.
To understand more about authentication brands, I analyzed how Dopamine can differentiate with other brands and who/what Dopamine is competing with.
Competitive Analysis Matrix
Competitive Analysis Matrix
Product Positioning
Product Positioning
In order to make a successful B2B product is through differentiated strategy in app content and usability features, thus I analyzed Dopamine’s authentication app position in the current market.
In order to make a successful B2B product is through differentiated strategy in app content and usability features, thus I analyzed Dopamine’s authentication app position in the current market.
Dopamine’s Value Proposition: Personalization in content and features tailored for brands and their consumers.
Dopamine’s Value Proposition: Personalization in content and features tailored for brands and their consumers.
Y Axis depicts if their app contents are customizable and tailored towards brands and their consumers.
X Axis depicts if their apps are offered in a wide-range of features for brands and their consumers e.g.) Exclusive content, product details, repair services, etc...
Y Axis depicts if their app contents are customizable and tailored towards brands and their consumers.
X Axis depicts if their apps are offered in a wide-range of features for brands and their consumers e.g.) Exclusive content, product details, repair services, etc...
In comparison to Dopamine’s competitors, Dopamine’s Authentication app stands on a more personalized and less featured app, and in the current stage, Dopamine is yet to add more features to the app. In the future, Dopamine wants to be an app that app features and app contents can both be personalized by brands.
In comparison to Dopamine’s competitors, Dopamine’s Authentication app stands on a more personalized and less featured app, and in the current stage, Dopamine is yet to add more features to the app. In the future, Dopamine wants to be an app that app features and app contents can both be personalized by brands.
Conclusion of UX Research
Conclusion of UX Research
By inspecting Hellstar’s consumers and target market, the Hellstar authentication app should base on the two personas of Hellstar’s consumer; Trend Follower and Community Follower. Both persona’s values and Hellstar’s branding ultimately leads to “Streetwear Hype,” which is what Hellstar’s tight-knit community shares in value and what most Hellstar’s consumers want.
By inspecting Hellstar’s consumers and target market, the Hellstar authentication app should base on the two personas of Hellstar’s consumer; Trend Follower and Community Follower. Both persona’s values and Hellstar’s branding ultimately leads to “Streetwear Hype,” which is what Hellstar’s tight-knit community shares in value and what most Hellstar’s consumers want.
Due to Hellstar’s closeness to their own consumers (via social media, group chats) and consumer needs for “Streetwear Hype,” I concluded that, exclusivity and exposure are important aspects of a streetwear community.
Due to Hellstar’s closeness to their own consumers (via social media, group chats) and consumer needs for “Streetwear Hype,” I concluded that, exclusivity and exposure are important aspects of a streetwear community.
Moreover, by my competitive analysis, brainstorming for more differentiated features and content will allow Hellstar to tailor the authentication app for their branding and for users to experience Hellstar’s “Streetwear Hype” so the need for users to be confident in using Dopamine’s app is essential for building this app.
Moreover, by my competitive analysis, brainstorming for more differentiated features and content will allow Hellstar to tailor the authentication app for their branding and for users to experience Hellstar’s “Streetwear Hype” so the need for users to be confident in using Dopamine’s app is essential for building this app.
Dopamine’s Authentication app should essentially increase exposure of Hellstar and discoverability for their consumers, by incorporating personalized features and content-driven designs for user interactions and user confidence.
Dopamine’s Authentication app should essentially increase exposure of Hellstar and discoverability for their consumers, by incorporating personalized features and content-driven designs for user interactions and user confidence.
Ideate
Ideate
Analyzing User Journey and Flow Chart
Analyzing User Journey and Flow Chart
For the first prototype, I made sure that I had all the basics covered for key user journey of a Hellstar buyer that includes; Scan, Claim, Account, Authenticate, and Manage.
For the first prototype, I made sure that I had all the basics covered for key user journey of a Hellstar buyer that includes; Scan, Claim, Account, Authenticate, and Manage.
Scan: User scans the chip
Claim: User claims the product
Account: User creates an account
Authenticate: User authenticates the product
Manage: User manages account
Scan: User scans the chip
Claim: User claims the product
Account: User creates an account
Authenticate: User authenticates the product
Manage: User manages account
Then, I created a service blueprint that covers the user journey through the user’s action and also the front-stage. Service blueprints indicates key journeys including features of what users can do in the stages.
Then, I created a service blueprint that covers the user journey through the user’s action and also the front-stage. Service blueprints indicates key journeys including features of what users can do in the stages.
Then, I created a service blueprint that covers the user journey through the user’s action and also the front-stage. Service blueprints indicates key journeys including features of what users can do in the stages.
Then, I created a service blueprint that covers the user journey through the user’s action and also the front-stage. Service blueprints indicates key journeys including features of what users can do in the stages.
Base Low Fidelity Flows for Hellstar Users
Base Low Fidelity Flows for Hellstar Users
Applying Core Product and Design Principles
Sam’s Use Case
Sam’s Use Case
By analyzing Sam’s needs of social media presence, exposure, and interacting with his audience, I brainstormed the following main features that can validate his needs into reality.
By analyzing Sam’s needs of social media presence, exposure, and interacting with his audience, I brainstormed the following main features that can validate his needs into reality.
Reaction feed + Share
Connecting Instagram with Hellstar app
Turning on notifications in settings
Sharing content between users
Allowing Sam’s followers (Viewers) to engage in Hellstar App
Reaction feed + Share
Connecting Instagram with Hellstar app
Turning on notifications in settings
Sharing content between users
Allowing Sam’s followers (Viewers) to engage in Hellstar App
The reaction feed is going to be the main source of how Sam is able to interact with his audience in and out of the Hellstar app as the feed will be in the homepage, the homepage will be the baseline to where users can further engage with the app.
My first step was to create user flows between Sam’s (Hellstar user) and Sam’s followers (Hellstar viewer).
The reaction feed is going to be the main source of how Sam is able to interact with his audience in and out of the Hellstar app as the feed will be in the homepage, the homepage will be the baseline to where users can further engage with the app.
My first step was to create user flows between Sam’s (Hellstar user) and Sam’s followers (Hellstar viewer).
Sam and Sam’s Follower User Journey Blueprint
Sam and Sam’s Follower User Journey Blueprint
Share is a new added key user action that applies to both Sam and Sam’s Follower’s user journey.
Share is a new added key user action that applies to both Sam and Sam’s Follower’s user journey.
Sam and Sam’s Follower Flowcharts
Sam and Sam’s Follower Flowcharts
Share is a new added key user action that applies to both Sam and Sam’s Follower’s user journey.
Share is a new added key user action that applies to both Sam and Sam’s Follower’s user journey.
Interactive Lo-fi Wireframes
Interactive Lo-fi Wireframes
Sam's Lo-fi Prototype
Sam's Follower Lo-fi Prototype
Key Actions:
Key Actions:
Instagram button underneath user profile on feed is shown for discoverability for each registered users
Any settings such as Modify Comment and Notification Settings activated, a pop-up modal will show
Sharing in Hellstar webapp is in IOS format
Instagram button underneath user profile on feed is shown for discoverability for each registered users
Any settings such as Modify Comment and Notification Settings activated, a pop-up modal will show
Sharing in Hellstar webapp is in IOS format
Hunter’s Use Case
Hunter’s Use Case
By analyzing Hunter’s needs of security and reassurance for Hellstar’s technology, I brainstormed animation ideas for product authentication animations that allows users like Hunter to feel more secure with their products being verified.
By analyzing Hunter’s needs of security and reassurance for Hellstar’s technology, I brainstormed animation ideas for product authentication animations that allows users like Hunter to feel more secure with their products being verified.
Checkmark
Lock
Fingerprint
Logo
Additionally, I brainedstormed some ideas for logo animations for a loading screen that gives the authentication process patience so that users can be affirmed that the system is going through. (Created with Rive)
Additionally, I brainedstormed some ideas for logo animations for a loading screen that gives the authentication process patience so that users can be affirmed that the system is going through. (Created with Rive)
Loading…
Loading…
Loading…
Users like Hunter wants a secure process for their purchased product so authentication security is important including how the web-app or the NFC chips aren’t fake and making sure the website is a verified hellstar.dopamine.xyz.
Users like Hunter wants a secure process for their purchased product so authentication security is important including how the web-app or the NFC chips aren’t fake and making sure the website is a verified hellstar.dopamine.xyz.
Hunter's Flowchart
Hunter's Flowchart
Interactive Lo-fi Wireframes
Interactive Lo-fi Wireframes
Prototype
Prototype
Design Tokens
Design Tokens
Before I develop the high-fidelity wireframes, creating a design system is a must to efficiently manage the components and variables added to the frames.
Before I develop the high-fidelity wireframes, creating a design system is a must to efficiently manage the components and variables added to the frames.
Usability Testing
Usability Testing
Verified Domain Banner
Verified Domain Banner
A: Positioned on top of logo
A: Positioned on top of logo
Primary color emphasizes importance
Corner radius accent visualizes a banner feel
Simple and straightforward
Counterfeits can easily copy
Primary color emphasizes importance
Corner radius accent visualizes a banner feel
Simple and straightforward
Counterfeits can easily copy
B: Positioned with Navbar
B: Positioned with Navbar
Follows wireframes in all stages
Educate users to ensure domain
Reduces real estate for content
Counterfeits cannot copy domain
Follows wireframes in all stages
Educate users to ensure domain
Reduces real estate for content
Counterfeits cannot copy domain
Before I develop the high-fidelity wireframes, creating a design system is a must to efficiently manage the components and variables added to the frames.
Before I develop the high-fidelity wireframes, creating a design system is a must to efficiently manage the components and variables added to the frames.
Survey Questions:
Survey Questions:
How long did it take to see the verified banner after the first screen? (Scale: 0-5 seconds)
Is the verified banner hard to see? (Scale: 0-5 0=Easy, 5=Hard)
What is memorable out of all the screens you've seen (Type box)
Are the contents too cramped in A or B
Which options do you like? A or B? Why? (Preference Test)
How long did it take to see the verified banner after the first screen? (Scale: 0-5 seconds)
Is the verified banner hard to see? (Scale: 0-5 0=Easy, 5=Hard)
What is memorable out of all the screens you've seen (Type box)
Are the contents too cramped in A or B
Which options do you like? A or B? Why? (Preference Test)
Results:
Results:
65% of users preferred A due to its colors and brightness; “Bright color”, “Size is noticable”
80% said A is Easy to see with an average of 2 in the scale of Easy
10% said Yes to content is cramped
70% said it took them 1 second to see the verification banner
65% of users preferred A due to its colors and brightness; “Bright color”, “Size is noticable”
80% said A is Easy to see with an average of 2 in the scale of Easy
10% said Yes to content is cramped
70% said it took them 1 second to see the verification banner
Results:
Results:
80% of users preferred B; “more clear in context”, “Looks clean”
80% said B is hard to see with a 4 in the scale of Easy to Hard
10% said Yes to content is cramped
60% said it took them 2 seconds to see the verification banner
80% of users preferred B; “more clear in context”, “Looks clean”
80% said B is hard to see with a 4 in the scale of Easy to Hard
10% said Yes to content is cramped
60% said it took them 2 seconds to see the verification banner
Result of testing:
Result of testing:
While visual communication such as colors and sizes are important, context and information has swayed results into users favoring B, which implies that B indicates CTA more than A.
However, the problem with B is the lack of visual indication.
While visual communication such as colors and sizes are important, context and information has swayed results into users favoring B, which implies that B indicates CTA more than A.
However, the problem with B is the lack of visual indication.
Revision:
Revision:
Adjust B with font resizing and apply information color (blue) for UI.
Adjust B with font resizing and apply information color (blue) for UI.
High Fidelity Prototype (Interactive)
High Fidelity Prototype (Interactive)
Revision
Revision
Learning from the first designs
Learning from the first designs
Looking from the bottoms up through iterations, explorations, and research, the redesigning process has been a journey full of ups and downs. I learned to take in feedbacks and stay at a user-centered mindset, keeping users' needs at stake. The hardships have been very rewarding, thanks to Dopamine and Hellstar. My key learnings for my next project will be to sync with engineers earlier and be able to document design systems and every detail so that the implementation process to seamlessly execute.
Looking from the bottoms up through iterations, explorations, and research, the redesigning process has been a journey full of ups and downs. I learned to take in feedbacks and stay at a user-centered mindset, keeping users' needs at stake. The hardships have been very rewarding, thanks to Dopamine and Hellstar. My key learnings for my next project will be to sync with engineers earlier and be able to document design systems and every detail so that the implementation process to seamlessly execute.
Result
Result
With the app launch, Hellstar not only gained over 10,000 new users, but also prevented the illegal reselling of tens of thousands of counterfeit Hellstar apparel. All over socials users now evangelize the use of this app to check for authenticity and mitigating the risk of deception to make the most use of their adored products.
With the app launch, Hellstar not only gained over 10,000 new users, but also prevented the illegal reselling of tens of thousands of counterfeit Hellstar apparel. All over socials users now evangelize the use of this app to check for authenticity and mitigating the risk of deception to make the most use of their adored products.
98%
98%
Reduction in counterfeit fraud
Reduction in counterfeit fraud
0.43%
0.43%
New Users
New Users
0.5%
0.5%
User Engagement
User Engagement
