Work About me Contact Resume
Back to work
Pharmacy Retail Responsive Web

Pharmacy Website

Building a digital storefront for a growing network of physical pharmacies.

Role
Lead Product Designer
Company
HealthSy Pharmacy
Scope
0 → 1 Web Experience
Year
2026
Website structure
A digital front door for physical pharmacy stores
Pharmacy website
HomepageBrand and offering
Store discoveryFind a nearby store
ContentHealth information
EngagementEnquiries and CTAs
Sub-AdminInternal management
01 — The Context✦

From physical stores to a digital storefront.

HealthSy Pharmacy operates physical pharmacy stores. The website was created as a dedicated digital presence for the pharmacy business — not as a replica of the HealthSy consumer app.

The objective was to translate the familiarity and trust of a physical pharmacy into a modern web experience that helps people discover the brand, explore pharmacy information, find stores and engage with the business digitally.

02 — The Challenge✦

How do you bring a physical pharmacy brand online?

Customers traditionally interact with the pharmacy through its physical stores. The website needed to strengthen that relationship by making the pharmacy easier to discover and understand online.

Business need
Design response
Build a digital presence
Create the website from the ground up
Make the pharmacy easy to understand
Clear information hierarchy and content structure
Connect digital with physical stores
Store discovery and relevant actions
Encourage engagement
Clear CTAs, content pathways and interactive sections
Support the internal team
Dedicated Sub-Admin experience where applicable
03 — Starting From Scratch✦

There was no existing website experience to simply redesign.

I established the website foundation from the ground up, translating business requirements into a clear customer-facing experience.

Business requirementsUser needsInformation architectureContent structureWireframesVisual directionResponsive UIInteraction designFinal website
04 — Designing the Experience✦

One website. Multiple pharmacy touchpoints.

The experience was structured around a simple progression:

01
Discover
Help users understand HealthSy Pharmacy.
02
Explore
Let users browse pharmacy information, stores, content and relevant offerings.
03
Engage
Provide clear opportunities to interact with the pharmacy brand and move toward the next action.

This keeps the website focused on the pharmacy business rather than turning it into another version of the HealthSy app.

05 — Homepage✦

The digital front door to HealthSy Pharmacy.

The homepage establishes the brand, communicates the pharmacy offering and creates clear paths into the most relevant parts of the website.

Key design considerations
Strong brand introductionClear content hierarchyPharmacy-focused messagingStore discoveryRelevant CTAsPromotional or engagement sectionsTrust-building content
Homepage hierarchy
Content order, top to bottom
Introduction
Strong brand introduction
↓
Offering
Pharmacy-focused messagingClear content hierarchy
↓
Discovery
Store discovery
↓
Engagement
Promotional sectionsRelevant CTAs
↓
Trust
Trust-building content
06 — Connecting Digital With Physical Stores✦

The website doesn't replace the pharmacy. It helps users discover it.

ONLINE
Digital
Website
Store discovery
Pharmacy information
Location / contact
OFFLINE
Physical HealthSy Pharmacy Store

This digital-to-physical bridge is one of the defining characteristics of the project.

07 — Designing for Engagement✦

Designed to encourage meaningful engagement, not just page views.

Rather than treating the website as a static company brochure, the experience was designed to encourage users to explore, interact and continue their journey.

01
Explore pharmacy information
Users can learn about the business and its offering.
02
Discover physical stores
Digital exploration can lead users toward an offline store.
03
Browse relevant content
Content creates additional reasons to explore the website.
04
Interact with CTAs
Actions are placed in context rather than treated as generic buttons.
05
Submit interest / enquiries
Relevant pathways allow users to engage directly with the business.
08 — Physical Store Discovery
From “Where is HealthSy?” to “I know where to go.”

Where store discovery is part of the website, the experience should make the path from website → store information → location → action straightforward.

This reinforces that the website is a digital extension of a real pharmacy retail business.

Path
WebsiteStore informationLocationAction
Journey map
Online discovery to store visit
01Website
02Store info
03Location
04Action
User asks
Is there a store near me?
What does it offer?
How do I get there?
Visit or get in touch
Content journey
Content as a route into the pharmacy
01Discover
02Read
03Understand
04Explore
05Act
Each article ends with a contextual next action.
09 — Content as an Engagement Layer
The website is more than a digital brochure.

Informational content can create another route into the pharmacy experience. A user can discover a topic, understand the information, explore a relevant section and then take a contextual action.

Content journey
DiscoverReadUnderstandExploreAct
10 — Sub-Admin
A customer-facing website needs an operational layer behind it.

Separate from the customer journey, the Sub-Admin supports the internal team's workflow behind the public-facing experience.

Structure
DashboardContentStoresPagesLeads / InterestsOther management modules
Sub-Admin structure
The operational layer behind the website
Sub-Admin
Dashboard
Content
Stores
Pages
Leads / Interests
Other management modules
11 — Responsive Experience✦

From desktop storefront to mobile discovery.

The website was designed responsively so customers can discover and interact with HealthSy Pharmacy across screen sizes.

Responsive behaviour
One experience across screen sizes
01DesktopFull storefront layout
02TabletAdapted grid
03MobileSingle-column discovery
12 — Design System✦

A reusable foundation for a growing pharmacy business.

Because the website was built from scratch, reusable components and patterns were established to maintain consistency across pages and support future expansion.

TypographyColorButtonsCardsNavigationStore componentsFormsContent modulesStatesSpacingResponsive behavior
Design system
From foundations to product screens
Foundations
ColourTypographySpacingGridIconography
↓
Components
ButtonsInputsCardsTablesStatus badgesModals
↓
Patterns
FormsListsEmpty statesFeedbackNavigation
↓
Product
HomepageStore pagesContent pagesSub-Admin
Illustrative structure only. No product screens are shown.
13 — Impact✦

From physical pharmacy to digital storefront.

The project established a new digital touchpoint for HealthSy Pharmacy, helping connect the physical retail business with online discovery and engagement.

Foundation
Outcome
0 → 1 website
A new digital presence for the pharmacy business
Clear information architecture
Easier exploration of pharmacy information
Store-focused experience
Stronger connection between digital discovery and physical locations
Engagement-led structure
More opportunities for users to explore and interact
Reusable UI foundation
A scalable base for future website growth
14 — Final Reflection✦

I wasn't just redesigning a website.

I was building the digital presence of a physical pharmacy business from the ground up.

The project challenged me to translate a real-world retail experience into a digital product while keeping the experience approachable, informative and engaging.

From physical shelves to digital screens — the goal was to make HealthSy Pharmacy easier to discover, explore and engage with.

Pharmacy Website
0 → 1 Web Experience · Lead Product Designer

Let's
design & build
something great.

Surya signature
Phone
+91 97877 48686
Location
Coimbatore, Tamil Nadu, India
LinkedIn Dribbble Behance
© 2026 Surya D. — Product Designer