Bad UI in the Wild

Re-imagining poor UI in the wild, one pixel at a time.

Problem: today's date and the selected date colors are far too similar. (The Delta E is a mere 3.82!)

Updates:

Colors were too similar (and different than the brand color, a third orange)
Removed unnecessary right dotted border
Simplified selected date (white text was displaying on top of grey in the original)
Fixed spacing & sizing issues in the legend

Before

After

After (today is selected)

Problem: a cute typeface and readability may ever be at odds.

Before

Updates:

Created a column format, much easier to scan/read versus the centered lines of text
Gave the font room to breathe, allowing better readability
Clarified pricing information
Created a framework that will work for the rest of the establishment's menu

After

Updates:

Created a column format, much easier to scan/read versus the centered lines of text
Gave the font room to breathe, allowing better readability
Clarified pricing information
Created a framework that will work for the rest of the establishment's menu

Problem: users miss messages sent via Facebook Messenger due to five different inboxes via four navigational paths within the app.

Before

Updates:

After

Problem: the cart details are missing and there is cumbersome navigation to check out.

Before

Updates:

Added the product name and description
Removed yellow-on-white elements for better accessibility
Allowed users to edit quantity and enter a discount code without having to make an additional tap
Added a clear call-to-action to move the user along in the checkout process

After

Problem: the notification in a popular messaging app was not accounted for when there is an indicator of new activity.

Updates:

The Lesson:

Think carefully about all states when designing! (Empty, small count, large counts, multi, etc.

Before, without new activity

Before, with new activity

After