App Payment Setup: Boosting User Satisfaction
Role: Product Designer (Research, Writing, and Development)
Timeline: 5 months
Company: PsyHealth is an app to manage chronic pain affordably using science-based tools.
Discovering the Starting Point
The final step for PsyHealth's Minimum Viable Product (MVP), is creating a revenue stream through a subscription plan.
I researched cost–effective payment integrations compatible with PsyHealth's current tech stack to ensure MVP scalability for Course payments in the near future.
Problem
How might we introduce a premium subscription plan and prepare for Courses purchases to ensure successful transactions and build trust in the payment process?
Managing the Project
I held regular discussions with the project manager and back‐end developer to guide execution within project constraints by addressing
- payment data handling,
- platform integration, and
- design limitations within the MVP phase.
Defining the Payment Journey
To integrate the new payment feature, I identified the affected pages to gradually introduce the Premium Subscription to users by mapping the steps before and after the payment process.
Competitor analysis and user interviews guided my initial User Journey map, streamlining the payment design process and ensuring timely development and testing.
Competitor Analysis Themes from initial and discovered observations of user journeys amongst Top 5 Competitors.
Highlights from the User Journey Map, focusing on how users felt throughout the process and opportunity areas to iterate on in the design.
Identifying Expectations
Using my character analysis skills, I observed and understood user expectations before, during, and after deciding to pay for a digital subscription service.
From the competitor analysis, I proposed merging the Settings and Profile screens to meet user expectations in managing their subscriptions, providing a smoother, all–in–one screen experience.
Multiple screens to review and update profile and settings details with a Call–to–action box added to the Side Menu Navigation to encourage upgrading to Premium.
One screen for users to review and update profile and settings details with a Call–to–action box added to the Side Menu Navigation to encourage upgrading to Premium.
Iterating for User Confidence
Differentiating Subscription Types
I conducted A/B testing and highlighted key differences between Monthly and Annual plans to make the content accessible for users to compare each plan's benefits on one screen.
This change empowered users to feel confident about their purchase and the benefits they can expect from this investment.
The Before wireframes of PsyHealth's Subscription‐Payment Call–to–action screen.
The After wireframes of PsyHealth's Subscription‐Payment Call–to–action screen.
Creating Modals for Every Occasion
To highlight freemium limitations and introduce Premium benefits, I collaborated with my team to design modals.
Subject matter experts' feedback helped refine placement, copy, and tone for clear communication in later iterations.
Starting with layout then iterating the copy to use a friendly tone to generate interest and excitement in premium features.
I used Tangerine for the button to drive action, and randomized emojis with high‐contrast pairings to keep the experience feeling “fresh” and “exciting.”
Progression of Modal iterations, showcasing PsyHealth's visual identity through border–radius and the use of emoticons.
“With you every step of the way”
Inspired by PsyHealth's tagline, I added a Dynamic Call–to–action box to the Side Navigation Menu to increase Premium plan visibility and conversions.
For the payment feedback pages, I added branded emoticons to reinforce the app's emotional support and sustain user engagement and excitement.
Iterations of Side Navigation Menu and Payment Success and Error screens.
Building Trust through Design
✅ Developed a streamlined subscription‐payment journey and optimized profile screen to establish a payment process and create a revenue stream.
“I like that everything is on one page or screen for the profile and settings sections. It's quicker to manage subscriptions and payment details where I expect them to be.”
— Usability Study Participant
Each iteration strengthened trust through design by enhancing branding consistency with intentional colour use and branded emoticons, deepening the emotional journey for PsyHealth's users.
First iteration of the Subscription‐Payment journey, focusing on defining the user flow of steps before and after the journey.
Latest iteration of the Subscription‐Payment journey, prioritizing visual interest and user engagement to foster excitement and trust.
For Future Phases
With additional resources for the PsyHealth App, I would:
- Localize the Experience for different regions and languages in Canada to improve accessibility for diverse user groups.
- Expand User Journey Mapping to uncover more engagement opportunities before payment.
- Audit styles to create a Design System to ensure consistency across custom and template Stripe Integration styles.
Update: Design System is in progress!
I audited and reorganized the components, colours, and patterns to eliminate unused styles and maintain consistency across design and development.
Before and Now captures of the Audited and Working Design System tracker.