I am not with the program.

The ordering experience was both better and worse than the standard standing-in-line module. On the one hand I was not delayed because another customer is indecisive over bananna peppers. Nor did I have to worry about getting tongue-tied making my order, taking too long, or misunderstanding an accent.

How many times have these concerns caused me to go someplace else? Quite often, actually. I’m guessing Subway discovered that the sandwich-kibitzing requirement was turning people away, so they’ve neatly done away with it.

But on the other hand, the ordering kiosks put the human staff at a further remove from the customers. We give a machine the order, then the machine gives them an order. And yet they are still standing there assembling sandwiches on the other side of the kiosk. It’s like an automat except the vending machines are silent people.

In a time when so many people are emphasizing human contact, Subway is becoming more mechanized and more inscrutable.

There are a couple of other problems, too. Whereas the old system was very orderly — queues always are — there are now potentially several lines in front of each kiosk and a number of people standing around, in the way, waiting for their sandwiches to be made. Every Subway I’ve been in is long and narrow, but the new ordering process requires a deep space for people to stand. I was also confused about when to pay — after ordering? After getting my food? I think I saw people doing both.

It seems to me they’ve made it easier to order, but made the experience of being in a Subway more unsettling. The “crowd at the door” problem can be solved by remodeling.

But what should Subway do about the emotional experience? Does the lack of human contact make Subway seem cheap? Or do they need to do anything?

Related posts:

1. Experience Design? What’s that?

Duplicating an object within a single layer

Say you have a bulleted list or navigation column that needs a graphic next to each topic – in this case we’ll use a red arrow. Most-often when you have a Photoshop document with hundreds of layers – ease of editing and document file size becomes crucial.

1) click to view larger

1) You can duplicate the arrow layer each time and position the new arrow where needed – but you’ll end up (in this example) with a total of 19 separate layers – just for this small section of your design. Not only will this clutter your layers palette, but there is no real reason for this. All it’s really doing is taking up valuable vertical visual space in your layers palette. You could group all the arrow layers, but that’s just hiding the issue.

2) click to view larger

2) Here’s what you do… position the first arrow – use your marquee tool and draw a selection box around it. Then hold down your Command, Option & Shift keys simultaneously – then move your cursor within the selection box and click & drag the arrow down to a new position. You will notice that you have just duplicated the arrow within the same layer! If you happened to miss the selection area, clicked & moved, you will notice that you may now have another unwanted layer – delete & try again.

You can fine-tune the position of the arrow by making another selection box around it & moving it . It gets better – if you need to create many many arrows – you can now select the two and duplicate them using the same process – now you have 4, etc.

3) click to view larger

3) Repeat as needed until you have as many as you need – all on the same layer. Another advantage to this is when you have to change the arrows in some way, they are all in a single, easy to manage layer. This way you can change colors or position without having to worry about selecting multiple layers. This seems like a small time saver, but it adds up over time, and multiple projects.

Merging layers without losing the original ones

Say that you have a layout that you have been toying and tinkering with for a while. You have it to a point where you need to now show your Creative Director or Client. Here’s the thing – you have multiple ideas, color options, or in this case – photo combinations. Time is money, and you don’t have the time to fumble through and remember which obscure layer to turn on or off for each combination while that person is sitting directly behind you. No matter how much you aned over organizing the layers. I’ll show you an easy way to combine these many ideas onto single layers so that all you need to quickly show are those few final ideas.

1) click to view larger

1) Create a few blank layers at the top of all your other layers. Name these layers “flat 1″, “flat 2″, “flat 3″, etc. – or you may even want to name them specifically by there differences or aspects. By always keeping these located at the top of your layers palette – it helps you to quickly find them. Now as you work out each different idea within this same comp, simply follow these next steps…

2) click to view larger

2) For each combo of options that you want to show (in this case, photo combinations) get the file looking just how you want. click once on a blank layer to highlight it. Hold down your Option key and then click on the Layer Options button in the top right of your layers palette. Scroll down to “Merge Visible” and click. Be sure to keep the Option key pressed until Photoshop is finished doing it’s thing.

