Bad UI in the Wild

Hand-drawn text that says 'Side Projects'

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

Save What Date?

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

A date picker with today's date and the selected date highlighted in nearly the same hue

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

A date picker that has clear distinction between today's date and the selected date

A date picker that shows today's date as the selected date

Before

After

After (today is selected)

Typeface Woes

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

A wine menu from a restaurant with challenging readability

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

A redesigned wine menu with clarity and readability

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

Missing the Target

Problem: multiple distribution options and center-justified selectors create friction in a checkout flow.

Before

Updates:

Bolded the text of the delivery option
Moved the selection button next to the delivery option

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

Tap tap tap... is this thing on?

Problem: enabling and disabling access is confusing. Is denying access on or off? What is the default?

Before

Updates:

Created three different versions of the toggle
Each option always displays Deny and Grant options, with the current state clearly distinguised
I prefer the middle option the best!

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

Missing Messages

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

Before

Updates:

Removed nested inboxes and inboxes out of the Menu
Removed sub-tab inboxes
Moved all Messenger inbox types into a main navigation bar
Added a new messages count indicator

After

A reimagined navigation for Facebook Messenger

Mysterious Order Summary

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

A Sum Does Not Always Total All Parts

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

Updates:

Shifted the new activity indicator to fit inside of the active-state button.

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