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:

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

Observed 4 stores

32 surveys & 2 interviews

Public ESM data

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. 

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:

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

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

Design Principles

Simple and easy to use

Customizing and branding

Insightful and actionable

DESIGN:

Visual Design

Modular

Hirachical

Delightful

Information Architecture

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.

User testing and Interations

MORE DETAILS

Final Design

REFLECTION:

Success Metrics

Conversion Rate

People switch from a free plan to a paid plan

Customer Stickiness

Number of check-ins per day

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