.png)
The way that Instagram contextualizes and groups related steps inspired the meetup feature redesign.
I drew inspiration from unexpected sources like Instagram’s post creation. This reduced drop-off rates by 23% by making it more intuitive and faster to use.
This project focused on the meetup creation feature, allowing users to book reservations, apply discounts, purchase a coupon, book a meetup, and invite friends.
The information in this case study is my own and does no necessarily reflect the views of Dyne.
A brief overview of the final solution: clear seperation of meetup creation steps and more flexibility
Final results of my work
Dyne is one of Canada’s top 15 food and beverage startups, founded in 2021. The company offers a B2B analytics web app for restaurants and a B2C mobile app designed for university students.
As one of their UX designers, my primary responsibility was the mobile app, though I often collaborated with another UX designer on web app features.
Old design with visualized findings - 16 participants 50/50 split between new and experienced users
Imagine you're a student at UBC. All your friends are talking about Dyne and its amazing discounts and benefits. Excited, you download the app to try it out. But when you use the meetup feature, you quickly get frustrated and confused. You give up, missing out on the perks. This leads to lower user engagement for Dyne, making it hard to attract new B2B clients and risking the loss of existing ones.
When we interviewed a mix of new and old users to understand why they didn't like using the mobile app despite its benefits, most of them said, "The meetup creation feature feels too long."
1. New users were particularly prone to information overload because of the sheer volume of unfamiliar content.
2. Old users often forgot to purchase a coupon before starting the meetup creation process, forcing them to restart and redo everything.
On the rare occasion that users didn't drop off, 87.5% of them felt exhausted by the end of the process.
With a clearer picutre of how user type pain points differed, we were ready to start ideating solutions for each user type.
1. Reduce the average drop-off rate for new users.
2. Increase active user ratio across all users.
3. Make the meetup creation process feel shorter and more streamlined.
With our research-generated goals in mind, it was time to move to solutioning:
1. We simplified the meetup creation process by removing steps like QR code scanning and messaging. However, this did not reduce information overload or the perceived length during testing. Management preferred this low-effort solution, but I had doubts from the start, which I should have voiced.
2. Tooltips to guide users: have a one-time (relaunchable) interactive tutorial with tooltips for new users. Testing yielded new users remembered only some of the required steps for meetup creation from the tutorial.
This solution was implemented not only to the meetup creation feature but to the entire app to improve our onboarding experience as the implementation effort was very low.
3. Flexible coupon purchase: enable in-flow coupon purchases during meetup creation, a change that tested well with both user groups despite not mitigating information overload.
Part of the reasons why the previous solutions failed was because there was still little to no separation between meetup creation steps. With integrating coupon purchases, we knew we were on the right track.
The first two screens on the left show the flow for purchasing a coupon within the meetup creation flow. The right most screen shows the original design.
As a product, we want to make the meetup creation steps more digestible to new users while also giving experienced users more flexibility with actions like coupon purchases with the end goal of increased user retention while keeping the feature streamlined. If necessary, the needs of new users will take precedence given their lower user retention metrics.
These requirements brought us to a proven design concept: Instagram's modularization.
.png)
A classic example of modularization is Instagram's post creation. Moreover, similar flows exist within various features like stories.
1. Breaking down a complex process into multiple, smaller steps to make it feel shorter and more digestible for users.
2. Integrating steps from other related features to reduce the learning curve.
3. Grouping related steps into separate pages to avoid information overload and contextualize pages.
Modularization allowed us to simultaneously address both information overload and inflexibility. My changes consisted of:
1. Coupon purchase changes: Building the coupon purchase into the meetup creation flow. Also, only relevant coupons (for the selected restaurant) appear in this flow now.
2. Information breakdown: Grouping related meetup creation steps into different pages to aid in mental categorization and contextualization.
.png)
Although this looks like more information than the original design, the only new function added is the ability to purchase a coupon. The new design is similar to the original, but with much more room to breathe.
Before shipping it, I conducted one more round of usability testing with our original 16 users for any final revisions.
Rather than 5/16 satisfied users with the old meetup creation feature, 15/16 users were now satisfied with the redesign, requesting only minor revisions.
A complete overview of the redesign.
While the project was a huge success, here are some things that I would like to apply next time:
1. Show and sell, don't just tell: Stakeholders hesitated to explore perceived high-effort solutions. Instead of just proposing an idea, I should have first tested it, analyzed data, then presented it.
3. Look to leading companies for design patterns: We successfully adapted Instagram's modularization model to our product despite industry differences. Next time, I'll look right after defining the requirements for our solution.