custom-cover-arrow

DEC 2020 - MAR 2021

QRC: Deliver the best & most customizable QR code experience for creators

QRC Creator is a QR code generator that empowers business owners to design sophisticated QR codes in line with the brand style and get insightful and actionable data to improve business.

Design-Code-template-–-1@2x

MY ROLE

Solo UX  designer

Design QRC from scratch 

TOOLS

Figma

Adobe Creative Suite

WHO I WORKED WITH

2 Engineers

1 Makrketing

Founder

ABOUT MOBUX

MobUX is a agency useing progressive web apps to deliver a truly mobile-first marketing experience that converts.

OVERVIEW

I was tasked to design a QR code generator tool from scratch at MobUX. The goal was to expand the company's product line and deliver the best user experience for QR code creators. With the novel coronavirus wreaking havoc, the demand for touch-free services has climbed. QR Codes found a new life in the wake of the pandemic, kickstarting a touchless world. 

DESIGN CHALLENGE

Small owners need to provide contactless and engaging service through QR code, how might we design a QR code generator to help them?

BUSINESS GOALS

  • Convert people's stereotype that QR code generator tools are cheap and insecure.
  • Increase company revenue by recruiting users to join the paid plan.
  • Look for opportunities for the company’s long-term development.

DESIGN PRINCIPLES

  • Simple and easy to use: it should be easy to use for local business owners with limited design knowledge.
  • Customizing and branding: it should allow local business owners to customized codes in line with brand style.
  • Insightful and actionable: data can help business owners make decisions and take action. 

Final Design Demo

CONTEXTS:

2021 is the year of QR codes

I worked as a UX researcher to understand why and how people use QR codes now. QR Codes, once believed to be a long-dead relic of the early 2000s, have found a new life in the wake of the pandemic because of three flowing reasons:

Mask-Group-2

QR codes can provide hygienic and touchless services.

买菜

QR codes are easy to deploy and use for an end-to-end commerce experience.

超市

QR codes are the most convenient way to connect the virtual world to the physical world.

RESEARCH:

Converting business goals to design problems

Group-180@2x

Observed 4 stores

Group-182@2x

32 surveys & 2 interviews

Group-181@2x

Public ESM data

竞品分析阴影@2x

Competitive product analysis

Research Consolidation

1. Find opportunity zone through competitive analysis

• Target users: non-design background local business owners

Competitors provide customized services for large companies, but the user experience for individual local business owners is unfriendly. 

• Guide user to customize their codes

The design options for individual creators are limited and confusing, so the codes they designed are ugly and not always work. 

Group-916@2x

2. User Research: Three types of users

After talking with our marketing team, we decided to choose local business owners as our target users. To understand their problems, I started by interviewing them and join Facebook groups to ask how they use QR codes in their business. I interviewed 2 users and message chatting with 6 business owners, and I found there are three types of users based on their goals:

User-types-yellow@2x

3. User Journey Map

I summarized the results of all research in the user journey map, please click the arrow to view the details.

SYNTHESIZE AND IDEATION:

Co-design Workshop

As the sole designer of the product, I organize a co-design workshop to share my research insights, have more people brainstorm the features of the product, and vote on the priorities.

Who I invited: 2 developers, 1 marketing and founder

• Step one: Share my research and bring everyone on board

• Step two: Brainstorming based on opportunities 

• Step three: Prioritize features and define a long-time vision

codesign

Workshop Outcome

Through the workshop, we decided to develop the product in three steps:

• V1. Create and manage codes

Differentiate Features:
Custom Templates | Set Theme Color | Scannability Test | Schedule time and redirect link | Folder insights

• V2. Integrate with MobUX landing pages

Website-free customized templates based on user’s usage

• V3. Community

Engage the community and find new opportunities

Group-917

Design Principles

Frame-4

Simple and easy to use

Frame-5

Customizing and branding

Frame-6

Insightful and actionable

DESIGN:

Visual Design

Frame-1@2x

Modular

Frame-2@2x

Hirachical

Frame-3@2x

Delightful

068
067
069

Information Architecture

Group-918@2x

KEY FEATURE CASE STUDY

How to create a new QR code? 

I chose an important feature to show the details of my work, how to create a new QR code. Here is the user flow.

919@2x

User testing and Interations

19@2x

MORE DETAILS

Final Design

2

REFLECTION:

Success Metrics

Group-923@2x

Conversion Rate

People switch from a free plan to a paid plan

Group-925@2x

Customer Stickiness

Number of check-ins per day

Group-927@2x

Qualitative Accounts

of how awareness and participation of using QR code improved with our product

What I’ve Learned

1. Conversion RateStart small and iterate fast

Working with constraints, business priority, timeline

2. Never hesitate to ask for help and share results

Empathy (stakeholders and teammates), transparent communication

3. Keeping the vision in mind while being practical

Inclusive, sustainable development