DisputeBills Design Case Study
By: Monique Silva / March 8, 2016
About 85% of medical bills contain some sort of error that results in patients having to pay more than they should—this is where DisputeBills comes in. Their team of experienced advocates will take on your case and find these errors and save you money. So over the past several weeks, we had the pleasure of getting to design (and build) a brand, logo, application, and marketing site for DisputeBills. Below is a look into some of the reasoning behind the design decisions that went into each phase.
Branding
Before starting the brand style guide, I took a step back to really think about the people that would be using this service. The typical user would be someone who had received an expensive medical bill that they can’t afford. Stress, pressure, desperation, helplessness, and being overwhelmed are just some of the feelings that would be weighing down on them. Not to mention the individual could potentially still be sick or recovering from a medical condition. So when thinking about the DisputeBills brand I wanted to evoke feelings of trust, security, experience, efficiency, and reliability.
The color palette is made up of a couple shades of blue, green, and grey. The blue gives off a sense of trust, reliability, and calmness. Whereas the green implies success and savings—two things their users are hoping for when it comes to their case.
The typeface I used was Noto Sans, which looks professional yet at the same time gives off friendly and approachable vibe. I purposefully used the font’s lighter weights in the headers to give a feeling of ease and lightness.
Logo
Logos are no easy task, they serve as a companies identity so important to make sure that its communicating the right idea. When experimenting with different forms and shapes I had that list of adjectives that describe DisputeBills out in front of me. Below are just a handful of iterations I went through:
The final mark illustrates a stack of papers to represent “bills piling up.” The cross is a common iconographic symbol used in the medical industry—here it is being used to indicate that DisputeBills handles medical bills. The bills are placed at an angle to suggest movement—so once a bill is uploaded to the DisputeBills platform, cases are handled with speed and efficiency. I wanted the logotype to evoke a sense of stability and friendliness, showing users that DisputeBills has their back. To achieve this I wanted soften the tone of “Dispute” by typesetting it in a lighter font weight (since that word tends to have a more aggressive connotation). I also chose to place more of an emphasis on “Bills” by bolding it to have it be more visually grouped/associated with the mark (which depict a pile of bills). The bolding also helps with the reading of the company name.
Application
Like with any application we design and build, our goal is to create something that is easy to use and provides a very smooth experience for all of its users. So before any wireframing can take place we needed to get a clear picture of who exactly our key users are and what actions will they need to be able to perform. So for this application, the user types are “people who want to dispute a medical bill” and “the advocates that work on solving cases.”
We started by going through several iterations of the flow for submitting a dispute. The form need to be as simple as possible to avoid user drop-off, but it also needed to provide advocates with enough information to get started on a case. So our final screen includes just a few required fields and once they submit the form they are taken to their case details page. This is where they can track the progress of their case as well as answer any questions an advocate might ask.
Another area worth pointing out is how I optimized the “My Cases” view for users and advocates. Users would typically only have just a few of active cases (anywhere from 1 to 5). This gave me some screen real estate to work with, so I was able to visually show the status with a progress circle as well as providing a short description of what is currently being worked on. The color of the circle indicates whether or not action needs to be taken with red and green respectively. The advocates on the other hand would be responsible for quite a few more cases, which is why I went with a more a tabular view of the information.
Marketing Site
The colors, typography, and other visual components used within the application formed the foundation for the marketing site. By doing so, it helped establish a level of cohesion between the two, making the flow of going from the marketing site to the application experience appear seamless.
Content is key when it comes to designing an effective marketing site—without clear messaging you may confuse users and ultimately lose potential customers. The conversational tone of the writing helps make the content quick and easy to read as well as making DisputeBills appear very approachable. So here’s the breakdown of the homepage’s architecture:
- Header: This is where that “first impression” occurs, so the content needs to be really solid and peak the interest of users so they continue scrolling to find out more.
- Statistics: Very scannable metrics on how successful their service is.
- Key features: Explains the major selling points of their service, which I accompanied with a screenshot of the application to show users just how easy-to-use the application looks.
- Blog highlights: They write a lot of educational posts about saving money on medical bills. These posts show users that they are knowledgable, credible, and experienced in this area.
- Testimonials: Getting to hear from real people on how DisputeBills was able to make such a positive impact on their financial future also helps validate the effectiveness of this service.
- Final call to action: So we’ve gotten them to scroll all the way to the bottom of the homepage and hopefully convinced them to start their first medical bill dispute. I show another screenshot of the application, this time on a mobile device to give users the feeling that if it can be done on a phone then it must be quick.
In terms of imagery, I chose photos that had a softer tone to them (meaning the colors weren’t aggressive and the people weren’t overly dramatic—I wanted to show off as close to genuine emotion as possible). A few of the photos depict people reading their bills with a look of disbelief and distress, which we can all assume is because the “amount due” is much higher than they anticipated. When a user sees these images my goal was to have them empathize with them and understand that DisputeBills can help them in this difficult time. These images are contrasted with images of smiling DisputeBills staff members as way to establish trust and confidence from the users. And of course there are a few medical related images since the service they provide is to dispute medical bills. My goal with all these images was to help users infer what the company is all about just by glancing at the images.
Final Thoughts
This project contained a lot exciting design challenges and I was able to learn a lot from each phase. It’s always exciting to get to work on projects that can have such a positive impact, so getting to hear about how much money DisputeBills is able to save their users is extremely rewarding.
Ready to Build Something Great?
Partner with us to develop technology to grow your business.