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.

Opened laptop screen with Psystem's webinar page of introduction text, discover webinar button, and a woman staring at a computer.

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.

PsyHealth's Subscription-Payment process, starting on the Profile/Settings screen

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.

hree lists supporting three central themes of the subscription experiences from the Top 5 Competitors

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.

Three groups of list items highlighting the initial feedback, themes, and insights from Affinity Mapping the App Navigation user feedback

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.

Five groups of text outlining the feelings of the users, when they happened during the user journey, and opportunity areas to consider for the next design iteration

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.

The Before wireframes, displaying the final low-fidelity screen combining the Profile and Settings sections with a Call-to-action box added to the Side Menu Navigation

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.

The After wireframes, displaying the final low-fidelity screen combining the Profile and Settings sections with a Call-to-action box added to the Side Menu Navigation

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.

Two screenshots placed side-by-side to compare the changes in the webpage layout on Psystem's Discover page

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.

Final layout for the Why Psystem section on the Discover Page, making use of the negative space intentionally

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!

Back to top

Connect with me

Want to learn more about me?

Connect with me in the following ways: