Improving an Online Pharmacy Payment Screen

Increasing the performance of a payment screen via UI and UX revamp
Products

Overview

Apomeds is an online pharmacy service operating in Europe, they provide online diagnoses (via partner brand) and quick home delivery of prescription and over-the-counter drugs.  As I was a design team lead at the company I detected a few ways we could improve this screen that had not seen a significant change in a few years, those improvements could and should affect the overall conversion and decrease churn.  

My role:
Planning, UX design, Art direction
Brand
Apomeds
Timeline
2 Weeks

The Problem

The general opinion in the company was that the Apomeds payment screen was outdated and problematic and could perform better, I was tasked to suggest an improvement to this step without changing the core logic and functionality.

Apomeds Website
Old payment screen
The
Challenge
Detecting the issues that interfere with user completion in the payment step.
Research the competition and ideate possible solutions.
Design a more delightful experience design - trust via esthetics.
Deliver a better-performing product.
Research
I decided that to achieve improvements we must, watch our user’s behaviors, learn about any best practices, revisit our current flow, consider limitations, and analyze our payment page weak points
Users and thier behaviors
I watched recordings of users in the payment step to get impressions of users’ behaviors.

What I noticed was time and time again users scroll back and forth, I assumed it reason for that was relatively cluttered and I noted to myself that we need to see how we can improve at that point again without changing the core back-end functionality

Our users:

Our core user base is men 55-65 who reside in urban areas in Germany, we will have to take into account readability and accessibility while designing for these users
Best Practices and Principles
Though our checkout is a bit unique, I gathered examples from other prominent services, to see how can we improve the Apomeds payment screen
Minimality: Its important to declutter the screen and serve only what needed
Continuity: there must be a connection between previous actions to insure trust
How The service works:
In principle, every RX (Requires medical prescription) type of treatment has its flow that comprises A diagnose stage, product selection, and check out here is a simplified diagram:
Improvement analysis
I have analyzed the screen to identify the issues, I could clearly detect confusing and cluttered parts that can be improved in the screen, you can see it mapped in the flowing image:
Planing
Wireframe creation
Based on planning and companies needs and limitations I have created a collection of asset parts, to be put together, I considered the limitations of readability, basic standard technology and company needs, to avoid any confusion everything was delivered both for  Desktop and mobile.
Execution
After the wireframes were approved I went on to styling and creating the Elements and High-fidelity design, beyond the UI reshuffling there was an effort to give it a more up-to-date and clean view
Creating the assets
Based on the analyses I created a collection of assets to put together the full design
Full page design
Mobile and dektop whole dedign-UI composition
In the interest of fast execution and having our customers mostly on mobile our desktop design is based fully on the mobile one.
Coupon activation flow
Coupon code insertion and activation -A process of inserting code via input
 *if a user comes with a  code via a link, he will not be able to enter another code,
unless he deletes it.
Upgrading in Upsale
Upgrading and Changing the package size - simply by taping the element and canceling it by tapping again (the bill is recalculated)
Adding OTC products via crossable
Via the cross-sale popup(OTC products don't need a prescription)  he will be offered 1-3 products to add, removal is possible by tapping the bin icon.
The Payment methods
Revamped yet based on previous logic

Figma Prototype

You can use explore the flow and interaction through this interactive prototype here
or in this Figma link>

The
Results
We gained 4% completion of the payment step with new users
Overall 3% growth in conversions after 3 months
3.2% increase in users upgrading  via Upsale
1.2% increase in users upgrading  via Cross-sale