You now have all visible layers merged onto one single layer and still keep all the layers used to create it! If you see that you have actually merged all layers and are missing a bunch, go back in your history & undo – try again – KEEP THE OPTION KEY DOWN.

3) click to view larger

3) Save your file. Now turn off the flat layer you just created and turn on & off the desired layers for your next option. Repeat step 2 highlighting the next blank top layer until you are done. You can always make more blank layers at the top as you need them.

By mastering these shortcuts, you will find that your workflow will increase and help you look more like a pro.

Related posts:

1. Easy Design Path Rules in Photoshop
2. Developing in CakePHP

NameTags by Richard Moross / Flickr Creative Commons

I help our clients develop social media and communication strategies here at NewCity.  I try to get out of the office pretty often, meet people and talk to other conversation-oriented types about what’s working for them and what’s not.  I like to get out and meet people that we might like to work with in the future.  I go to advertising functions, industry association meetings, technology council meetings, higher education conferences-  I like meeting people.

The first thing that usually happens at these meetings and get-togethers is that you check in and are immediately handed a badge that you have to somehow attach to your person.  It’s meant to be an ice-breaker, a way for people to identify you and start a conversation.  Nine times out of ten, it’s pre-printed and it lists your name and company name- but most prominently displays the name and logo of the organization that’s holding the meeting.

I’ll admit that until recently I’ve never really questioned why this is the way it is.  I suppose it’s “prime advertising” space- a place for event sponsors to get their name and logo seen and a place that event organizers can sell as prime advertising space- funny the way that works.

I recently attended a meeting of the Richmond Social Media Club.  It promised to be a great evening of learning and meeting people.  I arrived at the event and sure enough, I walked in and there was a reception desk with smiling faces ready to check my name off the reservation list.  That’s where things changed a bit.

I wasn’t given a pre-printed name badge with the event logo and my rank,file and serial number.

I was given a plain 3×2 label and a Sharpie.

I could define myself however I wanted.

Now, this is where I should tell David that I dutifully printed “Pam Martin – NewCity” on my sticker.  I also added “@PamelaMartin” on the 3rd line.  I peeled the back off the label, slapped it under my left shoulder and dove into the crowd- looking for the bar and feeling excited about meeting some very cool people.

Everywhere I looked people had labels that listed simply their name and their Twitter handle- in everyone’s funky, unique handwriting.  People weren’t even passing out business cards!

What kind of business function was this anyway?

It’s business the way business needs to be conducted today.  With people.  By people.

You can network with companies.  You can speak to your target audience or demographic.

But it’s a lot more fun to meet people.

Communication between people is where relationships happen.  People like to find out what they have in common- whether it’s working with youth groups and Legos on occasion, Phish and sublime food & drink, ultra-running and other forms of self-inflicted torture, a passion for shoes bordering on the ridiculous… (who me?)

I had a lot of fun meeting people Tuesday night.  I met people that I’d like to have an opportunity to work with and I’ll do what I can to make that happen.  Now if I could only remember where they work…

Related posts:

1. Barter Theatre’s Formula For Success: Make People Happy
2. Kelly O’Keefe says customer experience critical to GM’s future
3. When to step aside for someone better

Watch Kelly explain why only great products and experiences will save GM's brand.

Related posts:

1. Opposing lessons in experience design (from outside the convention center)
2. Experience Design? What’s that?
3. Changing Behavior through Experience

We were working in January with Imperial College London Research Services to help them restructure their site so that it better supported the goals and needs of people seeking research funds or managing research projects.

We traveled to London for two and a half days of intensive on-site planning, during which we planned to

1. analyze the data we had collected through a carewords survey and baseline usability tests of the existing site
2. get input from a variety of stakeholders through KJ sessions
3. synthesize our findings to create new wireframes for the site
4. develop the wireframes into a paper prototype of the new site
5. conduct usability tests with the paper prototype

We wanted them to have a clear and validated direction for the new site by the time we left.

