Web Experience Design,
Shankara Cancer Hospitals
UX Design & Development of multiple web portal experiences for a Hospital group, with backend service integrations and CMS, with information architecture, interaction patterns, data-driven workflows and cohesive visual experience.
What we did
Project Overview
Design Brained Studio enhanced the web presence of Sri Shankara Cancer Hospitals by conducting extensive research, redesigning for intuitive navigation, adopting a modern CMS, and creating a unified visual design to improve user engagement and reflect the hospital's commitment to excellence.
Key Features
Project Goals
Logo Redefinition
The primary goal was to refine and modernize the existing logo to achieve a more structured and geometric appearance. This involved standardizing the logo’s fonts, colors, and outlines to ensure consistency and clarity across all platforms.
Brand Identity, Guidelines & Design
Another key objective was to establish a unified brand identity that would bring together all brand collateral under a single, cohesive design language. This included the development of comprehensive brand guidelines to ensure consistency in both digital and print materials.
Information Architecture & Organization
Given the extensive amount of information accumulated over 12+ years of the hospital’s operations, the goal was to create a clear and intuitive information architecture. This would organize and prioritize content to make it more accessible and user-friendly for a diverse audience, including non-medical visitors.
UX Design
The project aimed to design a user experience that facilitated easy navigation, discoverability, and consumption of information. The UX design needed to cater to various user needs, ensuring that all visitors could quickly and efficiently find the information they were seeking.
Cohesive Web Presence
Finally, the goal was to create a cohesive online presence across multiple websites under the Shankara Cancer Hospitals umbrella. Each site needed to maintain a consistent brand and design language while allowing for the sharing of data and assets, thus providing a unified experience across all digital touchpoints.
Research & Analysis
We dedicated several months to gathering and analyzing information from the hospital’s 12+ years of operations. This involved speaking with doctors, stakeholders, and staff to uncover the wealth of knowledge accumulated over the years. Our research allowed us to structure the information effectively, prioritize it by severity and importance, and suggest ways for the hospital’s content team to organize it. This process of research enabled us to build User Personas, User Journeys and eventually come up with appropriate and effective Wireframes for the portals.
This thorough analysis laid the foundation for designing a user-friendly web portal that visitors could easily navigate and interact with.
Project Planning & Execution
- We not only designed the requirement, but developed it too. We not only ideated with the stakeholders, but planned it too. We not only executed the project, but defined the way various teams collaborated, exchanged information, content and media too.
- We spent time guiding the non-tech-savvy staff, content writers and teams in understanding how videos are shot, why designs are executed a certain way, how content writing needs to align with the design work and vice versa.
- We built tracking sheets, planning sheets, mechanisms of check-lists and processes, to ensure smooth exchange of information, process, design specs, content specs, content, media, etc., all happened as per the quality standards we had initially committed to the stakeholders.
- We dedicated time and resources shooting videos, taking photos of the doctors, guiding the in-house media team of the Hospital to scale the process and quality standards we had set. This resulted in one of a kind output that was aligned with consistent colors, design language, eventually leading to a streamlined user experience for various types of visitors - patients, doctors, medical professionals, donors and more.
Visual Design
Colors
Our challenge was to develop a color palette that was both impactful and positive, counterbalancing the often daunting concept of cancer. After several iterations, we arrived at a confident and vibrant color scheme that worked well across both web and print mediums.
Typography
With a need to present long-form content such as procedures, guidelines, and doctor profiles, we selected typography that was clean, modern, and highly readable. This choice ensured that the text-heavy content remained accessible and engaging for users.
UI Design
Combining multiple websites with a vast range of interactions, we designed a comprehensive and robust yet multi-device user interface components. The set of components range from buttons, form components, to panels, cards, accordions, sections, menus, tabs, tables, and many more. These were inline with the project's colors and typography, legible and most of all, accessible.
Illustrations & Iconography
We created custom illustrations and icons to enhance the visual experience across the web portal. These elements were consistent in style and color, adding a bright, positive touch to the site while maintaining the seriousness of the content. The iconography were designed with different types of necessities across the websites.
- Site/Feature Icons
- Card/Information Icons
- Department Icons
- Page Icons / Illustrations
1. Site/Feature Icons
These icons represented features or USP of the brand/business. The icons here were designed to go in-line with the brand colors and uphold the meaning of the colors through minimalistic illustrations that represented the concepts of features being illustrated.
2. Card/Information Icons
These icons mostly served as secondary visuals for important bullet points, parameters or take-aways of various sections across the website. These were illustrated to ensure the bullet points were visually grasped faster by the visitor.
3. Department Icons
40+ departments were illustrated through minimalistic icons. These icons went through extensive understanding of what each department specialises in, and represent them visually so the meaning of the departments are even more easily understandable by the visitors/patients. As preferred by the stakeholders, we also introduced a variety of colors for each department, eventually enforcing those department pages to be influenced by the colors of their respective icons.
4. Page Icons/Illustrations
Most pages of the websites mostly talked about various topics belonging to a broader subject/categorisation of information. We introduced simplified illustrations that were fresh, colorful and conceptually meaningful, to represent each page. This enabled visitors who were often from non-medical background, to understand the gist of the page/concept easily.
Project Websites
As part of an on-going work engagement with Sri Shankara Cancer Foundation, we have currently ideated, conceptualised, designed and developed 3 websites. Here are a few screenshots: -
Shankara Cancer Hospitals Website
Careers Website
Shankara Cancer Foundation Website
We are working on more websites for the hospitals group, to represent the cohesive brand to enable better reach to patients, students, donors and everyone else.
Project Features
Responsive UX Design
The websites were built to be fully responsive, adapting seamlessly to different screen sizes, including desktops, laptops, tablets, and smartphones in both landscape and portrait modes. Rigorous testing ensured that every feature and page functioned perfectly across various browsers, devices, and resolutions. Irrespective of where the patients visited the hospital website from, it was designed to look and behave appropriately.
Mobile Quick Launch Menu
For mobile visitors seeking to reach the emergency numbers quickly, we built a custom quick-launch menu. This provided easy access to hospital emergency/ambulance and appointment numbers, while also enabling to reach the hospital team through quicker channels.
Dynamic Content with Filters
Key sections such as Doctors, Departments, Facilities, and Blogs were powered by a dynamic CMS, allowing for easy search and filtering of content. This made it simple for users to find the information they needed quickly and efficiently.
Interactive Content
We added interactive features, including custom assessments that helped visitors determine whether they needed to see a doctor or could benefit from certain activities. These interactive elements enhanced the overall user experience by providing personalized, actionable advice.
Dynamic Forms
Forms were integrated with the backend, dynamically connecting with CMS data to provide a more interconnected experience for users. This allowed for more efficient form submissions and responses, improving the overall usability of the sites. The forms varied from search, newsletter subscription, applications, tax receipt request forms, etc.
Summary
This extensive project required months of careful planning, design, and execution. The challenges were significant, but our team at Design Brained Studio rose to the occasion, delivering a final product that was well-received by the hospital stakeholders. The positive feedback and ongoing engagement with the hospital speak to the success of the project, and we look forward to continuing our partnership in the years to come.
Learning
- Managing Diverse Stakeholder ExpectationsWorking with multiple stakeholders from different branches of the organization taught us the importance of aligning diverse perspectives. Each entity had different needs and priorities, which required clear communication and a structured approach to maintain consistency across the project.
- Navigating Legacy Systems and Information OverloadThe project involved organizing over a decade’s worth of accumulated information, which highlighted the need for deep discovery sessions and careful planning to avoid overwhelming users while ensuring all critical information was accessible and easily understood.
- Balancing Sensitivity with User EngagementDesigning for a cancer hospital meant dealing with sensitive topics, which challenged us to create a website that was both empathetic and engaging. We learned how to carefully craft messaging and visual elements to maintain a balance between conveying the seriousness of the subject and fostering a sense of hope and positivity.
These lessons reflect the deeper, more nuanced challenges we navigated during the project and how they shaped our approach moving forward.
