StegVision
Anti-counterfeit through technology

Project
Mobile app

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

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

Research & Discovery

Research & Discovery

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.

Competitive Analysis
Many existing authentication 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.

stegvision_research

Spreadsheet of competitve research

Existing Focus wireframes

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

Process

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

stegvision_sitemap-1

Sitemap

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.

stegvision_wireframes

Mobile wireframes

Exploring the Camera Viewport
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.

Option 3 - Video Tutorial
Visual learning, bloats app experience.

stegvision_camera

Camera viewport options

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

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.

stegvision_tutorial

Onboarding tutorial screens

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.


Browse other projects