If you’re not familiar with paper prototyping, it is a technique where you create a prototype of the site using paper and ordinary office supplies. You can draw screens by hand or create them on the computer and print them out. One person acts as the computer and manipulates the paper “screens.” Another person facilitates the test and asks questions, while a third person participates as the user. When the user points to things he or she would click on, the person acting as the computer updates the screens.

Paper prototypes are quick, support rapid iteration, and save the expense of preparing a clickable version of the site.

Things were going smoothly until the last day when we were scheduled to do usability testing. We were creating our wireframes in OmniGraffle and we were working furiously to pull together all the pieces and sample content we would need to conduct a thorough test. It was getting down to the wire – only 15 minutes until the first users arrived. We realized we didn’t have time to print everything for the paper prototype.

My colleague Melissa Beaver and I looked at each other and said “How can we do this test?”

“Why don’t we project it on the wall and use that like a paper prototype?”

“Great idea, let’s try it.”

Here’s how we ran the test.

• We projected our wireframes on the wall from OmniGraffle.
• I acted as the computer just as we would have done in a paper prototype test
• We asked the test participants, instead of sitting in front of a computer or working with sheets of paper, to stand in front of the projector screen and point to the things they would click if they were using the site.

It worked amazingly well.

One of the things we found was that because there was a bit of a delay in the time it took me to change screens, Melissa was able to ask clarifying questions, and there was time for users to talk about what they were expecting to see on the next screen. It also allowed Melissa to take better notes through the process.

This hybrid digital / paper prototyping technique also gave us the advantage of not having to worry about whether everything that needed to be clickable was actually clickable in the prototype. We could just respond to what they thought was clickable, and I (as the computer) could jump to where I thought it should go. And we were able to adapt the prototype as needed as we went forward.

A month later we were scheduled to conduct usability tests for a client in the DC area. Eva Baird, one of our user experience architects based in Tucson, AZ, needed to be present for the tests but the timing and costs were not convenient for her to travel to DC. We were trying to work out some solution and it occurred to us that this same technique could be used remotely with a screen sharing program. We invited one of our partners, Daimon Caulk of Modal, to come and facilitate the tests for us in DC while Eva acted as the computer remotely from Tucson.

We relied on a screen-sharing program called Glance that we use for a lot of our virtual presentations. The process with Glance worked like this:

1. Eva shared her screen with OmniGraffle open and the wireframes on the screen, while the participant went through the usability test. She could pass control of the mouse back and forth to the test participant.
2. Daimon introduced each scenario and took notes as the users tried to find things or accomplish tasks.
3. Users moved the mouse to the thing they would click on and said “Click.”
4. Eva would then take over control and switch to the appropriate screen, and give control back to the user.

We found that all of the test participants, as soon as they understood what was going on, basically forgot that there was another person on the other end controlling the computer. They had no trouble participating in this manner.

Taking this approach has saved the time we would normally spend creating a clickable prototype, especially when we want to be able to iterate quickly and test variations of the site. In the case I described with Eva and Daimon, we were able to run a test, make changes, and then run another test later in the same week and validate the changes.

The first two times we used this technique we had thumbnail views of the pages visible on the left side of the OmniGraffle screen. We did find that users were sometimes trying to click on the thumbnails, thinking they were part of the interface. So we now hide them and use the drop-down menu in OmniGraffle to switch screens – although that did make us wonder if some sort of page thumbnail view would make a good navigation model in some interfaces!

Daimon has now facilitated multiple tests with this digital paper prototyping technique, so I asked him to share his experiences:

Here are some tips from Daimon on facilitating a digital paper prototype test session:

• The Right Setup- Make sure you have a good speakerphone and decent bandwidth. You’ll need a good speakerphone so the second facilitator can hear the queues. Also, consistently good bandwidth is required because of the need to share the screen
• Describe the Method- It’s important to describe the test method to the participant; with one participant I forgot to mention the second facilitator was on the speakerphone so as soon as she spoke it scared him
• Show and Tell- I made sure I demonstrated the screen behavior, how to interact with the screen, and how the participant needed to think aloud letting the second facilitator know their desired action
• Close the Canvases- One thing I noticed was that if we had the canvases pane opened the participant tended to “look ahead” or use it as a navigation element, so make sure you hide your canvases
• They Will Adapt- After a brief walkthrough of how everything was going to work the participants adapted surprisingly well to the interaction

