Health is Wealth
Lean UX case study
Introduction
Parkway Hospitals, Singapore, a wholly-owned subsidiary of Parkway Pantai Limited, is one of the leading providers of private healthcare services in Asia.
Mission: To provide a multi-disciplinary specialist care in one place. Its medical services and facilities house more than 1,000 beds and 1,200 accredited specialists.
Value: Seeks to be the global leader in value-based integrated healthcare. Leveraging on its pursuit for quality excellence, comprehensive clinical programmes and facilities, Parkway Hospitals, Singapore strives to meet patients’ expectations through quality healthcare.
Elements of UX
In this project, I will be incorporating the 5 elements of UX — strategy, scope, structure, skeleton and surface. By building from the bottom (strategy plane) to the top (surface plane), these 5 planes provide a conceptual framework to guide, design and understand the whole user experience better.
Design challenge
Design a digital product that renders a personalised service experience to help organisation envision this through a future state omni-channel experience.
Client: Parkway Hospitals
Target audience: Wealthy international patients
(South East Asia and Middle Eastern countries)
Starting from the strategy plane in Lean UX process, this approach begins with the idea that everything is an assumption until proven otherwise. I have mapped out the assumptions on Parkway Hospital’s business needs by using the Business Model Canvas. That sums up the product objectives and user needs.
Business Goals
- To reach out to as many well-to-do international patients with the interest to seek medical attention in Singapore.
- To provide quality excellence in medical services, clinical programmes and facilities.
- To be the top choice of target patients for medical tourism.
Business Assumptions
Proto-persona
Instead of spending long hours in the field interviewing to find out who I will be designing my product for, I spent a few hours creating a proto-persona by using the above Business Model Canvas as a guide. These assumptions will be then validated by research.
In order to validate the above proto-persona, I have constructed a few questions and conducted a survey. Some responses consolidated are:
The above survey results gave me some new perspectives and insights about my users’ goals. From these findings, I reiterated my proto-persona and added the “opportunities” area to help him achieve his goals.
Feature Hypothesis Statement
The Value Proposition Canvas describes the specific value proposition in my business model in a more structured and detailed way.
This is to understand and effectively form my hypothesis about what kind of features might help the business outcome. Hence, finding the sweet spot between them. The list of features are:
Feature 1
Able to find specific specialists that are the best in their fields, including adoption of new technology and methods
Feature 2
Browse by medical specialties within Parkway Hospital
Feature 3
Travel information and restrictions, including transport and special arrangements (e.g. translation, special diet, local sightseeing)
Feature 4
Cost estimation for treatment that includes the cost fees of hospitals and types of rooms available
Feature 5
Digital live consultation
Feature 6
Regular updates on health tips and health related information on websites and mobile application
Effort/Impact scale
By using the Effort and Impact scale, we could determine our business goals by prioritising our user’s goals.
User Needs
After analysing all available features on the Effort and Impact scale, I have ranked them based on the business perspective, and also keeping in mind our user’s goals by using the MoSCoW framework.
Content Inventory and Content Audit
This process started off with listing down every piece of digital content Parkway Hospitals has and capturing it in an asset level. This is an effective way to re-organise and help focus on the core content to help users fulfil their needs.
Content Framing
Below is an example of content framing for Parkway Hospital’s homepage. From the most important “Finding a doctor” to the least important “News and events”, these help users navigate and achieve their goals efficiently.
Interaction design
While keeping in mind on the above feature hypothesis statement, there are 5 dimensions of design interactions. They are words, visual representations, physical objects/spaces, time and behavior. These dimensions come in handy to highlight areas that are worth re-designing.
1st dimension: Words
Considering the preferences and characteristics of my users, the menu bar wasn’t catered specifically to either locals or overseas patients. Hence some might be confused during navigation. A potential solution for this is to have a tab that says “Medical tourist” or “Overseas patients”.
2nd dimension: Visual representations
Picture speaks a thousand words. Having impactful imageries definitely help in creating traffic and to impress our users.
3rd dimension: Physical object/space
The physical hardware used for users to interact with the product are keyboard, camera, microphone, mouse and touch screens. One of the features that I have introduced, digital live consultation, requires users to speak and interact with their specialists/doctors through the product’s website.
4th dimension: Time
I have briefly interviewed 5 users during my contextual studies, most of the users preferred to use the product during off-work hours, so they could focus on their research and task. Some used it privately due to the privacy while making appointments, and having a conversations with their doctors online.
5th dimension: Behaviour
Information Architecture
I restructured the Information Architecture (IA) of Parkway Hospitals website based on above interaction design and content audit. I did an open/close card sorting exercise with 10 users to improve navigations, sorting of informations and ensuring users have the ease in finding what they need fast and efficiently.
There are a few insights which I have picked up during the open and close card sorting exercise.
- Respondents tend to get overwhelmed by the list of medical specialties. Hence, categorisation is recommended
- The tab “Plan your visit” on the website wasn’t clear for international patients
- Too many duplicate links and a few broken links
New proposed Information Architecture
I designed a new information architecture based on all insights gathered from my card sorting exercise. This new proposed sitemap aims to give clear navigation and directions to the international patients.
Interface Design
In this stage, we are defining the skeleton plane through interface design with the familiar realm of buttons, fields, and other interface components. These affect the way designers design because people base their actions according to their mental model. Respecting people’s mental model is the foundation of designing usable user centric systems. Hence being consistent is the key for success navigation.
Buttons
Two buttons with the same function were used differently across Parkway Hospitals’ website. The inconsistency of the buttons might confuse users.
The button’s level of emphasis helps determine its appearance, typography and placement. To increase its prominence, I have used a ‘Floating Action Button’ for higher elevation by applying shadows, consistent typography and style. These could make a difference in surface elevation perceptible and consistent across the site. Suggested consistent use of buttons as below.
Responsive layout grid
A good responsive interface requires flexible columns and paddings that resizes on its own depending on the mobile, tablet and desktop’s screen width.
Parkway Hospitals’ website shows inconsistent use of grids and not being responsive across platforms.
To illustrate how consistency can be applied from desktop to mobile web version, I have created the mockup below.
Text fields
These allow users to interact by typing or interacting with the text fields. Both forms below provide the same functionality, with two different styles depending on its design system.
Helper text shows guidance on the input field. Error messages display instructions on how to fix it. Icon comes in handy when designing for colourblind users. I have included these features to help in users’ form filling experience.
Navigation Design
A discipline of creating, analysing and implementing ways for users to navigate through a website or a mobile application.
To empathise with my users (international patients) and achieving my business goals (a digital live consultation that helps drive traffic to the site, hence increasing business leads).
I have marked out all the possibilities flow that my user might take. The purpose of this exercise is to shorten the flow so users could accomplish their goals at the shortest time possible.
Navigation bars and drawers
Navigation bars and drawers are commonly seen on both desktop and mobile applications where most action items and menu are placed. A research by George Miller on human’s working memory explains why we should have no more than 7 items on the navigation’s top tier. He then discovered people could, on average, only keep between 5 to 9 items in their short-term memory.
In Parkway Hospitals’ mobile web version, I kept my navigation bar and drawers clean, offering fewer categories with deeper structure, so users won’t be forced to memorise a list of items in my menu.
Information Design
Understanding both law of common region and law of proximity in creating clear structured elements on a digital platform helps users understand the relationship between elements and sections quickly.
Hick’s Law
Applying Hick’s law on ‘medial specialties’ page minimizes user’s response time. By sorting complex information into smaller groups decreases cognitive load.
Zeigarnik effect
This effect provides clear indication of progress in order to motivate users to complete their tasks. In any sign-ups forms or appointment requests, several inputs are required from the user.
Hence, a progress bar is suggested on Parkway Hospitals’ mobile web version to keep users on track on their progress and to prevent any long scrolling down the screen.
Sensory Design
Sensory design delivers an experience to the users by manifesting on people’s senses. (Vision, hearing, touch, smell and taste) In this project, I will be focusing on 3 senses. Vision, hearing and touch.
Vision:
This is an area where most UX/UI digital product designers have the most discussion about. Everyone has different sense of aesthetics, but that doesn’t mean design decisions have to be based on everybody’s perception of cool/nice works.
Focusing on the 5 principles of visual design in UX, mainly balance, scale, contrast, visual hierarchy and gestalt principles plays an important part of creating an aesthetically pleasing work that works well with the users.
Hearing: (possible idea on both desktop and mobile application)
With different sound beeps to buzzes or even short music tracks, sound plays a role in creating a sense of personality to the website. I believe sound design could be used in this project to provide sensory feedbacks. For example, a wrong input on text fields during form filling to submitting any transactions or appointment details.
Touch: (possible idea on mobile application)
Haptics refers to the sensation delivered to users through a touch interface. By implementing short vibrations on call-to-action buttons could enhance the overall user experience by conveying and reinforcing information, all thanks to the vibrating devices.
Prototype
Prototype shows one user flow, from the point of entry when user enters the landing page to successfully experiencing their live consultation with their preferred doctors and specialist in the field. This feature, digital live consultation helps drive traffic to the site, hence increasing business leads.
Interact with the Desktop and Mobile prototypes below.
Toolkits— Notepad, miro, business model canvas, value proposition canvas, content frames, effort/impact scale, MoSCoW framework.
Figma links — Desktop and Mobile web versions.
UX/UI Techniques — Business analysis, survey, interviews, desk research, proto persona, user stories, content audit, interaction design, information architecture, interface design, information design, navigation design, hick’s law, zeigarnik effect, design principles, sensory design.
