Skip to main content

Nobody asked for this, but I just signed up for insurance with State Farm and I already have some strong thoughts and feelings about their app design.

This is an impromptu design critique because I cannot turn this part of my brain off. This is a curse.

The State Farm app on an iPhone
This entry was edited (6 months ago)

Shiri Bailem reshared this.

in reply to sam henri gold

sam henri gold
sam henri gold
• •
This is the first mostly negative design critique, so I'm gonna lay out a ground rule: I won't dock points for what could be considered an artistic choice. For example…
No: "These aren't SF Symbols so this is wrong"
Fair game: "This form field transition is dog shit"
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Just so we're all on the same page, here's what onboarding looks like in real time:
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Just for fun, I listed out every single view transition that happens during onboarding, including every fake-out the app does. This is the UI version of telling a story to your friend but going on constant tangents and finishing the story 20 onboarding steps later.
1. State Farm full logo splash screen 2. Fades into the Login form for 300ms 3. A modal sheet is presented to play a State Farm logo animation. 4. Fade to black. Wait 100ms. 5. Cut to the EULA, header slides up for no reason. Tap accept. 6. Slide to next step: Please accept analytics. Tap decline. 7. Slide to next step: Please share location. Since the app censors the UI when the app resigns active, cut abruptly to a blank logo screen. Decline location access in the system alert. 8. Cut to the Login form. Tap password manager autocomplete. App resigns active for Face ID check, UI flashes out. App returns active, UI returns. 9. Form fades out, spinner fades in. 10. A sheet containing a spinner is presented. 11. OTP verification screen fades in. Tap SMS. Form fades out. 12. Form fades back in briefly during the segue transition to the next screen. 13. On the code entry screen. There are four buttons on this screen: Back, Next, Next, and Done. Tap code autofill. Form fades out, spinner fades in. 14. Form fades back in while the sheet is dismissed. Behind the sheet is another spinner. 15. Login form fades back in for ~250ms. 16. The main app slides in with a spinner in the middle. This is visible for half a second. 17. A new screen slides in prompting for Face ID or PIN login. Enable Face ID. The prompts fade out, a spinner fades in. 18. The prompts fade back in, a toast is presented: "Face ID is enabled". Tap Done. 19. Sheet slides out. Done.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Since this is someone's first impression of your app, it's SO important to show a clear navigational hierarchy. Where views come from, what happens when they get dismissed, etc. When sheets slide in and out and content flashes for half a second, that mental model quickly rots.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Let's talk about the first onboarding, since this is the most widely applicable. It has you accept EULA, analytics, & grant location. It lists what location gets used for, but none are immediately useful. This should not be here — ask for permission when the user wants a feature.
Three screenshots. From left to right: 1. Accept the EULA 2. Better service for you. Improve your mobile app experience by allowing us to share your device analytics with Google. 3. Enable location to use all features.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Frankly, this entire step can be cut. Merge the EULA acceptance into some other action ("by continuing, you agree to blah blah blah") and just choose a default for analyics. Stick the toggle in settings.
Proposed design: Just the log in form, but under the Log in button, there’s legal footer: "By continuing, you blah blah blah who cares just tap continue. This is legally binding."
in reply to sam henri gold

sam henri gold
sam henri gold
• •
I'm fine with the core login flow, it just needs WAY fewer transitions. It seems like the cross fade is the common denominator when the experience chokes up. Cut fade transitions altogether and less intrusive ways to show progress. Maybe show spinners in buttons, instead.
Side-by-side comparison. The current design while validating a one-time password is a blank screen with a centered spinner. The proposed design is the standard OTP input screen, but the Next button has been replaced with an inert spinner.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Security has been a huge painpoint for the NUX (new user experience) here. It often is, but there are so many possibilities to make this suck a little less. Here are all of the security settings:
Security settings. Options, from top to bottom: Change user ID. Link. Change password. Link. Easy login options (Log in using Touch ID, Face ID, or a PIN for supported devices.). Link. 2-step identity verification. Add an extra layer of security to help prevent unauthorized use of your account. Toggle. Show user ID (Prefill my user ID at login). Toggle. Delete login credentials. Button.
Easy login options. Face ID. Toggle. Active. PIN. Toggle. Inactive. Login information, such as your fingerprint, face, or PIN are stored on your device and cannot be accessed by State Farm®.
The “Learn More” link from the top level security settings. What is 2-step identity verification? It's an extra security step that helps make sure it's really you trying to log in to your account. When you log in, we'll verify your identity to help keep your account secure. How it works: 1. Log in. 2. We'll text or email you a one-time password. 3. Enter that one-time password when we ask for it. Top nav bar button: “Done” Bottom button: “Got it”
in reply to sam henri gold

sam henri gold
sam henri gold
• •
A lot of banks and similar entities have security setups like this. And that sucks big time. Because we know that SMS and email one-time passwords are not super secure, the onus is on the user to:
1. Have a random unique password, and
2. Not get SIM swapped or email breached
in reply to sam henri gold

