top of page
wireframes.jpg

PROTOTYPE

Wireframes, Heuristic Evaluation
and Insights

Annotated wireframe walkthrough. 

Wireframes

Log In :

iPhone X-XS – 1.png

1

2

3

iPhone X-XS – 2.png

4

​

iPhone X-XS – 3.png

5

6

iPhone X-XS-11 Pro – 2.png

7

8

​

iPhone X-XS-11 Pro – 3.png

9

iPhone X-XS – 6.png

10

1. A motivational quote and a picture relating the user are represented here which changes once in 24 hours. 

​

2. The user can be able to choose from different profiles that were previously logged in on this app. 

​

3. Or the user can either register or log in from a new account. 

​

4. The user fills in the basic required information to register or can link the account via social media accounts. 

​

5. This action requires the user to either upload or click a picture of the doctor's prescription. 

​

6. The user is able to select his/her trusted pharmacy linked with google maps. 

​

7. The camera detects the necessary information on the prescription to be able to generate reminders, medications and the patient's information.  

​

8. The user can also upload the prescription through the cloud storage or the gallery. 

​

9. The app now gathers information based on the patient's prescription. 

​

10. The user is now all set to use the app. 

Home Section:

iPhone X-XS – 14.png

11

12

13

14

18

15

16

17

iPhone X-XS – 11.png

19

iPhone X-XS-11 Pro – 1.png

20

iPhone X-XS – 12.png

21

iPhone X-XS – 13.png

22

11. The user is able to view his/her profile. They can change the selected pharmacy or update their prescription. This subsection also allows the user to change or switch between profiles. 

​

12. This subsection allows the user to view what current medication they are taking and what are the current inventory levels. 

​

13. This subsection tells about the current medication reminders are set by the user. 

​

14. This order subsection automatically fills in the inventory refill information for the user, shows the prices of the medication and allows the user to add it to the cart or proceed to checkout directly. 

​

15. This home nav-bar button is easily accessible to the user from anywhere
in the app. 

​

16. This medication nav-bar button is easily accessible to the user from anywhere in
the app. 

​

17. This reminder nav-bar button is easily accessible to the user from anywhere in the app. 

​

18. This Cart nav-bar button is easily accessible to the user from anywhere in the app. 

​

19. After clicking on the profile section, the section now expands and allows the user to swipe through the calendar, check the upcoming appointments with the doctor and allows the user to add new appointments. 

​

20. Once the force touch is applied to the profile photo of the user, it now allows the user to switch between profiles. 

​

21. This Subsection of medication now expands and gives an overview of medications being taken by the user and allows the user to add new medications. 

​

22. This Subsection of reminders now expands and gives an overview of reminders set by the user and allows the user to add a new one. 

Medication Section :

iPhone X-XS – 8.png

23

iPhone X-XS – 15.png

24

23. This section of the app gives an overview of information about the medication taken by the user. 

​

24. This section now expands and gives some facts, side effects and reviews shared by people taking this medicine. 

​​

Calender Section :

iPhone X-XS – 7.png

25

iPhone X-XS – 10.png

26

iPhone X-XS – 9.png

27

25. This section allows the user to browse through the calendar and see the upcoming set reminders. The force touch feature on the medication name allows the user to delete or add a new reminder in the calendar. 

​

26.  Adding a new medication feature allows the user to search for top-rated over the counter medications or search by category. 

​

27. Allows the user to delete the set reminder. 

​

Order Section :

iPhone X-XS – 17.png

28

iPhone X-XS – 18.png

29

iPhone X-XS – 16.png

30

28. This section helps the user to check out the cart order in a very easy way.  It allows the user to change or upload a new insurance card for discounts. 

​

29. This subsection allows the user to view and change the current payment method. 

​

30. This subsection allows the user to view and change the current address. 

Heuristic Evaluation 

Feedback from users and applying changes. 

Sanchit//

Barrier: 

_He felt overwhelmed as a first time user at the home page/landing page because he felt If there was an onboarding section that explained to him how to use the app would be more helpful rather than he trying to figure it out on his own. 

_ He wanted to be able to change pharmacy at the checkout section as well. 


Assurance: 

_Understood and liked the profile section

_Easily understood how to add or delete a medication. 

_ Appreciated the home page being the one-stop-shop page.

​

Saurabh//

Barrier: 

_ He wanted to be able to go to the first screen ( the login page ) and change or edit some global settings of the app. 

_ He got confused by the medication icon in the navbar. 

​

Assurance: 

_Swiped through the medication information section with no issue. 

_Liked the medication inventory track with a realistic medication bottle. 

_ Was attracted to the layout being like stacked folders. 

​

Rohit//

Barrier: 

_Desired more information on the profile section. 

_ He wanted to be able to get prompts from the app whether he took the medication on time for the app to automatically update the information. 

_He wanted the app to give him notification if the medication he's taking would expire soon. 


Assurance: 

_Liked the easy login or switch through profiles.

_Clicked the home button more often.

_ Was easily able to navigate through the sections from the global navbar. 

​

TOP INSIGHTS: 

1. Reconsider medication icon in the global navbar.

2. Consider having an app onboarding for an easy understanding of the landing page. 

3. Add a global app settings button on the login page or profile page. 

component sheet .png

Component Sheet

An inventory of wireframe placeholders yet to be designed as a visually cohesive system. 

bottom of page