Learning UI Design
UI + UX
The Daily UI delivers a new challenge to my inbox every morning. Here, I’m focused on using each challenge to redesign existing government and non-profit websites to explore UI design.
01 / Sign-in
Kicking off the Daily UI challenge with a redesign of the Motor Vehicle Administration’s sign in page for vehicle registration renewal.
– Moved important copy into a list and made it more prominent off to the side
– Kept the MVA logo and the blue in the existing logo
02 / Credit Card Form
If only paying a parking fine was this easy – the PG county payment services portal online was long for absolutely no reason at all, so I took a stab at a redesign.
Some things to note:
– clearly re-iterating the fine amount is important
– having details of the infraction is helpful so you know what you’re paying for
– alternate payment methods are accessible in case you decide not to pay by credit card
– and the standard stuff like hover and selected states for fields is always better for usability
03 / Landing Page
A redesign (or refresh, really) of the www.disability.gov website. The existing information is organized fairly well.
Full titles of articles are linked and grouped by category so screen readers can pick it up easily. I tried to make everything pretty high contrast here and stuck to a traditional column layout. I also made the search bar more prominent with relevant helper text.
I’m really trying to learn more about 508 compliance and applying it to my work.
04 / Calculator
Redesigning the SSA’s Quick Calculator
It looks like some pages of the current Social Security Administration have been undergoing an update, so I’ve used the same menus and style. See the current page.
Changing the menu and breadcrumbs:
The current menu and breadcrumbs can be confusing to some (seen here). I’ve made the breadcrumbs a little more obvious by using a more standard style and clearly marking them as links.
The tabs are currently very subtle, so I’ve made it a little more clear that the tabs are related to the information below. This takes some weight off the menu and focuses on the content. (I’ve updated the tabs to be the types of calculators instead of various types of content. This is because on the current SSA website, once you click through to a calculator it’s not entirely clear where you are.) (I also understand this could likely use some more thought)
Content that’s better for usability
Because there are a number of calculators on the SSA website, I added a “This calculator is best for” heading, followed by some info on number of questions and how long it will take to fill out. Signposting and setting expectations are key! Finally, I made the size on everything much larger than usual. At the end of the day, the average age of citizens concerned with their Social Security benefits is likely higher than say, new signups on slack.com