Redesigning Medlife consumer experience

Introduction

Medlife’s consumer business started off with the simple proposition of delivering genuine medicines to customers at a discounted rate. But from here, the business expanded to include multiple verticals like diagnostic tests, online consultations, health products and much more. Moreover, the flow for ordering medicines itself evolved into complex form with the addition of multiple features like subscriptions, express delivery, ordering medicines without a prescription, substitution etc.

Many of these features and verticals came in as a result of multiple acquisitions for the organisation and an ageing product with outdated tech infrastructure could not cope with these multiple codebases. In addition, the outdated structure and design of the application resulted in the organisation leaking traffic heavily from the mobile product. Fragmented copy, interaction patterns and a total lack of consistency across different verticals in the same application resulted in extensive drop-offs of users on the mobile platform.

The aim of this project was to redesign the consumer-facing application to effectively communicate with the consumers about offerings. Another primary aim of this redesign exercise was to design for the complex medicine order flow, which had multiple entry points and a ton of diversions in the middle of it and to optimise the medicine ordering funnel.

Across this case study, I will be detailing out the multiple redesigns I have carried out across the consumer application and impact due to the same. In addition, Medlife underwent a re-branding exercise that gave rise to new visual elements. This case study will also explore the usage of this new set of visual guidelines to craft the consumer application.

Home screen and Navigation

1. Improved discoverability of product offerings

Before, the home screen of the application exhibited just one aspect of the range of services we provided. There as a banner carousel which took most of the real estate on the page. Most of our other offerings were stacked away in the hamburger menu on the top left-hand side and remained invisible to users. In the redesign, the prime real estate went to communicate our primary offerings to the user. Along with these, we made sure to include the motivators to explore these categories as well (Discounts). Extra prominence was obviously given in multiple ways to our primary mode of business and most important source of cash flow.

2. Simple, efficient navigation

In redesigning the information architecture of the application, we did away with the hamburger menu and introduced a much simpler bottom navigation menu. On this bottom navigation, only the items that have a high usage frequency were kept. Most items of tertiary importance were pushed inside pages accordingly after conducting a card sorting exercise with our users.

3. Better exploration and discovery, engagement

In the older version, there was no content to engage our users. There probably wasn’t a need to. But times had changed and Medlife had grown as an organisation. A fine balance had to be struck between just the right amount of engagement and functional exploration on the home screen. In the new home screen, this started at the end of the first view scroll and revealed itself to users upon one level of scrolling. A half-visible element (card of lab tests) gave users the affordance of scrolling. Furthermore, the blogs section was introduced on the home screen for a couple of purposes: Engagement and doctor marketing.

4. Personalised offers, Inventory

Medlife had come a long way from where we started. Our discounts and inventory varied from city to city and area to area based on the requirement and demand that was generated in a particular area. Earlier, this area check used to happen deep inside the application. But now, we made that to be the first thing the application did, to ensure we showed the users a completely updated inventory list, the right discount values and coupon codes. This helped our users lessen cart abandonment rate due to issues like discount clashes or “out of stock” nature of medicines or other items.

5. Global Search

One of the major flaws of the earlier version was the lack of a global search bar, which acts almost like an escape hatch to most users who are new to the application. With multiple product offerings, it was important to have the search element globally. In addition, we did not have the search bar earlier as having a valid prescription uploaded by the user was an important part of preventing extra costs. But the platform itself afforded a mental model of an E-Commerce website to our users and users’ primary mode of navigation when it came to an E-Commerce website was the search based navigation. We included a complete page that was dedicated to search and placed it on the bottom navigation as it was one of the highest used micro features in the application.

6. Segmented offer presentation & offer hub

Medlife’s helpdesk is frequently flooded with phone calls from people all over the country. Surprisingly, most of the phone calls were for a single reason: Offers. In the earlier application, we had banners that were occasionally updated and displayed new offer codes. And there were different discount coupons and offers doing the rounds through different channels like doctor tie-ups, TV ads, tie-ups with other startups, etc. Users called us frequently to enquire about these offers and then went on to place an order on their application. To address the same, we dedicated an entire page on the home screen that detailed out every offer to our users. In addition, we kept simple banners in carousels at regular intervals throughout the application to motivate users through discounts at the right place.

7. Priming users for “Express delivery”, Setting expectations.

One of the main criticisms of the online pharmacy industry, in general, has been the lag in procuring medicines after acquiring a valid prescription for the same. After collecting data for almost a year and remodelling our inventory and delivery models, we came out with a 2-hour express delivery option that most users were eagerly waiting for. This feature was advertised on the home screen as the first element post setting the location and the address. This was contrasted with the delivery time of a standard delivery in that particular location. This was a dynamic entry and refreshed according to the location of the user. This solved the problem of setting the wrong expectation for us, which happened in the earlier version of the application.

8. Complexion reduction, Focus on what’s important

The previous version of the application used colour at arbitrary places, which meant that the wrong parts of the application attracted users’ attention. We followed a method of complexion reduction in the new application designs and used colour only where it added meaning. We used colour at the right places to attract user attention, as our primary CTAs and other content in the contrasting orange colour would go on to show. The colours on the palette were chosen accordingly to afford maximum contrast and the visual design system was developed to enhance whitespace, be minimal and focus on the content.

Medicine order flow

The medicine business is the lifeblood of Medlife. Strategic investments made into inventory management and medicine procurement has been huge. These strategic investments ensured Medlife became a market leader in the online pharmacy space in India. However, we faced heavy dropoffs on the product funnel because of many broken features and a flow which did not consider many business and user needs.

The flow itself is incredibly complex as it has a whole array of features and data points it needs to come to a conclusion. There are multiple journeys that emanate from the same starting point and it is easy for a user to get lost with some many branches flowing in different directions.

