My Broken Experience with

My on-going “broken experience” with dates back to October 2012.
As many of you may have been familiar, Brooklyn landed themselves a basketball team called the New Jersey Nets. Having grown up in Connecticut, I never had a local NBA team to Cheer for. but now having been in Brooklyn for 5 years, this was my chance to have a home team 5 min. down the street.
As the season approached and the hype grew, everyone in Brooklyn had anticipated the day tickets would go on sale. And if you didn’t know, is the official online retailer for the Brooklyn Nets. This is the only place to buy tickets at actual retail price.
If any of you are familiar with buying event tickets, you are probably aware of how the user experience goes. And as in life, it’s all about LOCATION!!! Getting the best seat for the best price. This is where Ticketmaster fails. Their website lacks the UI and UX for a satisfying ticket buying experience. Navigating your way to find an event is fine until its time to pick out your seats. Here’s where they go wrong:
1. There is field to the right of the page dedicated to the price range of tickets. Also included is the price for taxes and fee’s, however none of them link to seats in your desired price range.
2. The main search field for tickets have limited options. There are 6 search fields to chose from, none which specify Section, Row, Seat, or Quantity available. Here is the description and problem for each field:
Full Ticket Price: allows the user to search by ticket prices. Problem: no indication of Section, Row or Seat# or Quantity available.
Limited View Seating: Problem:I don’t even know what that is and I’m not sure you would want to pay for an event with limited viewing.
American Express Seating: benefit’s Amex card holders. Problem: I don’t have an Amex.
American Express Preferred Seating: same as above, but with higher priority. Problem: I still don’t have an Amex.
Section: Options are: Best Available, Lower Bowl, Mid Bowl, or Upper Bowl. Problem: User can not chose a specific section of the arena.
Location: indicates where you are in relation to the court ie: Corner Seating, Behind the basket, Sideline etc. Problem:  Still does not specify Section or Row.
3. Arena Map: lacks interactivity. The arena map displays the specific sections, but is useless without given details to where the seats actually are.
4. Once you are ready to roll the dice, you are then prompted to type what is shown on the screen in order to get past the spam bot. You’re required to do this every single time, and is quite annoying when it’s your 3rd time around and you’re trying to decipher whether the letters are “n’s” or “h’s”
One you get through these steps you are either rewarded with seats or, in most cases, the “Sorry, no exact matches were found” alert.
In which case you are wondering to yourself, “well, what is available?” It baffles me that a widely used site such as Ticketmaster has yet to adapt any interactivity to their site.  Sites such as or use these interactive maps which indicate seats available in specific sections. Not only are these user-friendly, but they also deliver valuable information such as section, row, price and quantity to the user.
Posted in UI, Usability, UX



A shorthand for designing UI flows

Ryan wrote this on Sep 17 2009 / 30 comments

Flows are just as important to good interfaces as individual screens are. Customers don’t land on screens from out of nowhere. Specific sequences of actions lead customers through your app as they try to accomplish their tasks.

But as important as they are, flows are hard to communicate during the design process. Drawing out every state of a flow is too time-consuming. And drawings become instantly outdated as screens change. On the other extreme, flows written down into stories or paragraphs are hard to reference and they don’t easily decompose into checklists for design and review.

Working on 37signals Accounts has recently raised this issue of communicating flows for me. We have whole sets of flows that need to be properly designed, implemented, tested and retested. So I’ve scratched the itch with a simple shorthand.

Flows are made out of individual interactions. A screen offers some possibilities and the user chooses one. Then something happens, and the screen changes. It’s an ongoing conversation. Each moment in a flow is like a coin with two sides. The screen is showing something on one side, and the user is reacting on the other side. My flow diagrams illustrate this two-sided nature with a bar. Above the bar is what the user sees. Below the bar is what they do. An arrow connects the user’s action to a new screen with yet another action.

Here’s a simple and concrete example. To add a to-do item in Basecamp, first you go to a list. Then you click to “Add an item.” The form appears. You fill in the item content and submit the form, and if your submission is valid, the item appears and flashes yellow. Here’s a shorthand version of this flow:

The format is really fast to sketch, and it communicates the essentials of what needs to happen as I’m imagining it. For such simple examples, you don’t really need a shorthand. But for more complicated flows, especially of entirely undesigned sections of an app, the shorthand can illustrate a lot of behavior. Here’s a more complicated example for a log-in flow:

This log-in flow includes a few more notations. The dotted line separates alternate actions. There’s only one login screen, but there are multiple possible actions on that screen. The dotted appears above each additional action. Think of it as “or”. When there are multiple actions, the arrows point from an action to a new screen. Screens where the possible actions are uninteresting or out of scope simply have no bar below them. Like “Dashboard” in the diagram above.

You’ll also notice there are two arrows pointing out from “Submit email matching a user account” under the “Forgot password screen.” That’s because two different screens result from that action! You can think of the multiple arrows from an action as “and.” The updated login screen with “your email was sent” message is a result of that action, and the “forgot password email” is another result. Emails are screens because they participate in interface flows.

Here’s another complex flow. This one’s for sending and claiming invitations to create a user account:

Now don’t forget: all diagrams are destined for the garbage. The meaningful work is work that directly affects our customers in the form of screens they can see or code that functions. But we still need to communicate and manage our work along the way. This shorthand has met a bare minimum for me to get a flow out of my brain in order to move on to other things. I hope it’s useful for you too.

Posted in Uncategorized

How to make your contact forms mobile friendly

Good read on webdesignersdepot

Tagged with: ,
Posted in IA, Mobile, UI, UX

Tips for effective meetings

Via: Inc.

Learn this equation. No leader + no documentation + no follow up = waste of time. Every meeting has to have a leader, a stated purpose, a start and end time, and a valid reason for each and every person to be there. The leader documents conclusions, plans, action items, whatever, then follows up.

Do you even know what you’re doing? Every leader should know how to run effective meetings, like how to set ground rules for constructive engagement, how to use tools like Parking Lots to take issues offline, and how to bring people to consensus.

Have them in the afternoon. I once read in a Scott Adams Dilbert book (no, I’m not kidding) that people do their best work in the morning, so you should have meetings in the afternoon. I asked my staff and they agreed unanimously. Turned out to be a great move. Also most people are more relaxed after lunch. Don’t ask me why.

Beware the hive mentality. I’ve worked with companies where executives were double and triple booked in meetings most days and managers were required to have weekly one-on-ones with their boss and staff (and monthly with peers). How in the world do CEOs expects their management teams to get anything done that way?

Lose the hallway meetings. Founders and other start-up executives are often fond of ad-hoc hallway meetings. The problem is that decisions are made without input from key stakeholders. Sometimes that’s a smokescreen for passive-aggressive behavior. Other times it results in strategy du jour. Either way, it destroys organizational effectiveness.

Challenge the status quo. If you run a periodic staff meeting, occasionally ask your team what you can do to improve it and help make them more effective. You’ll usually get at least one good suggestion. Not only that, but your folks will appreciate it.

Tagged with: , ,
Posted in Uncategorized

Redesigning Google

Cool article on the Verge:

Posted in Uncategorized

User testing…

I was able to sit-in on my first usability test about a week ago. It was for the redesign of Discover Cards home page.

The testing took place in Chicago, so I had to call in and watch on my screen here in NYC. We shared screens with the user in order to view their actions and behaviors.  There were about 4 testers on the first day, but I was only able to catch 2. Each were given different styles of the Discover Card home page, and each were asked questions by the moderator:

– “If you had to refute a charge, where would you look?”

– “Is the information provided to you helpful?”

– “What would you rather see in this section?”

These were the types of questions asked.

It’s interesting how different people think, and how experiences affect their behavior. It definitely is a good way to burst the bubble that builds around you when working on a project for so long. I also noticed that everyone loves to play “designer”. Each tester had their own feedback of what they would change and as they grew more and more comfortable in the session, would become more specific with changes they would like to see.

As each tester left, we ended with an internal conversation on making specific changes based on the user feedback, and it was back to the drawing board in order to get wireframes updated for Day 2 of testing.

Posted in Uncategorized