I would definitely recommend this method especially if you are in between wireframing and designing as it gives you an opportunity to work with the Information Architect directly. It’s quick and it is as good if not a bit better than using paper alone.

Let us know if you’ve done something like this, or have suggestions for improving the process!

Note:
Check out our earlier blog posts about the Imperial College Research Services project – Part 1 and Part 2

Related posts:

1. Doing a Carewords Survey for Imperial College London
2. White Paper: Conducting a Higher Ed Site Audit
3. How VT Financial Aid rebuilt their site around audience goals

No related posts.

http://shar.es/38Yk

No related posts.

No related posts.

The agenda wall

Brian, Dave and I drove to New York May 7-8 for the Creative Unconference. I’m now permanently ruined for traditional conference formats. I filled several pages of notes and I thought I’d share some tidbits I took away from the event.

What is an unconference? The idea’s actually been around for a while, although I think they’ve been done more in technical communities. A day at an unconference looks something like this:

1. Conferees gather and introduce themselves
2. We start with a wall-sized blank agenda, with 1 hour time slots down the side and 6-8 session slots across the top (see the photo).
3. Anyone who wants to convene a session on a topic writes that topic on a sheet of paper.
4. Conveners take turns announcing their sessions to the group and taking any questions.
5. Conveners place their session in an open spot on the agenda wall, or merge it with another session if appropriate.
6. The conference starts – people pick sessions to attend, and things change or adapt as appropriate.

The best sessions were not a formal presentation, but more of a discussion with perhaps a brief presentation from the convener. In my view the unconference worked well for 3 reasons:

• Most attendees were senior level with years of experience to share
• It was a fairly small group so the level of interaction was high
• The atmosphere was that of peers learning from each other, not acolytes going to learn from gurus.

What did I learn from my peers?

These are the things I wrote down and remember, I can’t promise they’re coherent.

Sales strategies

Several companies spoke of successful proactive sales efforts, researching and developing prospect lists and pursuing them. We’ve stayed so busy over the years just responding to referrals and incoming requests that we’ve never had to get our act together on proactive sales. But it has limited our growth in many respects. I was encouraged to see that it really works for many agencies.

#1. Importance of careful research into prospective clients. Not just the company but the people you’ll be dealing with. If they’ve changed jobs a lot, watch out – you don’t want to build a relationship only to have to start over in a year. Also, if they don’t have a track record of doing great work, they never, ever will.

Session at the Creative Unconference

#2. We heard examples of some great door openers:

- Zemoga’s zPhone, a green VOIP phone they give to clients and partners, that dials directly into their offices in Bogata, Columbia. Has been a huge driver for new and repeat business, and makes them one of the first companies that people will call when they need a consultation.

- Walrus’ 20″ x 30″ aluminum coupon for 5 free days of thinking from them. Followed up by several other clever mailings – they always get to talk to someone after this.

- Boone Oakley’s Mad Libs letter. Total genius, too bad we can’t copy the idea. They sent 50 letters and got 45 faxes back.

#3. A new campaign for an existing client is really a new business pitch. Corollary – treat every conversation with a client like a pitch.

#4. Don’t take a pitch for which the prospective client will not allow collaborative sessions.

#5. Copyright your ideas during the pitch process. Don’t sell them cheap.

#6. You have to be clear in your own brand concept. That concept leads to a filter, that helps determine what you will and won’t take on. You have to be about that concept 100% (thanks David Angelo of David&Goliath for this and much other kick-in-the-pants advice).

#7. Zemoga develops ideas for  Nickelodeon sales reps to take to advertisers. If the idea sells, they negotiate a fee for it and then they do the development work. This is also smart because they’re looking at how to help their customer (Nick) open new revenue opportunities.

The business side of creativity

#8. As an agency owner you can and should be creative in your operations, not just in the work you do for clients. Examples – allowing a new and complementary businesses to grow within your own business, incentivizing your vendors, cross training roles.

#9. Demonstrate your efficiencies to your clients so they see the value they are getting from you.

