An interface re-design story

October 5, 2009

This is a short summary of a “typical” re-design process, showing some of the steps that led us towards a solution. I had been asked to redesign some of the back office software for a quick serve restaurant chain.  The people who managed all their software were evidently satisfied with the screens used for point of sale touch screen entry (like a cash register).

However, I was alarmed I saw this screen, and did manage to get a contract to develop a new design concept (not a final design). Frankly,  I was amazed later to see how productive staff actually were when using  the original version.

A screen before redesign

Customers in this restaurant walk down a sandwich line, and arrive at the end with their sandwich complete.  A clerk then rings up the sandwich(s), along with drinks, chips, etc. , using the screen at the right.

Although there’s an “icon’ for each sandwich, there really are only two images — one for large, and another for small.  The tiny text carries all the information.  And because there are now so many products (in addition to large and small, many sandwiches are available as child size, party size, salad instead of sandwich, etc) everal screens are needed to handle the full set. It’s a confusing complex web.

After a lengthy period of visiting stores, watching staff behind the “cash register” (pos system), and even running the pos system in one store for half a day myself, I began the actual design process.

Here was an early attempt to rework that screen.  I tried to set up “shift” or “context” keys at the top to indicate what kind of sandwich (or salad).  Drinks were shown on the right, and there were some discount keys as well. However, people looking at this screen didn’t get a clear picture of how it works.

Design idea #2

Part of the design process is coming up with bad designs, understanding what’s wrong with them, and moving on. Here we had a concept that seemed solid, but no visual indications that wold guide the users.

While the visual design didn’t work, I was convinced that the underlying organizationt was sound.  By using strong color and outlines to emphasize the context buttons at the top, and to clearly indicate which kind of sandwich (or salad) was selected, the whole screen became much more readable.

However, users were very worried about needing to hit both a context button and a filling button in order to enter a sandwich.  They were relieved when I added some “hot keys” — buttons shown in light red that allow one-press entry of popular items.  I’m still not convinced that this would be a big time saver, but it totally won over the users, and that was very important. We also had a notion of “persistence”, so that large or small sandwich type settings might remain, while child size would only last for the one sandwich being entered.

Design idea #4

This all worked better, but management felt that our new design, while it may be functional, was dull compared to what they had.  I had to agree.

So, we started playing with color — both to bring some life, and to provide clearer cues about the function and category of each button.

Design idea #6

This is still a work in process.  Management has been slow to accept the new design as something that will improve productivity, and so it’s not yet been implemented.  Frustrating, perhaps, but true.

This is design in the real world . . . not always understood, not always sought after, not simple, and often not cheap.  But the end result should appear simple, clear, and obvious.

7 Responses to “An interface re-design story”

  1. Julian Lyndon-Smith said

    Arthur, before I would comment on anything else, you probably need to consider that some staff (existing or new) may be colour-blind and not be able to differentiate between the red and green. In the US, you are probably breaking some employment law 😉

  2. Arthur Fink said

    Julian raises an interesting point. But the color information on this screen is not essential, as all buttons are completely identified by their text label. Somebody who is completely color blind could still operate the system without difficulty.

    For many kinds of color blindness, different hues map into different tones, so there may still be some visual cue … but if there is not, no problem!

  3. Deidre Johnston said

    You could color quote each sandwich (or group of sandwiches in a price category) and then have the corresponding buttons in the row all visual icons of the same color showing full, half, etc..a full meal showing three icons on a button (sandwich, chips, and fountain drink)..that way as an employee I could memorize ‘yellow’ was turkey and/or ham and just follow the yellow icons until I see the picture/pictures I wanted…

  4. Ashley Hancock said

    I may look unclutted now but already the screen is full
    what about when they add more fillings etc or stop selling one?

  5. Arthur Fink said

    Ashley asks a good question about expansion room. There is space for two more types (perhaps Panini’s are next, even in this un-fancy place). And there is space on this screen for 5 more fillings, plus the space taken up by the “hot” keys that I don’t think they will really use.

    But there are other menus for less rarely sold items, such as party platters. As they add new items, it would be reasonable to move some of the low volume items to another screen — if they even keep those items alive at all.

    Actually, now they have three screens just to keep up with what’s currently on the menu, so we’ve done a lot to reduce the screen real estate needed.

  6. Krystal Harwick said

    I happen to work at one of these franchises in PA and I must say that your design seems much more manageable than the corporate standard you started with. As an operator of the system, I would recommend keeping pictures of the cookies, drinks, chips, etc. We need to read the buttons to ring up the correct sandwich anyway, but an image for the add-ons would help us ring faster. The images should definitely be labeled, but I know from personal experience that looking for a picture of a cookie is far easier than scanning for the word.

    Also, I realize that the third screen seems visually dull, but when you’re ringing for two straight hours, it’s far easier on the eyes. If you ditched the yellow background for a gray and kept the colorful buttons, it may satisfy everyone.

    Good luck!

  7. Darrell Woodard said

    I agree with Krystal to a certain extent on the idea of the bright colors getting on a person’s nerves after a while and perhaps even being hard on the eyes physically.
    How about offering 3 or 4 themes that the user can easily select from.
    Perhaps a single button in a corner could rotate between themes.
    Even give them cool names that the user will associate with what theme they want to use such as Color Jamboree (for lots of colors), Plain Jane (for basic grey theme), and Cool Contrasts (for a bright white background with BOLD black letters).
    Give a Dull theme a cool name and the user will feel better about using it!
    A user could pick their theme at the beginning of their shift and they would usually stick with it but could change it if they tire of it.
    You could also follow up later, find out which themes are working and which ones are not and replace the
    least used or unused themes with a better alternative after getting more user input.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: