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
DESIGN PRINCIPLES
Final Design Demo
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.
Observed 4 stores
32 surveys & 2 interviews
Public ESM data
Competitive product analysis
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.
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
Modular
Hirachical
Delightful
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
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
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