Creating a responsive site

A user-friendly and visually appealing responsive website that effectively showcases ANZ Billingā€™s services.

ANZ Billing is a small medical billing company that is dedicated to serving practices and their patients in all matters related to medical billing and revenue management.

Medical providers who donā€™t understand the complexities of medical billing often have trouble navigating constantly changing medical billing systems and processes, and are in need of a reliable partner that they can trust to guide them.

The proposed solution is to create a user-centric website for ANZ Billing.

This site must (1) effectively communicate their personalized medical billing services, (2) foster trust through client testimonials, and (3) incorporate intuitive navigation and engaging visuals to enhance the user experience and drive business growth.

Role

Lead UX / UI Designer

Client

ANZ Billing, Inc., 2024

Tools

Figma, Procreate, Adobe, Maze, Optimal workshop

Getting started

Medical billing is a rapidly growing industry and is showing no signs of slowing down... how do I make ANZ Billing stand out?

To begin to answer this question, I focused my research around 4 key goals:

I kicked-off this project by doing some white paper research and user interviews. I was given a 3 month timeline to carry out research, builds insights, design, and deliver.

1 Assess how medical practices currently choose a medical billing company.
2 Determine what medical practices value in their medical billing services.
3 Identify challenges and pain points that medical practices experience in the medical billing process.
4 Identify how ANZ Billing meets the needs of medical billing providers

White paper research

If the person handling the medical billing is more concerned with data and revenue than providing good service, a bad experience with them can make the patient see the entire medical visit in a negative light.

Generally, medical practitioners primarily focus on providing service and care to their patients, often considering healthcare from the start to the end of a visit. However, patients experience a more complex journey, extending beyond the visit itself. Once at home and faced with the bill, they navigate the intricacies of payment, involving interactions with insurance and billing companies. While doctors see healthcare and billing as separate, patients perceive them as interconnected components of a single experience.

User Interviews

All participantsā€™ highest priority was seeing an increase in revenue, often emphasizing trust and consistency.

I conducted interviews with five physicians who have previous experience with medical billing companies. These interviews aimed to provide a comprehensive understanding of the key information and features that physicians prioritize when visiting a medical billing website. I organized my data into the affinity map below:

Scoping out the competition

The opportunity gap in ANZ Billing lies in their lack of web presence and marketing.

Despite offering competitive services, ANZ Billing has faced challenges due to the absence of a functional website. My aim is to prioritize and address the needs and preferences of potential clients during the design process of ANZ Billing's website.

Market research revealed that ANZ Billing possesses a unique competitive advantage in its ability to provide a higher degree of personalized services that can increase revenue for medical practices.

Getting to know our users

Affinity map

Frustrations

Errors and inaccuracies

Lack of expertise

Inefficient processes

Poor customer service

Heading into the data synthesis part of the project, I developed an affinity map to work as a visual aide for my data journey.

I sorted through user feedback and research insights, using the map as a roadmap to spot patterns and key themes. This streamlined decision-making, anchoring subsequent design choices in user insights and business needs.

Key themes and insights

Goals

Increased claims rate

Average days in accounts receivable (AR)

First-pass payment rate

Patient satisfaction / retention

User persona

In humanizing my design process, the user persona became my guiding character, embodying the key traits and needs distilled from research, ensuring every design decision resonated with the target audience.

Overall, data analysis revealed themes in patient satisfaction, trust, transparency and communication.

In order to showcase and emphasize how the high level of personalization ANZ Billing offers can increase revenue for doctors, this site should:

Doctoring ANZā€™s services

Site mapping was a key part of figuring out how to emphasize ANZ Billings strengths. Laying out the pages helped visualize the whole website, showing how the pages are organized, connected, and how users will navigate through it.

Since the services offered was a high priority to my participants, I knew the site would be information and text dense. I made sure to include summaries of the services offered on the landing page, with quick links to the service page. ā€Øā€Ø

It also made sense to link every testimonial card to "Success Stories" under the resources tab since it directly relates to providing the user with additional context. This approach ensured that users could easily access and explore firsthand experiences from satisfied clients, enhancing their understanding of ANZ Billing's capabilities and personalized approach.

I crafted and tested three user-friendly task flows, collaborating closely with my client to align her business priorities with the needs of our target users,

I developed three user and task flows by testing them against the sitemap I designed. Collaborating closely with my client, we aimed to strike a balance between her business goalsā€”specifically highlighting careers and job opportunitiesā€”and the needs of the target users. We even incorporated an employment task flow, reflecting my client's unique priorities. The goal was to ensure a user-friendly experience that aligns with both business objectives and user expectations.

