All projects

Mediscover - pill information app

Mobile app for medical professionals to look up pill information like ingredients, side effects, interactions, indications and more.

For

Mediscover

Role

Designer / Developer

Year

2019

  • Categories

  • Mobile App
  • Tech

  • React Native
  • Adobe XD

    Objective

    Design and build a mobile app that can be used by medical professionals like doctors, nurses and EMT to look up medication information like ingredients, interactions, risks, warning labels etc. The app needs to be on both Android & iOS.

    Medical reference apps like Epocrates and IBM Micromedex cater to healthcare prodivders who use these apps to look up medication information. App users check drug dosing, drug interactions, drug safety details, medical news, disease diagnosis and management guidance, as well as evidence-based clinical practice guidelines. Information from various authoritative sources, including the FDA and primary medical literature, is distilled and digitally transformed to support clinical decision-making. Mediscover app focuses at delivering similar functionalities with superior user experience.

    Research

    01. Getting to know the domain, competetive market research

    Since I from a non-healthcare background, I started to learn about the domain by reading research papers on drug reference apps. I also joined various online forums on Reddit, LinkedIn and other social media platforms to connect with healthcare workers and understand what kind of apps and tool they were using for pill information look up. This excercise helped me gain a good outlook of the existing market, and answer the following questions.

    • Who is currently trying to solve this problem?
    • How are they trying to solve the problem?
    • What their main differentiator or unique value-add is for their business and products
    • Did anyone try to solve it in the past and fail?
    • Why did they fail?

    02. Conducting user research

    For a niche product like this, user research is key to designing a great user experience. I reached out to 50 individuals who were in the medical occupation, it was a mix of pharmacists, pharmacy technicians, nurses, pharmacy students and doctors, and requested them to complete a short survey. A few of the questions included in the survey were :

    • Please list the top 3 apps you are using for looking up medication information.
    • Please lit the top 3 medication properties that you look.
    • How much time do you spend looking up medication information in a day ?
    • If you could change just one thing about the app that you use for medication informatin look up, what would that be ?

    I got 21 valuable responses , which were crucial in shaping the user stories for the app. One of the key takeways from the research was that, almost all respondents said 'pill interactions' is what they look up the most. Another observation was that, though they were happy with the information available in the current app, they were pretty frustrated with the usability and user experience.

    pillresearch.png

    03. Creating epics and user stories

    The data from market research and user research was used to create high level requirements for the app in shape of Epics and Stories. I tried to keep the scope of the app as streamlined and focused as possible, as it is easy to get overwhelmed with the possibilities of what can be built and lose track of the goal. I ensured that we start small, fail fast and iterate quickly.

    Design

    01. Information hierarchy / Navigation

    Mediscover has 3 key functionalities :

    • Finding pill information
    • Finding adverse incidents related to the pill
    • Searching a match for the pill from physical description
    • Saving pill information for offline use

    I created a navigation structure with the above features in mind. A tab based navigation approach was taken to keep users working on a feature at the same time being aware of where they are in the app at the moment.

    02. Low fidelity wireframes

    In order to save time and iterate quickly, I decided to create low-fi wireframes on pen & paper, and refine the UI as I develop it.

    03. Micro interactions

    I used animations sparsely to accentuate key results of actions, which add to the overall experience of using the app.

    Development

    01. React Native - building apps on a shoestring budget

    Mediscover is targeted for both iOS and Android. In order to cut down the development cost and time, I chose React Native as the framework for development. Since the app is predominantly used for pulling data from APIs and displaying information, it gave us an opportunity to reuse majority of the code across both platforms. With RN, I was able to achieve 90% of code reuse and reduce the development time substantially. RN has a very active community and ecosystem of plugins which makes it easy to build medium complexity apps with ease.

    02. User management with Firebase

    One of the key feature of the app is "Saved pills" . It allows a user to save pill information offline for the selected pills, and also recover the same when they are on a different device. This required user profile system to be implemented, for which I used Firebase Auth and Firestore. Firebase plays really well with React Native, so it was an added bonus.

    Finished product