App Payment: Defining the Journey
Role: Lead UX/UI Designer (Research, Writing, and Development)
Timeline: 3 months
Company: PsyHealth is a progressive web app using science-based tools to manage chronic pain at an affordable price.
Strategizing from Scratch
✅ Created a simple subscription‐payment user journey and optimized profile and settings screens within the project's current technological constraints while establishing a revenue avenue.
Six high‐fidelity wireframes outlining PsyHealth's Subscription‐Payment process starting from the Profile/Settings screen.
Discovering the Starting Point
PsyHealth needed exposure from Psystem's audience and the initial plan to connect the website and mobile app databases proved unfeasible.
For the Minimum Viable Product (MVP), I researched for cost‐effective payment integrations compatible with the tech stack before outlining the user journey to ensure the scalability for this new revenue source.
Setting the Goal
Craft a simple user journey to introduce PsyHealth's Premium subscription plan and self‐paced courses to increase completed transactions and build trust throughout the in‐app payment journey.
Managing the Project First
As the lead designer and front‐end developer, regular chats with the project manager and back‐end developer guided me to understand the project constraints and how I might work within them to identify the execution.
The chats with the team clarified
- how payment data will be accepted,
- optimal integrations for the platform, and
- potential barriers limiting the design process in building the MVP.
Defining the Payment Journey
Understanding the steps just before and after the payment journey was crucial to define how and if the payment journey would begin for different users.
Competitor Analysis Themes from initial and discovered observations of user journeys amongst Top 5 Competitors.
Using pre‐determined personas and conducting user interviews and competitor research, I visualized observations about App Subscription Experiences into maps and flow charts to identify insights and user pain points to prioritize the most impactful suggestions with my team.
Key insights from Affinity Mapping user's initial feedback and thoughts on navigating the app to learn about courses and subscription options.
Iterations based on team feedback led to the first completed User Journey Map to design and test, reflecting optimized steps during the payment decision‐making and completion steps.
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
Translating my character analysis skills, I sought to observe and understand user's expectations before, during, and after deciding to pay for a digital subscription service.
Secondary research led to the idea of merging the Settings and Profile screens to meet user expectations in managing their memberships, facilitating a smoother experience to manage everything in one place.
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.
Combining the administrative details into one screen reduced the number of clicks, making it easier for users to find and update their payment information for a better experience while meeting expectations.
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
Feedback on my low‐fidelity wireframes revealed that preferred layouts depended on the content's context.
The mid‐fidelity wireframes with relevant copy led to iterations to the monthly and annual subscription plan layouts that led users to feel not confident about making a payment.
The Before wireframes of PsyHealth's Subscription‐Payment Call‐to‐action screen.
By conducting A/B testing to better understand user payment decisions and preferences, my team and I could confidently modify interface placements from users' feedback.
With this testing approach, we could stay on schedule within the project's timeline.
The After wireframes of PsyHealth's Subscription‐Payment Call‐to‐action screen.
Improving Information Architecture Consistency
“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
With the testing insights, my team and I compiled a list of further modifications to improve interface consistency and meet expectations throughout the app for the screens just before and after the payment process.
For Future Phases
In an ideal situation with more resources, I would like to:
- Localize the Experience for different regions and languages to improve accessibility for a more diverse user base.
- Expand User Journey Mapping to note the additional touch‐points before the payment experience to introduce the benefits of the premium tools and identify further engagement opportunities.
- Audit styles to create a Design System to create and maintain consistent styles across the custom and template Stripe Payment Integration styles.
🥳 Ready to elevate your project? Let's connect on LinkedIn!