QR Code Creation Web Flow

PRODUCT DESIGN · 2023

PROJECT BRIEF

INTRODUCTION

QRStuff is an all-in-one platform for creating, tracking and managing QR codes. Part of the integrations with QRStuff and Monday.com involved generating QR codes directly from the information on Monday.com. This streamlined the process for Monday.com users when creating QR codes for various purposes. I was tasked with designing the flow through which users would create their QR codes.

MY ROLE

Product design

TOOLS

Figma

PROJECT TYPE

QR Code creation flow for web

STEP 1: RESEARCH

UNDERSTANDING USER EXPECTATIONS ON MONDAY.COM

I spoke with the monday.com community to understand their app integration needs and preferences. This research was designed to meet expectations and guarantee a seamless experience.

KEY TAKEAWAYS

Seamless data integration: Users appreciate if an app can automatically sync and utilize data from their monday.com boards. This ease of data integration simplifies processes and enhances efficiency, saving time and reducing errors.

Guidance & direction: Users appreciate being led through processes with clear instructions rather than having to figure out next steps on their own.

Streamlined task management: Since monday.com offers a great user experience with its intuitive and seamless interface, users expect any integrations with the platform to provide a similar level of ease and efficiency.

STEP 2: DEFINE DESIGN GOALS

The research helped define the focus areas for the design.

FLEXIBLE

Process will be designed to dynamically adapt, asking questions based on the user's previous responses, ensuring a smooth and efficient experience.

SIMPLE

Zero clutter to allow users to complete the task at hand with no distraction.

COHERENT

Design the user journey, ensuring that all parts of the process are logically connected in order for users to smoothly complete their tasks without confusion.

MULTISTEP FLOW VS. SINGLE STEP FLOW

Aligned with the design goals, I decided to implement a multi-step flow for the design for the following reasons:

Allows for greater flexibility, as each step can be tailored based on the user's previous input.

Guides users naturally from one step to the next with clear progression and logic.

Simplify complex processes, making them more manageable and less overwhelming for the user.

Accommodates a variety of user needs and scenarios.

STEP 3: DEFINITION

SKELETON OF THE FLOW

Each step is designed to maintain a consistent logic and appearance. Users can navigate more comfortably when each step feels familiar and predictable, reducing the learning curve. This approach is crucial for maintaining a coherent user journey, where every part of the flow feels interconnected and intuitive.

STEP4: HI-FI WIREFRAMES

LOGIN TO MONDAY.COM ACCOUNT

To create QR codes using information from their Monday.com account, users need to be logged in.

STEP 2: CHOOSE AN ITEMS GROUP

After selecting a Monday.com board in the first step, the user will then be presented with options for item groups from the chosen board in the subsequent step.

STEP 3 CONT:

This step in the process dynamically adapts based on the user's choice of QR code type in the previous step.

STEP 4: DESIGN THE QR CODE

An optional mini flow within the flow. The user has the option to choose the shape, color and logo of the QR code.

STEP 4: INTEGRATE

In the final step, the user decides where the QR code should be sent. Based on their choice, the flow will then require specific information.

SUMMARY

Before the user commits to generate the QR codes, we present them with a summary. The summary acts as a final checkpoint that enhances user clarity & confidence in the user journey.