Save 37% off PRO during our Black Friday Sale! »

Product Analysis: Septa Key

6e2e0c91680fb2a336fbde73b497e955?s=47 @mozzadrella
September 20, 2016

Product Analysis: Septa Key

Walkthrough of digital farepass / debit card for the city of Philadelphia, PA



September 20, 2016


  1. Let’s give the Septa Key a whirl…

  2. Today we’re going to try to get a monthly pass!

    Let’s create an account….
  3. Holy nomenclature issues, Batman!

  4. What’s the difference between “Activate” and “Register”? What’s a “Fare

    Product”? Do I have one of those now? Huh.
  5. Some orientation on why so much info is needed here

    would be grrrreat! All this text is suuuuper tiny. I can barely read it and I’m a damn millennial. Bigify pls.
  6. Redirected to front page after account was created. Ah, so

    all passes are “Fare Products.” That’s awkward…
  7. What is the benefit of these? HALP. This mental model

    isn’t great. How many passes can I fit into one cart SO MANY!!!!!!
  8. Guess I’ll log in with the account I created..

  9. OH NOES!!! I have no idea what “Validated” means, and

    that’s a really similar term to “Activate” and “Register”… A progress bar would be great here—I’m nervous I’m doing this wrong. Friendlier copy here (e.g. “Hold on, let’s validate your account first”) would go a long way, as would helping me understand what I’m going to do next…
  10. OK, now we’re getting somewhere! Looks like I need to

    register my Key Card next… “Add Product” is awkward— and how is that different than, say, Managing Your Account? I love it when I’m the silhouette of a generic “user” and a creepy outline to boot!
  11. Not sure why the last time I visited the site

    is taking up real estate here…. And since I’ve only been here once, now it’s oddly blank… Let’s get some visual orientation up in this piece.. We still have no idea what this Key Card looks like…
  12. How about a progress bar that echoes the design of

    the Key itself…complete the steps until it’s shiny and “active”
  13. Ooookay, I have a card, let’s register it….

  14. What’s an “Instant SEPTA Key Card”? Is that what I

    have? Show me where to find this information on my card? What’s an alias and why do I need one? Heya tiny tiny words. So wee.
  15. Perhaps MOST importantly—what is this PIN for and when would

    I use it?
  16. Great! What’s next? I guess return to my account…

  17. But whoah, I have not been here before.

  18. Not only am I unsure what these menus mean… Why

    is the “Fare Product” disconnected from the card its on? What’s a “Hotlist” and how do I get on it? Do I “Add Product” to Cart? To Card?
  19. Do I “Add Product” to Cart? Or to my Card?

  20. OK I’ll “Add a Product” and see if my monthly

    pass is tucked in there somewhere…
  21. Welcome to “Passland!” And we’re in a three-columned design here

    all of a sudden too!
  22. OK what’s the difference between a Convenience Pass and a

    TransPass??? What’s an “Item”? Aren’t these all passes?
  23. Ah, OK what we want is a Transpass…who knew? Hallelujah

    I have finally found my one true Monthly Transpass!
  24. These “items” are what users are coming here to buy,

    that’s their goal. “Activate”/“register” should have been folded into the purchasing process instead of all that fare product nonsense.
  25. Great, let’s continue…

  26. Don’t need to know WTF a quote number is —taxing

    the cognitive load of the user here…
  27. They are winning the small text contest… My Dad would

    probably hand me his card and ask me to do this…
  28. PHEW! HUZZAH! LET’S RIDE A BUS! Wait, my order is

    only “submitted”? Wish I had clear, resounding confirmation.
  29. PHEW! HUZZAH! LET’S RIDE A BUS! But at least the

    “Monthly TransPass Fare Product” (geez) shows up in My Account with an option to Autoload. Small happinesses!