Pencil to Pixel Design Journey

Iterative problem solving

Designing around content

During my design journey, I found low fidelity wireframing to be an invaluable tool. However, I encountered some challenges when it came to determining possible layouts for substantial amounts of text without an existing website to refer to for such information. To overcome this obstacle, I engaged in a collaborative process with my client, seeking their approval for proposed copywriting. This collaborative approach allowed me to obtain a clear visual sense of how to effectively lay out text-heavy pages on the website.

Testimonial card

Given the client's strong emphasis on client testimonials, I wanted to ensure that testimonials were prominently displayed on every page, allowing users to access multiple testimonials.

Initially, I designed a testimonial card featuring a profile picture, name, title, and quote, but the hierarchy overly emphasized the name and title. To fix this, I adjusted the layout to highlight the quotes and added a carousel with ellipses and arrows for navigation. After iterating, I removed the redundant arrow, keeping the ellipses for consistency with mobile design standards. I also centered the information for intuitive horizontal scrolling. Finally, I added a micro-interaction to expand the card for full text and an option to access the complete story.

Icons and animation

During the design process, I initially planned to utilize icons and animation extensively to:

  • Improve visual communication

  • Enhance scannability, and

  • Create a cohesive brand identity

At first, I chose simple single-line icons, but I soon realized that their simplicity led to more confusion rather than clarity for users. To address this issue, I decided to incorporate more detailed and animated icons throughout the design where possible.

This shift in approach allowed for a better balance between visual appeal and effective communication, while enhancing the sites brand identity.

At this point, developing a style tile was a key part in solidifying the sites branding. I incorporated blue into my branding to align with the prevalent use of this color in the medical industry, ensuring that my brand resonates with the established visual language of trust and professionalism in healthcare.

Time for a design check up

I tested three task flows with 10 users, including 5 moderated sessions, with the goals being to assess user proficiency, identify issues, refine task flows, and ultimately develop targeted solutions.

To do this, I measured accessibility, readability, and both qualitative (body language, error correction) and quantitative factors (completion rate, time, misclick/error rate, satisfaction scores).

Through usability testing, I noticed that users were frequently getting lost on the site due to a lack of clearly defined pathways indicated by buttons. Additionally, I noted that even when buttons were clear, the choice of verbiage significantly impacted user experience. For instance, the "Get Started" button prompted observable hesitation among participants, where a simple "Contact" button might not.

Polishing it all up

After digging into user feedback and testing results, it was time to tweak things. Even though it's a mobile-first project, I thought I'd show off the key changes on desktop since that's where our audience is most likely to engage.

Commitment issues: Contacting ANZ

Some users were hesitant to click ā€œGet Startedā€ to contact the company, as it felt like too much of a commitment to something. To address this, I added a contact link under the About tab using a drop down in the main navigation bar. It includes ā€œMissionā€, ā€œCareersā€, and ā€œContactā€

Hotline Bling: ANZ's Direct Line for Quick Connection

Some users also noted that the website lacks a more direct way to get in contact with the company, so additional contact information was added for a more direct line of communication.

Career Quest: Navigating Opportunities at ANZ

Users also expected a more direct way to access the Careers page. Before, it was tucked into the siteā€™s ā€œAboutā€ page. Although it is still accessible from there, it can now also be found via a dropdown from the navigation bar under the ā€œAboutā€ tab.

Check out the prototype

The final frames

Desktop wireframes

Reflection

Iā€™m pretty psyched to complete my very first UX project where I got to work collaboratively with a client (yay šŸŽ‰)! Although I hit some learning curves, I can overall say that this experience helped me hone in my skills as a designer.

Navigating the design of mid-fidelity prototypes for text-heavy pages presented a challenge. Instead of committing to layouts that might need extensive revisions, I opted for a collaborative process with the client. Together, we defined essential content for each page, drawing inspiration from their needs and successful industry designs. This approach clarified content, enabling the exploration of layouts that accommodated text without sacrificing visual appeal or user experience. It underscores the power of collaboration in overcoming design challenges for a final product aligned with both client expectations and user needs.

Working on this project with the client was a real eye-opener. It wasn't just about making things look good; it was about finding that sweet spot between what the client wanted and what users needed and creating an experience that felt right. It taught me the power of teamwork in turning ideas into something tangible.

Looking back, it's clear how working together made the project a blend of style and function. It's a reminder that effective collaboration can turn the ordinary into something extraordinary.

Check out OpenSea

Check out OpenSea

Adding social engagement features to OpenSea to help collectors find the communities and collections that resonate with them

Previous
Previous

Wave