I redesigned the CoveredCa.com mobile homepage for ease-of-use and accessibility
1. My Story: The impact of good web development & UX
I have been on Medi-Cal for as long as I can remember. Searching online for a number to call to change something about my case, calling right when they open at 8am, being told I call the wrong number, call the new number, get put on hold for 30+ mins, (repeat if it was still the wrong number). I thought, this is just how it is.
Having trouble paying for healthy food in college, someone suggested that I apply for Calfresh (food stamps). I cringed at the thought. Do I really want to go through the hassle? I'm busy enough with school. Do I even qualify? Do I really need it?
I looked online and I found GetCalfresh.org. Oh, I can apply online? "The entire application should take about 10 minutes to complete." I can do that! The prompts took me through the application, one step at a time. In 10-15 mins, I was done and I received email confirmation of my application. Within a few weeks I had my food stamps.
This is the power of good web development
2. Why
Immediately I thought, "Why isn't it this easy with Medi-Cal?". After trying to become a high school math teacher and switching careers to web development, I returned to this question and went one step farther. I asked myself, "Could I do for Medi-Cal what GetCalfresh.org did for food stamps?".
I learned that affordable healthcare programs are much more complex than food stamps. But there had to be something I could do.
The Technologists for Public Good organization had launched their mentorship program at the beginning of this year. I applied, got in, and was matched with Luigi Ray-Montañez, one of the people behind the development of the GetCalfresh.org website! He agreed that I might be biting off more than I could chew but that I could start by cloning the CoveredCa homepage and making changes along the way.
While I was working on it, questions started to pop into my mind: "Why is this form even here?", "Why is this page so long?", "What's the point of this section?". The more I questioned the design of the page, the less I was motivated to code.
3. The Process
I finally said, "To hell with the code, I'm gonna redesign it. I'm no good at Figma so I'll just draw it out and see what I come up with".
The Issues
I started by going through the page section by sections, collecting my thoughts what I did and didn't like.
Here's what I ended up with:
- Language Options
- Language Options hard to find
- Replace Form with Link to Form
- Is Your Medical Coverage ending
- bold “Is your medical coverage ending” instead of “set your plain in motion”
- Our Coverage Options
- No Aria Labels?
- How Can We Help You?
- Title/Elements non-semantic
- Could ul instead of div?
- “Click below for Answers to” or “FAQ”?
- How to Get Covered
- Too much space
- left align, minify icons/change icons, less space between
- Health Plans for Small Business
- redundant?
- Dates and Deadlines
- Today’s Events has permanent “events”
- Ready to care for your health
- -redundant?
- Chat not tab-selectable on desktop
After this, I noticed I still was having trouble coming up with a design that would address it all and be good. So I decided to identify the main functions of this website.
"What do I need to be able to do on CoveredCa.com?"
I went section by section again and whenever I saw a section that addressed something new, I added it to the list. Here's what I got:
A: Explore Plans
B: Apply/Check eligibility
C: Assess if coverage ending/renew coverage
D: Change my Plan
E: Report Changes
With this, I had a new target. Address these 5 functions in as few sections as necessary. But how do I do that? I'm no designer, so I looked to GetCalfresh.org for inspiration.
The Product
Luckily, I could rip most of the sections straight from CoveredCa or GetCalfresh and make minor adjustments to some of them. I showed the sketches and notes to my mentor, Luigi, and he liked them and encouraged me to Figma it out so people can compare side by side the effects of my changes.
4. The Result
Check out the full design here
I won't go over all the changes but I'll boil it down to a few types:
- Redundant Sections: I removed sections, such as "How to Get Covered", "Health Plans for Small Businesses", "Ready to Care for your Health", that had information that was already contained in other sections.
- Merged Sections: Some sections were highly related to each other so it made sense to combine parts of them to make one concise section. See "Dates and Deadlines" and "Never miss a deadline", "Our Coverage Options" and "How Can We Help You? > Transition to Another Program".
- Additions: The function to "Report A Change" was addressed in a hard to find link and it lead to a wall of text that is difficult to digest. So I made it its own section with a video. I also added the Translate and Chat buttons from the GetCalfresh website, which were issues on CoveredCa.com.
The Results
The new design occupies 50% less space (or less if I did something about the footer), the new design has 5 sections compared to the 9 in the original, has improved accessibility features (translation and chat), and communicates all the same information.
Reflection
I started this journey as web developer and I knew I wanted to learn about UX as well. But I never knew I could do both and how closely related they were in the process of creating a new website. This is like taking glimpse at my future as a human-centered web developer.
My next steps are to investigate the performance issues with the mobile site (run a Lighthouse report on CoveredCa.com if you're interested).
Note to anyone from CoveredCA or Medi-Cal if you're reading this:
I do NOT hate you! I think y'all are AWESOME for even having a website and it's clear that y'all have poured a LOT of work into it! As you can see, these are just minor suggestions from newbie that wanted to do a personal project related to their interests. Maybe one day I'll get to work for y'all!
Much love if you made it this far! Thanks for reading :)
Top comments (0)