Setup Flow - Web

Company: QRStuff is an all-in-one platform for creating, tracking and managing QR codes.

Project type: Web design

Role: Product Designer

Overview

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.

Implementation

The task was to design a flow that was as simple, smooth, and seamless as possible to demonstrate the ease of integration with QRStuff.

Multi-step flow vs Single-step flow

I chose a multi-step flow instead of a single-step flow for the following reasons:

Conditional logic: each subsequent question depended on the previous one. Multi-step flows can adjust subsequent steps based on previous answers, showing or hiding relevant sections dynamically.
Reduced intimidation: Breaking up the form can make it seam less overwhelming and distracting.
Progress indication: Multi-step flows can provide progress indicators , which can motivate users to complete it.

The design

Let's dive into the design!

Skeleton of the flow

Flow - Step 1

Flow - Step 2

Flow - Step 3

Flow - Step 3 cont.

Flow - Step 4

A mini flow within a flow

Flow - Step 5

Flow - 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 and satisfaction in the user journey.