Partnerships

We saw many opportunities for partnership, and got some great ideas for how to make them successful.

#10. Creating shared methodologies, toolsets that we and our partners use, can be powerful not only in creating efficiencies, but in selling the partnership. Prove to clients that there is a cohesive methodology that delivers results.

I don’t get the sense that anyone wants to be treated like a commodity though – great partnerships happen when firms treat each other like peers, not just “production.”

Perspectives of Digital and Traditional Agencies

There was a lot of discussion around the tension between digital and traditional agencies, how such agencies can partner better, why agencies are having trouble bringing the two perspectives together internally.

Robert Rasmussen from BBH talking about digital and traditional agencies

#11. Robert Rasmussen from BBH New York talked about how a traditional agency tends to shape a pitch and campaign starting with the big-ticket, high profile things like TV, then working down in order of priority and budget through print, outdoor, radio, and finally online and maybe mobile.

The problem he pointed out is that these priorities don’t map to engagement. If you want to think about a campaign in terms of the highest engagement for your budget, it should probably be prioritized with mobile and online first, then outdoor, events, TV and maybe print.

#12. Someone from Agency.com recommended spending in measurable media first (interactive), seeing what works and then using that insight to drive what you do in other media. Makes a lot of sense to me!

If you were at the Creative Unconference, what was your biggest takeaway?

Related posts:

1. Experience Design? What’s that?
2. What you’re selling vs. what they’re seeing
3. Lessons learned from Imperial College London

original photo - background needs removing

Paths are an essential design tool for lorez web work, and especially important in hirez print work.  I don’t know how many times I’ve had to train design interns and new hires on this basic process.

We’ve probably all seen poorly pathed images that have that halo on the edges.  Sure ideally you would shoot the image on a background suitable for what you need it for in order to minimize the halo effect – but it’s more-often the case that you have a client photo that must be used.  One with all-sorts of background mess.

Here are a few tips to help:

1. Start your path in an easy place – like a corner.
2. Decide which direction (clockwise or counter-clockwise) you will go which is most comfortable for you.
3. The fewer the points – the better.  Take advantage of the tool handles to adjust curves & direction.
4. Curves – place a point in the middle the flat pixel plain.  A circle or oval has 4 of these & should only need 4 points.
   

   4 & 7. Point in mid of the Flat Part of a Curve

5. Take full advantage of the Pen tool key commands;  Command key lets you use the Direct Select pointer, Option key lets you use the Convert Point Tool, hover the cursor over a point & click to delete a point, or hover & click between existing points to add a point.  This will speed the process by not having to click options in the tool palette.
6. Zoom in close to see the details – zoom out to see the whole picture.  Repeat.
7. Split the pixels – you want more of the item and less of the background.  Especially on curves.
8. Know your subject matter.  You often have to make judgement calls on vague areas – like those in shadow.
9. Double & triple check the path.  View close-up and make any adjustments needed.
   

   9. Object Fully Pathed

10. When complete, deselect the work path layer in the path tab by clicking off of the layer.  This will help protect it – if it is still active and you delete something while working, it will probably delete the path you worked hard to create.
11. You can use the Direct Select pointer and hold down the Option key to select all points on any given path.  This comes in handy for creating Masks or Clipping Paths.
    

    11. Object with Background Removed using a Mask

12. Some images just cannot be clipped purely.  After you are done and the object is clipped, it’s not cheating to sample the edge color of the object and paint in the edge pixels to eliminate the halo that may remain.
13. Hair or fuzzy areas are not ideal for paths.  For this it is best to use the Extract tool under Filters, but will not be discussed at this time.  This was a default filter tool in previous versions of Photoshop, but in CS4 it must be manually installed from the Goodies folder of your install disk.  Well worth doing & getting acquainted with.
14. Practice makes perfect.  If you’re not confident, practice on different types of images.

By mastering the path tool, it can make a retouched or combined image look great – making you look like a pro.

Related posts:

1. Combining multiple steps using single photoshop layers
2. Help smoothing out PSD color blends
3. Design Inspiration Comes From Many Sources