Project Overview
Click Chiropractic is a newly established clinic committed to helping patients of all ages alleviate pain and regain their well-being. Our team was tasked with designing a Patient Portal to help patients easily access scheduling, health records, educational resources, and other essential features.
Project Type: Client Project (part of educational program)
My role: Lead UX Designer in team of 5
Timeline: August 2023
The Challenge
Without a patient portal, Click Chiropractic patients couldn’t securely manage their health information online. This created major barriers for those wanting to view test results, request appointments, communicate with staff, and more. The clinic needed a solution that would offer seamless, transparent access to their patients’ information and care.
The Solution
Our UX team designed and implemented an intuitive, user-friendly patient portal that empowers patients to take an active role in their care. Key features include:
Streamlined appointment scheduling
Secure messaging with clinic staff
Easy access to health records and documents
Paperless intake forms and consents
With convenient self-service tools and on-demand access to their healthcare data, patients can now connect with Click Chiropractic whenever they need care. The new portal fosters stronger patient-provider relationships and delivers the transparent, engaging experience that today’s healthcare consumers expect.
Discover
Kick-off Call
As team lead, I organized a kick-off call to align on project scope, review the brief, and clarify deliverables. We also examined existing assets and developed key questions for the client to ensure a strong foundation.
To promote efficiency, the team adopted a collaborative approach, with each member taking ownership of a specific user flow. This allowed us to work independently across time zones while maintaining constant communication through Slack and Zoom. Daily syncs kept our efforts unified, ensuring timely and consistent deliverables.
Client's existing website design
Client Insights
Through targeted questions, we gathered key context from the client:
Demographics: The user base spans various age groups, with common experiences related to pain, rehabilitation, and aging challenges.
Design Preferences: The client prefers a clean, minimalist design that emphasizes simplicity and aligns with their style guide. We will build on this foundation while introducing new components for additional features.
Core Actions: Users need to view and complete forms, schedule appointments, and communicate with the clinic.
Secondary Research
To further understand user needs and pain points, I conducted secondary research on patient portals. Key findings included:
Patient Priorities: Healthcare consumers value convenience and accessibility, particularly online appointment scheduling and intuitive navigation.
Best Practices: Effective healthcare websites prioritize clear language, intuitive navigation, and accessibility.
Competitive Landscape: Research on competitors revealed an opportunity to differentiate Click Chiropractic by offering a more personalized and tailored patient experience.
Ideate
User Stories
The client provided our team with five user stories that encapsulated the target users' key needs and goals:
As a user, I want to access the New Patient Portal
As a user, I want to access new patient forms
As a user, I want to submit inquiries to the clinic or provider
As a user, I want to book appointments
As a user, I want to see past and upcoming visits
User Flows
Creating user flows allowed us to visualize the user journey and identify all the screens that needed to be designed. We regularly reviewed and refined these flows to ensure team alignment. In addition to the home tab, I led the second user flow, which involved designing the patient forms section of the portal.
Inspiration
To inspire our patient portal redesign, we began by independently reviewing existing patient portals to gain insights into current designs, features, strengths, and weaknesses.
In a collaborative session, we shared our findings and perspectives. Key themes emerged around enhancing the patient experience through greater personalization and interactivity while maintaining simplicity and clarity.
We envisioned incorporating dynamic widgets like calendars, graphs, and task lists that would allow patients to better track health activities and progress. However, we knew these tools should integrate seamlessly without overwhelming users. Through the process, we remained grounded in the portal’s fundamental purpose - providing an accessible, intuitive interface for patients to easily manage their health.
Low-fi Wireframes
Our low-fidelity wireframes focused on structuring the core content and functionalities for key screens, without getting distracted by aesthetics. Using a skeletal wireframing approach allowed us to think through and rapidly iterate on the information architecture and user flows.
We outlined critical elements like navigation, main content areas, calls-to-action, and key features. This established a solid structural foundation rooted in user needs and priorities. The low-fidelity nature invited feedback and discussion early on, enabling us to collaboratively evolve the wireframes.
Mid-fidelity Wireframes
The mid-fi wireframes enabled stakeholders to visualize the evolving design and helped facilitate productive discussions, ensuring the team was aligned on the design direction we were pursuing. As the lead designer for the Home and Documents sections, I focused on:
Refining the visual elements: I refined the typography, whitespace, and positioning of elements to improve scanability and draw attention to key content and flows.
Incorporating branding: I began adding some branding elements, such as colors, fonts, and logos to immerse the team in the look and feel.
Mapping out user flows: I mapped out the user flows more comprehensively to understand how users would navigate the different screens and features.
Design
Mid-Fi Wireframes
To offer our client a variety of design choices and meet their specific preferences, our team created multiple high-fidelity UI iterations of the home screen. These iterations featured polished visuals, pixel-perfect details, and a refined user interface.
I designed the two iterations seen below. Initially, I favored a single dashboard view to avoid hiding information below the fold. However, through exploration I realized over-condensing content could feel overwhelming.
In the second iteration, I embraced flexibility and moved beyond self-imposed one-page constraints. This enabled a more spacious, intuitive layout with improved visual hierarchy
Our client opted to move forward with Iteration 3 for the home screen, responding positively to the balanced layout. As some visual design refinements were still needed, I spent time polishing the UI with the following enhancements:
Modernized the pain progress graph to make it more visually appealing
Optimized spacing and alignment, to improve the overall readability of the page
Reduced drop shadow to make it more subtle and less distracting
Revamped the "Upcoming appointment" section to enhance visual balance
Ensured consistent application of auto layout
Our team agreed on the value of these changes in improving the overall design quality, and we implemented them going forward.
High-Fidelity UI's
With the home screen finalized, we divided the remaining pages between team members to craft complementary high-fidelity UI. As the lead designer for the Documents tab, I focused on creating polished designs for viewing and signing documents.
Throughout this phase, constant communication and collaboration was crucial to align on a unified aesthetic. We intentionally fostered a synergistic workflow, checking in frequently to ensure stylistic coherence regarding fonts, colors, icons, and components. I also provided design support on teammate's screens as needed.
This collective and iterative approach let us rapidly advance the fidelity while maintaining visual consistency. Our team's cohesiveness and willingness to assist each other strengthened the outcome, resulting in a family of polished, on-brand screens ready for development.
Developer Handoff
To enable a smooth development process, we provided developers with a comprehensive handoff package. My focus was preparing detailed documentation for the Documents pages and Home screen. For each page, I provided:
Annotated designs specifying all elements, assets, and interactions
Precise measurements, spacing, fonts, colors, and styles
Access to Figma files for inspecting and extracting assets
With these comprehensive materials, I aimed to anticipate developer needs and set them up for success. My goal was to facilitate a seamless transition from design to production, empowering the engineers to bring the product vision to life with clarity and efficiency.
Reflection
Designing a healthcare product and dashboard for the first time has been a valuable learning experience, immersing me in the complex world of healthcare product design and teaching me the importance of balancing data presentation with user experience.
One of the biggest challenges of this project was making informed decisions with ambiguous objectives and limited information. I learned to trust my intuition and rely on my team's collective wisdom, emphasizing the importance of collaboration and teamwork in overcoming challenges.
Taking on the role of team lead improved my leadership skills. Being in charge of delegating responsibilities, setting clear objectives, and motivating the team was an enriching experience that deepened and diversified my leadership capabilities.
I am genuinely grateful for the opportunity to have worked on this project, and I eagerly anticipate further growth and learning as I continue to evolve as a UX designer.