Project overview
Harley Hospital's app is a solution designed to revolutionize patient care by simplifying the appointment booking process across its network, offering quick access to specialists and services, and seamlessly integrating with the hospital's scheduling system for real-time data synchronization.
Time Frame
08.2023 – 01.2024
Role
Lead Product Designer, User Researcher
Team
PM, UX Designer, Developer
The Challenge
Digital transformation
The Goal
To enhance Harley Hospital's competitive edge and elevate patient satisfaction by transforming the healthcare experience through the implementation of our innovative app.
This transformation aims to position Harley Hospital as a leader in accessible and efficient healthcare delivery, ensuring affordability and reliability for all patients.
Quick links
>>> How we kick off the project
>>> Ideation
>>> How I got there
>>> Iteration
>>> Style guide
>>> Reflection
How we kick off the project
.png)
Stakeholder interview
User interview
User Survey
Stakeholder workshop
Key insights
of participants have previously refrained from booking a doctor's appointment due to their previous experiences with the booking process.
67%
feel frustrated
17%
feel anxious
42%
feel stressed
CHALLENGE 1
HMW Transform the appointment booking experience?
Ideation
Concepts explorations
.png)
One-tap appointment
Concepts ideation
.png)
However, we realized that this concept...
May Oversimplify:
For complex medical needs, a one-click solution might oversimplify the appointment process.
Potential for Errors:
Rapid appointment scheduling might lead to accidental bookings or scheduling conflicts if not carefully implemented
But we've also realize that the fundamental idea behind one-tap appointment – Efficiency – is actually achievable.
Efficiency
How might we...
Design an efficient appointment system?
How I got there
Define the user journey
I faciliated a workshop to get alignment on the main user flows to ensure everyone is on the same page.
.png)
Define the product requirements
.png)
Define the success metrics
Wireframe
I quickly created wireframes based on the previously defined elements.
.png)
Collaborative review
- I share the wireframes with stakeholders and team members for collaborative review.
- I also encourage feedback and discussion to refine the wireframes and ensure alignment with the intended user experience.
Before
After
However...
There was another big open question
Should we incorporate doctor's rating?
YES!
AND HERE IS WHY
Doctors' rating wireframes
Usability testing
01
Repeat appointments could be more efficient
Insight
Streamlining the process for repeat appointments enhances overall efficiency. Simplifying the steps involved in scheduling subsequent appointments allows users to save time and navigate the system more seamlessly.
02
Information upload could be more efficient
Insight
Improving the efficiency of information upload ensures a smoother user experience.
03
Appointment management could be more efficient
Insight
Optimizing appointment management processes contributes to overall efficiency.
How might we...
Make the appointment system more efficient?
Iterations
Iteration 1
Insight 01: Efficient repeat appointments
Identify moments of truth
I started with identifying pivotal Moments of Truth within the user journey and strategically explore opportunities.
Solution explorations
.png)
Stakeholder prioritization
Express booking
.png)
Effortless replay
.png)
.png)
.png)
Iteration 2
Insight 02: Information upload could be more efficient
Before
After
Previously, the separate upload steps may have led to confusion and increased mental effort. Now, users can complete both actions in one go, minimizing cognitive strain and enhancing overall usability.
By consolidating these actions into a cohesive process, we eliminate the need for users to navigate multiple pages, resulting in a more efficient and straightforward experience.
This design decision is influenced by the principle of offering users greater ease of use. Allowing simultaneous text and photo uploads accommodates users who prefer different modalities of input.
Iteration 3
Insight 03: Efficient Appointment Management
Business goal & User needs
Optimizing appointment management processes contributes to overall efficiency.
.png)
Latest wireframe
.png)
.png)
2nd usability testing
.png)
The results highlight successes in some areas but reveal opportunities for improvement in overall difficulty and user preference. In response, we are enhancing the experience to reduce appointment times, improve usability, and user satisfaction
More adjustments
Adding a search bar improves user efficiency by quickly locating specific content, enhancing app accessibility and usefulness.
Search Bar Enhancement
Users find the homepage user-friendly and meeting their needs. Additional refinements during the Hi-Fi design phase aim to enhance visual appeal and user experience, ensuring satisfaction.
Positive Evaluation of Homepage
Additional Content Demand
Users want more relevant information. We'll add detailed health info, professional advice, and practical features to meet this demand, enhancing the app's appeal.
3nd usability testing
Metrics
We successfully reduced the appointment booking time and gained higher user satisfaction.
CHALLENGE 2
HMW handle Design System in Digital Transformation?
User Interface Design
Define standards
The goals
- Find the right balance between design elements that attract users without compromising usability.
- Ensure alignment with visual consistency and brand image.
- Explore how micro-interactions can enhance the overall user experience while maintaining a clean interface.
The solutions
Visual principles
Color Scheme
Typography selection
Considerations
Typography
Button & Icon style
Considerations
.png)
Button & Icon
Introduce Micro-interactions
Loading Animations for Data Processing
Favouriting Doctors
Pull-to-Refresh for appointment booking result
Success and Error Notifications
Reflection
Influence beyond design execution 🚀
After our first chaotic kickoff client meeting, I quickly realized that being a designer meant more than just doing design work. It meant guiding decisions with a proactive, data-driven approach.
So, I started creating presentations that not only showed our design solutions but also explained the vision and rationale behind them. I made sure these presentations were clear and convincing for everyone on the team.
Additionally, I organized workshops where our cross-functional team could come together and share their thoughts, creating a collaborative environment where everyone felt heard.
Curious to dive deeper into how I transformed project chaos into design harmony? Let's Chat! 💭✨
Lumos
HabitHero
.png)