November 2021 (2 weeks)
User Experience Design Intern
Myself (UX/UI)
Product manager
2 developers
QR Menu is an online menu-design platform that allows restaurant owners to design a scannable QR-powered digital menu. However, despite its high SEO ranking, the platform was not attracting enough new clients, as most would leave during the onboarding process, without publishing their first menu.
This is a story of how I redesigned QR Menu's onboarding experience and increased the percentage of new clients who publish their menu by 30%.
QR code menus are digital menus that are accessible for restaurant-goers through their devices after scanning a QR code. QR-code menus are easily sharable and modifiable and are known to reduce menu-printing costs while modernizing the dining experience.
Besides allowing clients to design responsive QR code menus, QR Menu's menu-building platform also allows menu customization, access to valuable analytics, and ordering QR code stickers.
According to the company metrics, on average 10% of new users who start the onboarding process publish their QR menu.
We aimed for 20% of new users to publish a menu, and for 90% of them to do it without contacting QR Menu. This project's scope was to identify the issues surrounding the user experience portion of the onboarding process, build a new prototype based on that research, and implement the new design.
I started by analyzing the current onboarding process, loosely following Nielsen's ten design principles to identify any usability issues.
Previous onboarding process
Usability issues found
Since no clients were available for interviews, I interviewed the head of marketing, who brought most customers through direct advertising, and helped them with creating accounts/onboarding. The interview was semi-structured, as I wanted him to share as much as he could about users' reactions to the onboarding process
Some of the main takeaways included:
I decided to perform a competitive analysis of the onboarding processes in 2 different design platforms; Wix, one of the world's leading web design services, targeting users with little to no web design experience, and Online Menus. This online QR menu design platform targets business owners. I looked at their strengths and weaknesses to identify any pain points.
Competitive analysis
After completing the research and using the 2 services I chose to analyze, I proposed solutions to the pain points I found.
pain points vs. solutions
Based on my research, I developed a user persona that demonstrates QR Menu's target clients' goals and pain points when it comes to the onboarding process.
User persona
I realized that we could increase menu publishing rates by letting new users publish a menu as a step at the end of the onboarding process and moving the signup to the end. Thus, we identified two more opportunity areas:
Additional opportunity areas
Users can now select their business type, menu language, theme (dark/light), logo, and banner. In addition, users can select a font combination, menu categories, and corresponding menu items and provide their social media links. The signup button appears in the end, as users are urged to create an account, which automatically publishes their menu.
Onboarding process user flow
After getting feedback from the PM regarding the user flow, I created a few wireframes that show the vision I had for the layout of the onboarding process.
Early wireframes
1
I provided more business types.
I added additional business types as well as an "Other" option, since QR menu has different menu templates depending on the business type.
Business types screen
2
I added a progress bar.
I grouped the onboarding process into 4 steps, and chose a linear indicator with levels to add progress visibility.
Progress bar
3
I added consistent buttons and screens.
I established a design system with consistent buttons, spacing, and typography. I also made sure to keep all of the screens in a similar format to avoid confusion and added a "Back" button.
spacing & buttons
4
I added a menu visual, and basic customization options.
I added a real-time menu visual, which will be clickable. I also added basic customization options, which allow users to pick themes for their menus and add a limited amount of categories/menu items. This turned the onboarding process into more of a demo that introduces users to the platform.
spacing & buttons
5
I added clear directions and accurate CTAs.
I added clear CTAs, which made the onboarding process intuitive and easy to complete and made sure to consider error handling and make actions reversible. I changed the terminology from "products" to "menu items."
Menu items screen
6
I made menus publish automatically upon sign up.
I made the sign-up process the last step. This allowed users to get a taste of the platform without creating an account and made onboarding more transparent and less time-consuming. Once users reach the sign-up, they already have an initial draft of their menu, which goes live automatically once they create an account/log in.
sign up screen
Below are screenshots of the live product.
Live product screens
The main challenge I encountered was the aggressive timeline, which compelled me to prioritize the most vital tasks needed to complete the project by the desired deadline. Due to the lack of active users available for interview on such short notice, I interviewed the head of marketing, which provided me with just enough insight to understand what challenges QR Menu's clients might face.
Another challenge was determining the level of detail I should include in my directions for developers and taking their restrictions into account. While I had creative freedom during this project, I also did my best to comply with the company's branding guidelines and focused on increasing the rate of new users who publish a menu using the platform.
The project's initial version has been implemented and increased the rate of new users who published a menu by 30%, passing our initial goal by 10%. The next step will be conducting remote usability testing and changing the onboarding process accordingly. I also believe that more could be done to ensure that users keep editing/using their menus after publishing - however this will require redesigning QR Menu's dashboard and editing tools.
If I were to keep working on this project, I would collect more qualitative data by interviewing users and observing them interact with the implemented onboarding. Once the onboarding process is complete, I would move on to redesigning QR Menu's dashboard.
Thanks for reading :)
