top of page

Prototyping Design: Project Overview

Left login.png


Design a mobile application that will allow individuals to manage 5 aspects of their personal healthcare efficiently: manage appointments, order medication, pay bills online, access test report, chat with care team.


Designed a healthcare application prototype by creating key user flow architecture and minimal design principles for users, informed by usability testing.


UX Designer - All aspects of this design, were created by me, the primary design tool being Figma.


Design principles I followed:

  • Put usability first.

  • Information architecture should be intuitive, navigation persistent.

  • Use familiarity and actively avoid lorem ipsum content.

  • Minimal scrolling

​Process Overview:

  • Research & Discovery           

  • Information Architecture & User Flows

  • Sketches

  • Usability Test

  • Wireframing

  • Hi-fidelity prototype


  • Limited Time


Project Duration:

  • 2 weeks


Tools used:

  • Figma

  • Pen and paper sketches

  • Material 3 Design Kit

  • Clay 3D mockups (plugin)

  • Blush (plugin)

  • Iconify (plugin)

Research & Discovery

  • Conducted competitive research of applications like myHealth Stanford, Practo, 1mg, Apollo, CVS to understand commonly used healthcare information architecture, user flows, decision maps, and so on.

    • Conducted heuristic evaluation of systems (Molich and Nielsen)

    • Focused on layout, visual design, UX Design, and key features

Competitive Analysis.png

Competitive Analysis

  • Due to time constraint, I made a list of features I could keep in my designs, while following design principles.

Feature Map.png

Feature decision map

  • While I worked on the information architecture and planned features, I kept track of two users and their needs.

    • To support this, I maintained an empathy map to lay out the Says, Thinks, Does, Feels of these two user profiles.

Empathy Map (Community).png

Empathy map


Information Architecture

Based on data from competitive research and decision mapping, I created this information architecture:

Information architecture.png

Sketches & Paper Prototype

Based on the user flows, I set to work on sketches and also created a paper prototype for the Messages flow.


For this case study, I will be focusing on the Billing flow.

Billing 1.jpg
Billing 2.jpg
Billing 3.jpg
Billing 5.jpg
Billing 6.jpg

Feature Highlights:

Annotations 1.png
Annotation 2.png

Usability Test

I conducted a usability test with 5 participants with the sketches as a clickable prototype on Figma.


  • Participants were not able to click the Details button easily. The close proximity to the larger, more prominent PAY NOW button was leading to the participants clicking the wrong button.

To combat this, I changed the position of the Details button in the wireframe, updated the name to View Details. Clicking it would progressively disclose the desired information.

Billing 1.jpg
Billing 1.png
Billing 2.png
  • It was not immediately evident to the participants that the first two payment options were saved credentials, and therefore quick payment options.

To address this issue, I created a visual representation of the saved cards and created a clear demarcation between saved and unsaved options.

Billing 3.jpg
Billing 3.png
Billing Clay 3.png


I created the wireframes for the Billing flow on Figma. Having sketches ready saved a lot of time.

Billing 1.png
Billing 2.png
Billing 3.png
Billing 4.png
Billing 5.png
Billing 6.png
Billing 7.png
Billing 8.png
Hi fid

Hi-fidelity prototypes

I converted the wireframes to high-fidelity I converted the wireframes by updating text, color, and button styles using Google's Material Design 3 Kit that aligned with the visual aesthetic decided at the beginning of the project.

Visual aestehtic.png

On the homepage, the user clicks the Billing button.

Step 1: 

Login new 5.png

User reviews the invoice details and clicks the primary CTA: Pay Now

Step 2: 

Billing Clay 1.png

User reviews the payment method and clicks the primary CTA: Confirm Payment

Step 3: 

Billing Clay 3.png

User enters OTP code to complete verification and clicks primary CTA: Verify

Step 4: 

Billing Clay 7.png

User reviews the payment success details and clicks the primary CTA: DONE

Step 5: 

Billing Clay 8.png

With the delivery deadline close, I had switched to rapid prototyping.


Based on feedback, I created this final screen which showed the bill being reflected as PAID, earlier it had been shown as PENDING.

Billing Clay 9.png


When time is a constraint, the first order of business should be to try and see what others have done and try to learn from their successes and failures. This provides a quick and easy framework to build on.


This prototype is a personal project and is not for commercial use. As next steps, I would like to explore further:

  • Use an established design system like Material Design components to update the UI.

  • Incorporating a conversation design flow for the appointments requirement.

  • Integrate a method to connect insurance provider.

  • Add a functionality to sort through available physicians by distance, specialty and so on.

Selected Projects

My Clients Mockup 2.png

Oct 2022

Secure portal for insurance agents to conduct business efficiently

UX Design, user flows, data visualization, hi-fidelity prototyping, Figma. greenfield project, sole UX Designer, insurance industry


Jan to June 2021

Instructional Design & Content Strategy

Walmart Academy App Redesign : Learning Services

retail learning design, strategy, nano learning, Adobe Experience Manager, ADDIE, Agile project management 

cover pic.png

Oct to Dec 2022

Service and Learning Design

Mayor's Office, City of Boston

civic tech, accessibility workshop facilitation, Figma, service design, instructional design, UX design

May 2022

Prototyping and Interaction Design

Class Project: Mobile healthcare application

healthcare application, Figma, sketches, rapid prototyping, wireframing, usability testing

Login new 5.png
Left login.png

Sep to Dec 2022

Multi-Modal Product Design

Class Project: Haptic eyewear to increase road safety

haptic wearable, Arduino uno, research documentation, functional analysis, morphological chart, physical product prototyping, usability testing

bottom of page