Mobile App Pro Membership Screen
Project Overview
Platform
Cross-platform native mobile (.NET MAUI)
The Team
Two devs, one QA engineer, and me
My Role
UX/UI Designer, Frontend Developer, Product Owner
Things I Did
Research & ideation, mockups, prototypes, frontend development (CSHTML & Sass)
Background
The Musicnotes mobile apps use web views to share some content with the Musicnotes website. Sometimes this is convenient and efficient, but in the case of our in-app Pro Membership screen, it was limiting.
We decided to decouple the in-app Pro screen from the website Pro screen to give ourselves more control over the design.
Goals
Our main goal was to optimize the in-app Pro screen to boost conversion rates for Pro Membership sign-up.
In the process we hoped to modernize the styling and presentation of this legacy web-based screen to align with the design of our modern native mobile apps.
The Starting Point
Because so much of the content had been ported over from the web when the company first introduced Pro Membership sign-ups in the mobile apps, the current page was optimized for web SEO, and didn't feel very 'appy'.
Keyword-stuffed copy was verbose and hard to scan. The page hadn't been updated regularly, and the visual design felt antiquated - hard corners, sloppy shadows, grainy imagery. The messaging was high-minded and centered around an appeal to the user's musical aspirations, rather than dollars and cents. A lack of clarity around membership benefits and plan perks made the whole thing less than effective.
Competitive Analysis
We wanted to understand how other apps presented their memberships. We chose four that our users were likely familiar with - Spotify, Apple Music, HBO Max and Audible.
A few things jumped out at us:
- 1. The screens were far less tall.
- 2. The copy was far more succinct.
- 3. Plan perks and member benefits were presented without clutter
- 4. Small trust signals were included - things like 'Recommended' and 'Best value plan'
Applying These To Our App
How could we implement some of these ideas in our own design to communicate more clearly and improve conversion rates?
Design #1
The ideas: Explain Pro Credits (a complicated perk) in just three bullet points. Provide a horizontally scrolling list of benefits with clear scannable headings. Redundancy-free plan cards. Sticky buttons
Team feedback: The consensus was that this stripped-down design lets the benefits breathe and makes the information more digestible. We decided to try this approach with a few small adjustments.
Final Version - Above the Fold
Why it works: Messaging highlights cost savings. Copy about benefits is simple and uses imperative sentences to inspire action. Even on small devices the primary CTA button is available above the fold.
Final Version - Plan Cards
Why it works: Trust signal chips provide subtle encouragement. The more expensive Premium plan in presented first, making the regular plan seem like a great value by comparison. Color-coded perk bullets help users distinguish Premium perks from regular perks at a glance.
Final Version - Pro Credits
Why it works: Three simple sentences tell users everything they need to know to understand that Pro Credits are a great way to save money.
A Few Other Nice Upgrades
We included some small UX improvements for current Pro members too.
Improvements: We included current plan indicators, easy upgrade buttons, a display for their available Pro Credit count, and an option to buy more Pro Credits right from this screen.
Bringing it to Life
I wrote the frontend markup (CSHTML) and did the layout and styling using Bootstrap and Sass, and worked closely with the Senior App Developer on wiring up the functionality to display users' correct plan statuses and Pro Credit counts.
Results
Since these updates were released, year-over-year Pro Membership sign-ups have increased dramatically in the Musicnotes mobile apps.