Clothing Brand Hellstar's Authentication App

Bridging physical products to digital experiences featuring authentication and content-driven approaches

Role

Lead Product Designer

Timeline

6 weeks

Deliverables

Web App
UI Mockup

Skills

UI Design
User Research
Design System
Prototyping

Tools

Figma
Adobe CC

Background

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.

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’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

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.

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:

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”

We will apply our mission to assist Hellstar in providing authenticity to their products and increasing brand loyalty with consumer.

My goal as a Dopamine Product Designer:

“How do I bring hype to hellstar’s authentication app?”

To reassure the authentication process to the user that their products are legitimate to bolster consumer confidence, and adding to the experience a layer of social expressiveness that allows users to connect and flex their physical objects digitally, thus increasing user engagement.

Research

1. Hellstar Target Marketing & 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:

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.

2. 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.

Competitive Analysis Matrix

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.

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...

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.

3. 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.

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.

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

1. Analyzing User Journey and Flowchart

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

I also created a user journey flow chart as a measure for the blueprint to make sure I had the app flow system covered including errors for creating wireframes. Flow charts indicates the bases of wireframes needed for the app.

2. Applying Core Product and Design Principles

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.

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).

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.

Sam and Sam’s Follower Flowcharts

Interactive Lo-fi Wireframes

Sam's Lo-fi Prototype

Sam's Follower's Lo-fi Prototype

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

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.

Checkmark

Lock

Smiley

Fingerprint

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 Adobe Animations)

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.

Hunter Flowchart

Interactive Lo-fi Wireframes

Prototype

1. 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.

2. Final High-Fidelity Wireframes

Revision

1. Feedback Analysis

With a few feedbacks after launch, there are a few things that I would like to keep in mind for the future:

"Verified banner should be more clear"

The verified banner was the most critical part of developing this app and I decided to put the banner to the navbar so that users can read the educational information clearly, however, as it backfired, others have said it is overlayed with other content and is hard to read.

My solution to this issue to the continued adjusted changes, I will conduct an A/B testing if users are able to read or identify real dopamine domain vs fake domain using with-banner or without-banner testing.

One other solution is to perhaps place the banner on the content wireframe so that users can make sure when they authenticate the product, the domain is visually identifiable.

“The share button is not clear”

My solution is to create a share button next to the username on the homepage;

2. 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.

Reduction in counterfeit fraud

New Users

User Engagement

98%

0.43%

0.5%