Journey 1: Have a prescription? Self digitise!

Starting with the best-case scenario or the happy flow, it involves the customer having a valid copy of the prescription with the medicine names and doctor name in it. This is an essential part of the process as without the image, we would actually have to head to a customer’s home first, pick up a prescription, get it back to the warehouse, get it processed by a certified pharmacist, verify the order back with the customer and then proceed to order delivery. This involves multiple trips to the customer’s location and significantly increases the cost involved in being able to process an order.

Having a digital copy of a valid prescription circumvents all these requirements. The verification is done virtually and the medicines are dispatched against the digital copy of the valid prescription. The user is primed to upload the prescription with the benefit of faster delivery. Post uploading, the user can choose to either self digitise his / her medicines or request medlife to call him back to create an order. Needless to say, it is more profitable for the business and the user if the users themselves digitised the name and the quantity of the medicines they required for the order.

We dealt with this through an interaction pattern where most users are shown a search screen with the keyboard up. This keyboard essentially hides the skip and proceed option that lies beneath it. This way, we increased user digitisation rates from 28% to 83%. This represents a huge saving in business costs for us as each prescription can only be digitised by a certified pharmacist. And to have a certified pharmacist digitise a prescription comes at a considerable cost.

Another reason for guiding the customer through this flow is to make the customer aware of another opportunity for savings inside the search and add medicines flow. The flow has an inbuilt mechanism to search for medicines with the exact chemical composition and with a lower price. The government of India at this very time is mandating doctors to write prescriptions with names of generic medicines instead of brand names and this is a game-changer for us in that regard.

Another reason for leading the customer through this funnel is that Medlife only sells medicines in complete strips. This complication is taken care in the medicine quantity selector, which conveys this message and only allows the user to order medicines in quantities of full strips. Again, the order is also subject to live availability of medicine as the inventory is linked to the available quantity of medicines.

The first upsell opportunity for express delivery is also shown at this point. This carries forward into the final order summary flow, where the users are shows two options: To place one single order under either type of delivery or to place two orders: One on express and one on standard delivery. The availability of express delivery is based on the availability of medicines in our spoke inventory management centres. These are centres set up with a stock of high-frequency medicines in strategically selected areas of cities with high order volumes.

Pre-selection of medicines, the users are prompted to select the delivery address. This is followed later by delivery type selection and review of order. Another main field that has been separated here is that of the coupon code. The coupon code has been intentionally separated from the payment mode screen for three different reasons:

1. The payment summary is displayed on screen prior to the payment screen.
2. The payment screen has additional offers from payment vendors and these are not to be confused with the coupon code that medlife offers.
3. There is a dependency on E-Cash, which is medlife’s loyalty program. A user can either apply a coupon code or use E-Cash. It is not possible to employ both the programs for a single order.

Medlife still remains in a competitive environment where discounts are a huge influence on customers’ buying decisions. This fact is reiterated through the payment module, where multiple offers are displayed against their corresponding providers. The order is terminated after successful payment and is sent for processing.

Journey 2: Have a prescription, No self digitisation.

This is a slightly tricky journey that travels across different channels. Like the previous journey, the customer begins by uploading an image of the prescription. The difference is, instead of digitising the medicines himself, the user can ask Medlife to call them. This was our primary user flow in the pre-digitisation days.

After uploading and placing an order, a Medlife pharmacist calls the user and confirms the name and quantity of medicines with the user. Once the order is confirmed, the pharmacist sends across a payment link to the customer. The order can be paid for either through the payment link or through payment options that are provided by Medlife delivery associates at the time of delivery.

This flow has a couple of pros and cons:

1. It is the flow which involves the least effort from the user
2. But this can change quickly as the order confirmation call can place the user under a lot of stress.
3. There is frequent communication between the user and customer about issues like coupons and discount and delivery slot timing. We have at many times experienced failed deliveries in these cases where there is very less chance of procuring payment in advance.
4. This model provides us with an opportunity to upsell other products to the customer on the call.
5. For those users who are unaware of substitutions, the substitution pitch through the pharmacist carries much more weight of trust as a pharmacist is a certified professional.

But as mentioned above, the most critical con of this flow is the huge amount of extra cost involved in ensuring that an order is processed. There are also extra costs involved in calling, digitising and accounting for the lag of time and hence the drop in SLAs in this flow.

3. Don’t have a prescription, but know the medicines you want?

In this case, the user needs to digitise the names and quantities of medicines he/she wants and place the order. A Medlife doctor calls the patient up and verifies the cause against the effect of the medicine. If the doctor feels like the need for medicine is legitimate, the doctor issues a prescription against the medicines and the order is placed against the name of the customer. If the doctor does not choose to provide a prescription, the order is promptly cancelled and the customer is informed.

4. Don’t know your medicines?

The user is guided through a paid consultation flow in this case and has a thorough consultation with a remote doctor. Prescriptions might be generated from this consultation at the doctor’s prerogative. The prescription is then transferred to the user, who may choose to place a one-click order against it.

Results

A lot of funnels showed significant improvements in numbers after this redesign.

1. The number of orders dropping off in the funnel reduced by 32%.
2. Shop, Consultation and diagnostic tests started getting over 60% improvement in the first level traffic.
3. Number of orders being cancelled due to lack of inventory post confirming an order reduced by 17%
4. Number of people calling us to enquire about coupon codes and discounts reduced significantly.
5. Around 18% people started saving more money by using substitutes.
6. Express delivery conversion at 12%.
7. Number of people digitising their prescriptions was up to 83% from 28%
8. Reduced digitisation costs by over 60%.

Epilogue

This project was done in conjunction with Lopamudra Choudhury, Nithinmon, Priyank Agarwal and Sam Augustine at Medlife.