US Healthcare Case Study
Mobile App + Desktop & Responsive Website
The Healthcare Website & App has been made for a healthcare system that combines the best of academic and community medicine.
As part of the design team, we crafted a seamless digital experience, prioritising patient engagement and accessibility. We have developed 2 platforms that simplify healthcare management while enhancing user satisfaction and overall health outcomes.
My Role: UX/UI Designer
Design Discovery
Working via "Lab-Factory" model, we conducted Design Discovery for the website and app by engaging stakeholders (Lab), performing user research, and analysing industry trends. We created personas, user journeys, and wireframes to identify pain points and opportunities, ensuring a user-centric approach that aligns with healthcare regulations and enhances patient experience.
Sprint Planning
Utilising the "Agile Methodology", we worked with the clients and our Functional team to understand the design requirments - gathering knowledge and conducting research based on the design goal at hand.
Primary & Secondary Research
Beginning with secondary research, we figure out opportunity areas. Taking user interviews is a secondary approach, when a customised experience is crucial to a feature.
Defining Problem Statement
In certain scenarios when the problem is multi- fold, we conduct workshops (like 5 Why technique) with the client to find the root cause of the issue.
User Persona
Moira (41, Mother with an autistic son Mike)
We built a persona that represents various use cases - patient & patient's family member. Since our domains cater to large demographic, this helped build encompassing features.
User Flow
Visualising the end-to-end experience of users to identify touchpoints and areas for improvement, we identified main action items and how to make the website and app easy to navigate
Delivery Planner
We keep a board updated with tasks, subtasks, timelines and who it’s assigned to (SPOCs). This process has deeply helped us give timely deliveries.
Design Solutioning
The team brainstormed and ideated on potential solutions based on previous findings. We created wireframes, prototypes, and visual designs, incorporating feedback from stakeholders and users. This collaborative process ensures the final design addresses user needs, aligns with business goals, and is technically feasible.
Wireframes & Prototypes
We take a mobile-first approach as majority of our users utilise that platform. We also create prototypes to see how the user will navigate, striving to make it as similar to the actual product.
Dev Feasibility Checks
We conduct rounds of feasibility checks with the Dev team to ensure no major blockers arise while developing. Our team ensures equal participation in creating solutions.
Hi-Fidelity Visual Designs
Created on Figma, the files delivered usually contain screens that is going to be built. These screens contain accurate measurement of the UI as they will be used for development.
Customized Icons & Illustrations
All icons and illustrations are handmade by visual design team so as to give a customised experience. These are accessible and easy to understand, even without supporting text
UX Writing
Differing from copywriting, we assist the clients with thoughtful copy that focuses more on helping users and also has a hint of marketing flair.
Image Guidelines
Images for locations of promotional items must connect with the people, thus we provide supporting keywords and dimensions for all images for the client's marketing team.
Design Tokens
Working with multiple digital platforms, it was important to ensure that there was a single source of truth for design decisions and collaboration among teams. After a detailed visual audit, we were able to build a locked system with tokens.
Color
Themes that shift between light & dark mode
Spacing
Curated for all - desktop,
tablet and app
Border
Set as border weight and border radius
The typography has 2 versions - Desktop and Mobile.​
Each font set comes with a set of guidelines based on when to use it, in which color it should be, etc. so every sentence passes accessibility criterias.
(App uses Mobile Website font as well)
Some Website Features
Efficient Mega-Menu Navigation
An all-encompassing Header Navigation that gives access to the major sections of a website, along with promotional elements.
Some App Features
Not Compulsory to Log-in
Though the authenticated feature is preferred, certain tools can be accessed without loggin in.