70 Followers
·
Follow

Image for post
Image for post

Halodoc — Pharmacy App design

My first assignment with Halodoc as soon as I landed in Jakarta was to eat some local food or drink or wear the local traditional wear or at-least learn the survival words in Bahasa or at least exchange Indian currency notes to the local currency, Rupiah. The last one was immediately possible at the hotel we stayed. I must say having Indonesian currency in your hands makes you feel like a millionaire.

Image for post
Image for post

State of design at Halodoc

I joined Halodoc as a lead designer and was supposed to bring design thinking to the recently funded series A startup. The existing prototype of the proposed pharmacy app made by a graphic designer looked something like this.

Image for post
Image for post

When I started interacting with the product team and the graphic designer I realized the first iteration of mock was built with very less design. I tried giving feedbacks on the existing design and tried to influence the graphic team to arrive at a usable design by giving heuristic reports on the existing designs in a visual format.

Image for post
Image for post
Image for post
Image for post

…….and gave a detailed list of issues existing in the current form of the app (and prototype) along with suggestions ……

Image for post
Image for post

…..and also giving a heuristic score (with an intent to institutionalize the heuristic evaluation process at Halodoc

Image for post
Image for post

Design begins

I couldn’t see any considerable progress except a few quick fixes. There was a need for step back and design-thinking. Hence, I took a step back from UI design and did an UX enquiry of the overall Halodoc as a product which the team was trying to build. With the support of product team, I was able to arrive at the following big-picture (or the Grand-vision)

Image for post
Image for post

Zooming on-to Halodoc-Order (later to be renamed as Pharmacy) itself was an eco-system of multiple apps as shown below

Image for post
Image for post

Once the big picture (mental model) was visualized and every stakeholders on the same page, I started plotting the mind maps (for the different states of an order in the Pharmacy app) which I also used to

  • Clarify my design questions
  • Introducing design related terminology to the team
  • Eventually bringing everyone on the same page
  • and Communicate design
Image for post
Image for post

…and worked on low fidelity mocks in Balsamiq for the Pharmacy app

Image for post
Image for post

… took paper printouts of hi-fidelity version of the same (in black & white)

Image for post
Image for post

…allowed the product team discuss the same over a wall

Image for post
Image for post

… setting the stage for next iterations till we arrived at a final version

Image for post
Image for post

The final refined sketch mocks looked something like this

Image for post
Image for post

Since the app is supposed to be in two different languages, it was critical to co-ordinate with the product team for content strategy. Following excel sheet was created and maintained over multiple iterations to keep in sync with the content strategy team.

Image for post
Image for post

Validating the design with the end-users

Image for post
Image for post

For a detailed user testing report please click here

Final iteration

Image for post
Image for post

Hence, we have to rework on the Halodoc Pharmacy app as per the brand guidelines which resulted in something like this

Image for post
Image for post

The impact of work is clearly visible in the following pixelated picture from the investor meeting by the CEO of Halodoc, Jonathan.

Halodoc went on to achieve series B round of funding of 65 Million USD

Image for post
Image for post

Written by

Design, Games, Products, UX-UI, Storytelling, Data

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store