MedicApp

Mobile App Design (UI) - Fall 2020 Academic Project

Medical mobile app screens in rows and columns

Overview and Role

In a team of four, we were to each prototype a mobile app, conducting user research and brainstorming before choosing one idea to continue with.

My role was to conduct preliminary user research and design the prototype.

Goal

Design an app for health-conscious young travellers, assisting them in their travel health needs.

Solution

An app to guide users to equivalent medication and remedies for common illnesses while travelling internationally.

Role

Lead UI Designer

Team

Raymond Co

Michael S.

Krista M.

Tianming L.

Tools

Axure RP

Timeframe

3 Weeks (2020)

Platform

Mobile

Skip to Prototype

Introduction

The team first chose a design domain of those aged 20-30 who want to travel in the next 1-2 years. I was in charge of gathering preliminary user data to better focus our app on young travellers and then designing our prototype. I sent out a survey asking people what the most important aspect of travelling was for them.

Opportunities

The survey revealed that people care a lot about safe travel and health, the location of stay, and the local culture. We decided to focus our app on safe travel and health, especially because some people found there to be a lack of medical support when travelling internationally.

The simulated database I proposed we use was WebMD for its vast medication and symptom data.

User Personas

I based the personas on friends and family who fell under our design domain of those aged 20-30 who want to travel in the next 1-2 years.

MedicApp mobile app user personas of a man and a woman

Early Sketches

I wanted users to be able to quickly search for medications and symptoms and thus the search is placed on the homepage. A Saved page allows users to save medications or symptoms for easy access offline, especially when travelling in areas without access to wifi. The Map page helps users find nearby stores that sell medication while travelling.

MedicApp mobile app early sketches of the interface

Solution

An app to guide users to equivalent medication and remedies for common illnesses while travelling internationally. Also lets users bookmark medication and illnesses, and locate nearby drug stores.

Target Users and Their Goals

Styling

I chose to use mainly shades of gray to maintain a simple look. Blue was used for navigation as it stands out and fits well with my white design.

Raleway was used as the primary font for its clean and simple look. As a secondary font, Roboto was used as it maintains a clean aesthetic. It was mainly used for headings as it is more condensed.

MedicApp colours used

Prototype

MedicApp start page with a disclaimer and continue button

First-time users start screen.

MedicApp select a country screen

User selects an Away Country to show relevant equivalent medication.

MedicApp home search screen

On the main Search Page, users can easily search for symptoms or medication. They can see recently searched and suggested common terms. A simple navigation bar at the bottom allows easy access to the main pages.

MedicApp medicine page with information and equivalent medicine

The Medication Page contains medication information and the equivalent one in the user’s set away country. Provided photos help users easily find the medication.

MedicApp common cold page with treatment information

An Illness Page shows information about symptoms, treatment, and common medication. Symptoms and medication can be tapped on to see related illnesses or relevant medication. This allows a convenient connection to related information.

MedicApp saved page with saved symptoms and medication

The Saved Page contains the user’s saved symptoms or medication. They can also search through them at the top. In retrospect, these arbitrarily placed boxes may have been better as a list to be more clear.

Showcase Website

After designing the prototype I made a simple showcase website to advertise our app and its features.

See the mini-project here.

Reflection

As this was the first time prototyping a mobile app, I struggled with the placement and design of many elements. For instance, the 'Saved' page may not be intuitive with its small rectangles. Perhaps a list would have been better for organization and clarity.

In the early stages, we did not have alternative prototypes apart from this one. This drastically slowed our progress, as we did not have many ideas to take from. With only three weeks, user testing was minimal, mostly being tested internally by the team.

In terms of scope, I do feel that our app's scope was a bit too large, with not only equivalent medication but also symptoms and illnesses. Perhaps the app could have just focused on equivalent medication.