StegVision

Anti-counterfeit through technology

Project

Mobile app

Role

Product design, UX/UI design, visual design

Team

2 C-level stakeholders
1 brand designer
1 developer

Client

StegVision

Challenge

How do we provide a secure, efficient way to authenticate merchandise?

Background

The consumer market is saturated with fake products. Billions of dollars are lost every year because of fake apparel. StegVision developed an anti-counterfeit technology that combines artificial intelligence, machine learning, computer vision, and steganography to address this issue. Users can scan specially encoded tags to confirm a product’s authenticity as well as learn more about the brand and product.

Outcome

A mobile app to scan specially encoded labels for protected product authentication. The StegVision beta launched in April 2020.

Understanding the Market

The anti-counterfeit market is a multi-billion dollar problem. Not only are brand images and profit revenues hurt when inauthentic products hit the public, consumers risk getting scammed with subpar goods too. It was important to target the fraudulent market at a manufacturing level—before fakes have a chance to reach consumers.

Many existing anti-counterfeit apps were convoluted. It was hard to get immediate verification results without going through support or waiting days to find out if products were authentic.

Beta Product Vision

For the purposes of this beta, the CEO wanted to focus on establishing B2B investor relations. He wanted the app to be clearly about protecting users from counterfeit products. The app also needed to be white-labeled.

Process

Mapping the User Flow

I streamlined the flow to focus on the beta app goal of efficiently allowing users to authenticate their products. The architecture of the product will continue to grow as more features are considered.

Wireframing

I began wireframing by breaking down the onboarding, authentication, and support flows. The wireframing process was iterative as I had frequent meetings with stakeholders and developers for feedback.

The camera viewport was the most important screen within the app because the technology needed a well-taken photo to authenticate a label. It underwent multiple iterations to refine the hierarchy of the camera elements, such as flash, manual mode, and help.

Option 1 - Partial Frame

Standard camera viewport look, can look generic.

Option 2 - No Frame

Huge viewing surface, camera toggles are less apparent.

Option 3 - Full Frame

Frames product tag, feels visually cluttered.

I chose the second camera option because product tags came in all shapes and sizes. The large viewport made it easier to capture the entirety of the larger product tags.

Final

An In-App Tutorial

To teach users how to send in product photos, I designed  a series of in-app steps. This instructs the users in real-time how to leverage the app for the most optimized authentication experience. Because this app was going to be white-labeled, the visual design was minimal and flexible.

Product Demo

Users can verify the authenticity of the product in their hands within seconds. Even if a consumer's scan fails to authenticate a product, StegVision can detect part of the product's label. The app then guides consumers in capturing a more accurate photo through overlays to verify the product's encoding.

Next Steps

I hope to expand the feature set of this app beyond authentication. To embody the consumer and business relationship, features like product cataloging and guides will create a more holistic user experience.