QR-code Generator

I was working on this project when I just started learning about UX and UI design principles and how to use Figma.

Project Overview

QR-code generator is a website where a user can quickly and easily generate a customised QR-code and download it.

Main customer requirements:

• User friendly and simple design

• Pages

  1. Landing page

  2. QR-code generator

  3. Private cabinet with list of QR-codes

  4. QR-code details

• Actions:

  1. Customise QR code

  2. Log in

  3. View all user’s QR codes

  4. View, edit, download, delete QR code

---

Research

To identify the target user of QR-code generator, first we need to understand the demographics of QR-codes users in general.

Statistics

Insight: Most QR-codes users are between the ages of 18 to 46

Among our US-based participants, most QR code users were between the ages of 18 and 46, with the largest proportion being between the ages of 33 and 46.

Top 7 industries that use QR-codes

• Retail stores

• Restaurants

• Event

• Healthcare

• Education

• Transportation

• Marketing

QR-codes use cases

The highest penetration of QR Code based on use-cases is for product information (51.5%) followed closely by event information (19.8%), to avail offers (12.5%), and app downloads (8.2%) (comSCORE MOBILENS, 2019)

My research on the QR-code generator users based on Reddit posts

Conclusions

Most posts on the subject of QR-codes can be found on subreddits:

• r/qrcode

• r/graphicdesign

• r/smallbusiness

The most popular topic is:

• Using QR-codes for promotion of business

Some of users’ pain points:

• Hidden costs of QR-code generators

• Unreliable QR-code providers (QR-code stops working)

• Lack of understanding of how QR-codes work and complexity of some QR-code generators

---

Personas

---

Competitor Analysis

Competitor 1

Competitor 2

Competitor 3

---

User Flow

Variant 1

Variant 2

---

Low Fidelity Prototype

Link to a clickable prototype: https://www.figma.com/proto/q9fFKuJnKOFSQtdTiZzji8/QR-code-PROJECT?type=design&node-id=1-2&t=sRSUy6yPCyJ2verC-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1&mode=design

Flow for a new or logged out user

Flow for a logged in user