sam henri gold
sam henri gold
• •
The lowest of low-hanging fruit is to allow time-based one-time passwords (TOTP) to let something like 1Password handle that for you. But ideally, they would forgoe this entirely and support passkeys. So with the changes so far, this is what onboarding could look like:
## Proposed App Onboarding 1. State Farm logo splash screen 2. Present login form with a single text field for email. 3. System prompt: Log in with passkey? User confirms and authenticates with biometrics. 4. Done.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Speaking of nonsense banking apps do, this drives me up the wall: After a cold start, it throws up the login screen and starts a biometric auth session. Entirely unnecessary. Determine sensitive parts of the app and require auth to unlock them for the rest of the session.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
And whenever `applicationWillResignActive` is called, the app will flicker out whatever screen you're looking at and replace it with a blank logo. Again, this kinda makes sense for sensitive screens. But beyond that, **it's just security theater**. This looks fucking awful:
This entry was edited (6 months ago)
in reply to sam henri gold

sam henri gold
sam henri gold
• •

Moving onto the more skin-deep stuff. The app uses tab navigation:
-Overview
-Insurance
-Claims
-Finances
-More

The selection state for a tab is just shifting from gray to red. If you grayscale the screen, it's the same shade. I'd give the selected tab a filled icon variant

The tab bar. The selected tab has a red tint, all other tabs are a mid-gray. They’re all custom icons and their weights vary from icon to icon.
in reply to sam henri gold

sam henri gold
sam henri gold
• •

In the Overview tab, the header said "Good evening" at 4:30 PM. Whatever. I digress. I get three sections in this tab:
- Upcoming bills (useful)
- Hints & tips (useless)
- Offers & discounts (ads)

Get rid of this tab, move upcoming bills into Insurance, and make it the default.

The Overview tab. "Upcoming bills" contains a card: “No insurance bills due right now.” Actions: "View history” or “Missing a bill?” "Hints & tips” contains a card carousel. The visible card says “New features. Take a look at what’s in the State Farm app.” Action: “View” “Offers and discounts” is another card section, but it’s cut off from the screenshot.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Also, one of the "Hints & tips" was advertising new features in the app. When you tap the card, it yanks up a sheet with a card advertising a new feature. Why...why isn't this just the top level card. Why was this sheet necessary.
A sheet, titled “New feature”. It contains a single inset card advertising the ability to schedule roadside assistance.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
I'm still waiting for my policy to kick in, so this card says pending. I'm baffled by this card. The status dot should be significantly larger. Also, there is no reason for the policy category to be in a chip. Put it loose in the card, no container. Just raw dog it.
The Insurance tab. The top section, “Policies”, contains a single card. In a chip with an icon: “Home & Property”. The word “pending” is in bright orange with the most minuscule status indicator dot you’ve ever seen. The policy ID has been redacted. Actions: “Start a quote”
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Right under that policy card, there's a prompt to visit the document center. This could probably use some better copy (why would I want to visit that? it sounds boring. what's in it for me) but the real thing I want to point out is error handling.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
If you're going to advertise something at the second-to-top level of your app, you better make sure it fails gracefully. I've done nothing weird to screw with the app AND YET it throws this ugly technical error at me. I'm guessing because I have no documents. Make an empty state.
A sheet titled "Document Center”. A toast banner is overlaid: "The operation couldn't be completed. (GCDASLInsurancelnterface.InsurancelnterfaceError error 0.)” Actions: “Retry”, “Dismiss”
in reply to sam henri gold

sam henri gold
sam henri gold
• •
In fairness, there is an empty state when you dismiss that error and proceed anyway. I've slowed down the video to ¼ speed so you can see this animation: to make room for the segmented control, everything BUT the description slides down. But the description is the same copy 🤷‍♂️
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Here's just a standard empty state. The description text is leading aligned, but the image and button are both centered. Easy fix: center the stack, center align the description text, reduce the prominence of the CTA.
a side-by-side comparison of the current vs a proposed empty state. the current has an illustration centered, leading aligned text, and a prominent full-width block button. The proposed design: - centers everything, - reduces the copy down from "Looks like you don't have any financial accounts right now.” to “No financial accounts”, and - reduces the prominence of the button to be red on a faint red color.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
If you've used SwiftUI, you'll be familiar semantic toolbar item placements. destructiveAction, navigation, etc. These exist because we've been conditioned to expect certain button types in certain positions. So imagine my surprise when I saw Log out in the confirmation position
Settings sheet. In the nav bar, from left to right: “Close”, “Log out” List options: Security settings Login settings Communication settings Document Center (Billing, payment and policy docs) Contact us Help topics About the app
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Make log out a destructive bottom, position it to the bottom of the list, rename "Close" to "Done" and put it in the confirmation position. Boom, fixed your nav bar.
The same settings screen but with the updated nav bar and Log out as the final list option.
in reply to sam henri gold

sam henri gold
sam henri gold
• •
There are a few screens where navigation titles compete with some arbitrary heading in the view. Avoid having two headers of the same visual prominence right next to each other.
Navigation title: “Programs and services” Same heading level: “We’ve got you covered” and the rest is just blah blah text
in reply to sam henri gold

