Clothing Brand Hellstar's Authentication App
Bridging physical products to digital experiences featuring authentication and content-driven approaches
Role
Sole Product Designer
Timeline
6 weeks
Deliverables
Web App
UI Mockup
UI Mockup
Skills
UI Design
User Research
Design System
Prototyping
User Research
Design System
Prototyping
Tools
Figma
Adobe CC
Adobe CC
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.
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.
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.
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...
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.
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
Claim: User claims the product
Account: User creates an account
Authenticate: User authenticates the product
Manage: User manages account
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.
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.
Base Low-Fidelity Flows for Hellstar Users
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 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.
Hunter Flowchart
Interactive Lo-fi Wireframes
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. Usability Testing
Verified Domain Banner
3. Final High-Fidelity Wireframes
1. 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.
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%
