I've been involved with unemployment insurance for the last month or so. It's been an incredibly humbling experience, but also a frustrating one — especially as it deals with UX or UI. A recent Medium post got me thinking about how the interface can be reskinned for the Unemployment Insurance portal for claimants. If anyone's ever used this for the Commonwealth of Massachusetts (and I'm going to go out on a limb and assume for any state), you know it's an ugly and cumbersome experience. Messages don't mean messages — they're PDFs. Or something. And there are lots of tables and gray.
Image courtesy of Jennie Rose Halperin
While structurally, everything you need is present, it's thoughtless. There isn't any care taken and the collection of pages feels dated. The menu on the left is deceiving; the arrows for the submenus (Child Support Summary, Contact Information, etc) do not expand or collapse. And yes, the site is not responsive. Why would it be?
Here's a first pass at a redesign. I'm particularly found of the initial pre-login page; I think there's solid contrast and I really like the coat of arms for the Commonwealth. I maintained the generic footer that exists on the current site, but I included an application link in the typical right-hand corner.
The messaging is also a lot more welcoming and inclusive. For me personally, this entire process has been at times demeaning and ... well, not fun. So wherever I can get some positive messaging, the better. Standard login panel for a claimant's SSN. Tempted to include a link to a glossary of sorts that's meant to be a precursor to applyng (and develop a page for that).
For the post-login page, I wanted to evoke a sense of a standard dashboard, but emphasize a claimant's main needs:
1. Claiming benefits
2. Payments
3. Messaging
The UI portal makes an effort to include a messaging/inbox feature for communications, including alert icons and the like. However, the current layout does not utilize a clear hierarchy of information. The simple menu I designed on the left brings some order to the different areas. There's also additional personalization, replacing the application link in the top-right corner. I used color to not only brighten things but call attention to claiming benefits.
I know the Inbox callout is kinda cheesy, but it seems like an unnecessary feature in some ways. I think messaging/communication can be reserved to a dedicated page/link, with a soft alert like email with a parenthetical:
This frees up some breathing room for text, making it a little more accessible and easier to parse (in my view) for assistive technologies.
I think the colors work well together, and while I'm not crazy about Arial, it's the dominant font in the current CSS for the site and it's everywhere. No one's NOT going to have Arial, I would hope. So we work with it!