sam henri gold
sam henri gold
• •
Okay. I've done enough free work for State Farm Insurance Inc. The point of this being: these are all papercuts. Nothing fundemental. Just little things that worsen the experience. Take some time to audit your project for these things. I promise you'll be better off because of it
in reply to sam henri gold

sam henri gold
sam henri gold
• •

btw, Lickability (where I normally write these threads) did not endorse this or anything, this is literally just me kvetching about an app that has been forced into my life.

more design threads are planned for @lickability as well as here!

@Lickability
in reply to sam henri gold

Timo Hetzel
Timo Hetzel
• •
I just signed up for the umpteenth EV charging plan. App asked me three times for phone number and address, sabotaging autofill of course. Anything car related seems to be bottom of the barrel.
in reply to sam henri gold

Paul McAleer
Paul McAleer
• •
I appreciate seeing a nice critique. This all, to me, felt like a classic "we have 5 teams working on this app but no single person driving the overall UX or CX but we delivered software" situation. What happens when no one looks at the whole thing? Mostly this.
in reply to sam henri gold

Григорий Клюшников
Григорий Клюшников
• •
sam henri gold, you haven't seen real security theater in bank apps if you haven't used the Emirates NBD app.
in reply to Григорий Клюшников

sam henri gold
sam henri gold
• •
@grishka I secure all of my software by checking if the file path for Cydia exists and, if so, not letting my user access their money.
@Григорий Клюшников
in reply to sam henri gold

sam henri gold
sam henri gold
• •
@grishka this whole blog post I found while writing this thread is absolute poison. This doesn't secure anything, this just makes tinkering (and, in all likelihood, developing workarounds for a shitty app) more of a pain in the ass. medium.com/adessoturkey/ios-ap…

iOS App Security: - adessoTurkey - Medium

Nowadays, security stands as a top-priority subject within the IT industry. Both individual users and corporations are displaying an increasing awareness of the concepts of data security and privacy…
Yağız Erbay (adessoTurkey)
@Григорий Клюшников
in reply to sam henri gold

Григорий Клюшников
Григорий Клюшников
• •
sam henri gold, my thoughts looking at the jailbreak detection section: haha method_exchangeImplementations go brr
in reply to sam henri gold

Jeff C. 🇺🇦
Jeff C. 🇺🇦
• •

Along the same lines are those banking/brokerage apps that cue up a “You’ve been logged out” push/local notification if you don’t explicitly log out yourself.

If I’m automatically logged out… that’s good! I don’t need to be told about it.

in reply to Jeff C. 🇺🇦

sam henri gold
sam henri gold
• •

@jeff In Fidelity’s app years ago, if you return back from the app switcher after any amount of time, it would sign you out and you would get a non-dismissable alert “You have been signed out. Please log back in."

and you just couldn't dismiss it. you had to force quit the app.

@Jeff C. 🇺🇦
in reply to sam henri gold

Stu
Stu
• •
that was really interesting, although I shudder at the thought of installing an insurance app.
in reply to sam henri gold

Eddie Koranek
Eddie Koranek
• •
great write up! I used to work on this app 🫣🤭 definitely a fun surprise to see it in my feed this morning.
in reply to sam henri gold

Mathias af Jochnick
Mathias af Jochnick
• •
Great stuff! one small thing: i think (at least in Europe) that you’re required to pop up a terms&conditions screen.
in reply to Mathias af Jochnick

sam henri gold
sam henri gold
• •
@2happy1sad it depends on the implementation! I’m not sure about enforceability of browse wrap (vs click wrap) agreements in the EU/under GDPR. In US case law, this example from Uber was enough for the court to enforce the agreement.
Uber sign up form. Under the big green “Sign up” button, a label with hyperlinks: “By clicking ‘Sign up’, you agree to Uber’s Terms of Service and Privacy Policy.”
@Mathias af Jochnick
in reply to Mathias af Jochnick

sam henri gold
sam henri gold
• •

@2happy1sad I figured this was interesting enough to poll opinions on separately. Link if you wanna follow along on the discussion: hachyderm.io/@samhenrigold/112…

sam henri gold

2024-05-29 12:10:27


Got some questions about a critique I gave on this app last night about the EULA acceptance screen, so I figured I'd break this out. Do you have any opinions on these methods for mandatory legal agreements before using a product/service? I made a quick mockup representing their current design and the type of design I argued for.

Curious to hear from law people and non-law people about this.
hachyderm.io/@samhenrigold/112…

A click wrap terms of service acceptance. You reach the terms of service screen, which is a long text block that scrolls. There is a single button at the bottom, “I Agree”. Tapping proceeds to the sign up form.
A browse wrap acceptance on the sign up form. Right above the “Continue” button, a notice reads “By continuing, you agree to our Terms of Service and Privacy Policy.” The notice passes contrast guidelines, it has reasonably large text, and the terms and privacy policy are hyperlinks.

@Mathias af Jochnick
⇧