Topical and Tropical

Rants, Raves, and Other Mindless Babble

Connections

Posted on July 28, 2009 in Daily Life, Design | comment bubble No Comments »

During the past few years of my career, I have become increasingly aware of the customer experience in our shop. What do I mean by that? I mean how clients are treated from the moment they walk in the door to the conclusion of their particular project. Specifically I have been closely examining how I communicate with them and try to form a connection, because in my opinion forming relationships is just as important as knocking out kickass design. Once you show people that you can produce a great product, you have proven yourself creatively. Once you show people that you are a genuinely nice guy to work with, you have proven that you are indeed human and not just a robot that churns out Photoshop masterpieces.

A former colleague once told me that we are just as much social workers and psychologists as we are designers, developers, and project managers, and I agree with him. Lately I have been focusing not on the technical aspects of my position at Notre Dame, but the emotional components of my job, and finding that sweet spot with clients where we can come together. I have been asking myself questions like, “Do I listen intently? Do I respond promptly to their needs and wants? Do I greet them with a smile and respect? Do I make them feel comfortable when they are in our space for meetings? Do I openly take in all of their ideas without interruption?” If I can answer all of those questions with a YES, I consider that a significant step towards making a connection with the client that transcends websites, brochures, and letterhead.

I often like to use the Department of Development as an example that best illustrates what I am saying. When they come to our office looking to get a project completed, they almost always ask for me specifically to do the work because of the working relationship that we have established over the years. There is a mutual respect that exists. I know that they know what they are talking about and they know that I know what I’m talking about, and that a great product will come out of the ideas that are generated. Design meetings with them are often filled with creative energy as concepts and thoughts are tossed around. People are smiling, the occasional joke is cracked, and we almost always walk away from the conference room with clear goals and a feeling of confidence that we are on the right track. I listen to them, they listen to me, and most importantly we talk to each other and not at each other. We put the image of being a marketing communications machine aside and show the humanistic side of our craft.

Moving forward I obviously plan on doing this much more and doing an even closer analysis of my own personal client relationships. After all, at Notre Dame we are suppose to be a family, and families are suppose to have open lines of conversation. So if that means I take 10 minutes out of my day to walk someone through a wireframe over the phone or walk up to a colleagues office to show them a simple technique in Photoshop, then that’s what I’ll do. In the end, we don’t work in a hospital emergency room. People’s lives aren’t at stake if a site doesn’t launch. So why not slow down, start a dialogue, and create a connection?

SXSW Interactive 2009

Posted on April 3, 2009 in Conferences, Design | comment bubble 2 Comments »

I realize SXSW finished up a few weeks ago, but I was just going through my notes and I wanted to make sure that I had some of my points documented not only only for my own purposes, but also for yours. Given that this was my second trip to Austin and this time I was attending with a few colleagues who had never been there, the trip took on a different vibe for me. I saw people that I recognized from my last trip, I met some new people, but overall I wanted to go there and get inspired. I wanted to learn new techniques, interact with different technologies, do a little networking, and bring something valuable back to the University. So in a nutshell, I sifted through my many moleskine pages of notes and extracted the most important nuggets of info that I took away from each of the sessions that I attended.

Panel: Everything You Know About Web Design is Wrong
- Customers rebel when they are forced to interact.
- Dots by themselves not significant. Together they create something powerful (ie. Seurat’s painting).
- Experience is the content. Roller coaster isn’t about the tracks, it’s about the ride.
- Designers share space with users who are also designers.
- Embrace visual design as a means to an end, a solution to a problem.
- Exploit, encourage, and protect the expertise of your team.
- Embrace ignorance and mistakes.
- Don’t be distracted by business models that don’t begin and end with the user.
- Tell clients this is the way you should be doing it and this is the question you should be asking.

Panel: Ooh, That’s Clever! Unnatural Experiments in Web Design
- Use clever attention-grabbing details (ie. Aerosmith logo upside-down example).
- People are naturally attracted to fun things.
- Use easter-eggs to surprise users and for viral influence.
- Parallax example with Silverback site shifting vines.
- Movie trailer example with action breaking out of fake-browser.
- Kano model of customer satisfaction. Quality of execution vs. happiness of customer.
- Designers must fill excitement needs.

Panel: Making Yourself Interesting
- Would you care if something went away?
- Give side projects the time that they deserve.
- Find something unique (ie. Bike Hugger).
- Find like-minded people who are into something and exploit that.
- Get Satisfaction example. Connecting and building relationships with communication.
- Content strategy: Plan, Create, Publish, Govern.
- Have the goods. Believe in your product and bring something real.
- Set new goals. Inspire yourself to raise the bar every time.
- Be courageous. Stay focused and be brave about promoting your message.
- Know yourself. Know your limits but don’t obscure your potential.
- Experimenting and commitment don’t really have to go hand-in-hand.
- Forget the concept of the big reveal. Get yourself out there.
- 1 way conversations losing relevancy. Users are becoming more demanding.
- Brand = collection of perceptions that companies shouldn’t try to control.
- Focus on things that add value.

Panel: Make Ideas Happen
- Leaders should speak last when in large brainstorming/strategy sessions.
- Prioritize your jobs on a whiteboard based on immediacy.
- Encourage people to speak up and don’t let go of the ropes (3 way tug-of-war example).
- Get rid of distractions and eliminate those things that clutter our lives.

Panel: Not the Same Old Story
- Example of how Wired magazine looks great in print and dumped in website template.
- Has to be a payoff or a personal connection to the content for the user.
- Participation increases when people can directly affect the content.
- Organic relationships between content should exist.
- People become attached and are more willing to speak up if they are paying for it.
- Big difference between awareness and understanding.
- Short form vs. Long form journalism conversation.

Panel: Designing for Irrational Behavior
- How can technologies provide us a way to see the bigger picture?
- Conduct social competitions and give people rewards for achievements.
- Use people’s natural curiosity to your advantage.

Panel: Web Typography - Stop Bitchin’ and Get Your Glyph On
- Embrace idea of print design inspiring the web design.
- Find ways to manipulate existing fonts (ie. kerning Helvetica example).
- Discussion about the @font-face line of code for font-embedding.
- Designers should use font-linking, get a EULA, and prevent font theft.
- webtypography.net

Panel: UX Team of One
- Leah from Adaptive Path. Awesome freehand sketch slides with transitions.
- Forrester’s CX Model: Interested, Invested, Committed, Engaged, Embedded
- Working together creates ideas.
- Start at the beginning and become an idea generator and then refine. Diamond-shaped graphic.
- Brainstorm, assemble an ad hoc team, and pick the best idea (E-vite example).
- 6 up template: grid used to generate ideas. Get 1/2 good ones and then move past wall.
- Spectrums example. First timer on one end, expert on the other. What level is the goal?
- 2×2 example. Horizontal axis = First timers, Experts. Vertical = Automatic, Manual.
- Word associations example. Write down a bunch of words and use them as a guide.
- Inspiration library example. Take screenshots of good sites and store them in an archive.
- Invite project managers, developers, etc. to participate in the design process.
- Make sketchboards. Get people pointing and creating visual vocabulary. Have clients make notes.
- Host open design sessions. Invite everyone and ask them to solve problems.
- Template based workshops. Design the box. Concept sheets. Write down verbs/nouns/etc.
- Decorate your space with sketches of work and get feedback. Show people what you do.
- Pass the pen feedback. Ask people to show you what they mean.
- Black hat sessions. Invite people, fixed time, and one person plays villian by finding holes.
- Design is about bringing all ideas together in an elegant fashion.
- Star to sail your ship by. Need a clear objective to move towards.
- Design principles: aspects that go deeper than just look (ie. E-vite = make it addictive).
- Design principles enable you to say no to clients and bosses. This is why the solution makes sense.
- Quiddity = essence of products and their experience.
- Start sketching. Schedule workshops. Draft design principles.
- Wireframes becoming obsolete. Get people to the table early, stay in communication.
- Example of putting sketches in a presentation and showing them off with annotations.
- Have people show you flaws in your products and designs.
- Bringing client in means they have a stake in the process/outcome.

Panel: Design for the Wisdom of Crowds
- Number of beans in jar example. Individually people all over the place. Collectively they were close.
- Lots of people (users) are making small decisions and affecting the image of the company.
- The Heisenberg Problem.
- Example of Flickr interestingness scale. Goal was to be number 1.
- Take away ranked list and becomes looser. Interface changes peoples perception.
- Popularity doesn’t always have to rule. Can show good/bad at same time.
- Explicit Feedback. Make a decision. Here’s an interface.
- Never use too many options.
- Implicit Feedback. Page views, searches, interestingness.
- Design matters. How you ask questions changes answers. Kvetch example.
- Red vs. Blue: people get afraid they pay attention to detail. Calming promotes glazing over.
- Brooklyn Museum example. Larger images got more attention.
- Get Satisfaction example. Best post = what people think is valuable.
- Importance of seeing things. Online misses important data (ie. smell, visual, etc.).
- When you feel out of control, you make up stories to fill gaps. Let people feel in control.

Panel: Web in Higher Education
- Small teams can do big things.
- Take risks on products and applications, especially if they are free.
- Be aware of social media implications.
- Brand awareness has to be automatic.
- Use Facebook and Twitter to establish relationships with students.
- UCLA has campus design/development group that gets together.
- Start blogs and post messages about what we are doing. Encourage transparency and conversations.

Panel: Video Blogging with Gary Vaynerchuk
- Awesome guy.
- Content is king. Marketing is the queen. And the queen runs the household.
- Reactionary business. Find out who your competitors are.
- Embrace who you are.
- Can’t get anything unless you take it.
- Find people who have had negative experiences and fix them.

Panel: From Words to Pictures - Shift Happens
- Visual thinking matters.
- Graphic recording. Need to have visual aspects spoken to people.
- Words aren’t bad, but people are inherently visual. Adding images = increases connection.
- People have a need for a basic understanding.
- Stimulus package example. $787 billion/767 pages. $1 billion/page. Couldn’t you add pictures?
- Kindergarten. How many can draw, every hand goes up. Read and write, few hands. 10 years later, opposite.

Panel: How to Protect Your Brand Without Being a Jerk
- If people steal your site content and ignore takedown notice, they become liable.
- Make sure you have the backing of copyright law.
- Trying to control what people are saying is unfair.

Panel: Wireframes for the Wicked
- Beginning of process = low fidelity idea generation.
- End of process = concept selection and high fidelity.
- Amount of detail increases as process moves on.
- Reference Zones. Major positioning of elements.
- High Fidelity. Detailed. People should stay focused. Specific content.
- Storyboards. Demonstrate core tasks and behavior of site.
- Standalone. No explanation necessary (ie. navigation pull-down menus).
- Specification. Insane amount of detail. All interactions shown.
- Sketch-style. Loose pencil on paper.
- Use OmniGraffle as a tool to create them.
- More questions during information architecture phase means more changes in design phase.

Panel: Color Angels
- Pick colors that don’t produce anxiety.
- Listen to what people are saying and ask for more specifics.
- Be aware of cultural differences when choosing colors (ie. The Knot changing to red in China).
- Color accessibility. Contrast is important. Print it out and check.
- Think about where else your designs will live. Must look good in black and white.
- Research colors in magazines, on the net, competitors.
- Use accent colors to break up chunks of content.
- Save swatches per project in order to port over different Adobe apps.

The Big Picture: Photojournalism
- Still photography enables lingering.
- Take advantage of what’s out there.
- Photos drive the story.
- Idea came out of bad navigation on Boston Globe site.
- Make captions short and descriptive.
- Chain of trust with photography. We believe what we see.
- Be sensitive to the objectivity of the reporting.
- Covered up images with javascript because kids are using as a resource.
- Got overwhelming response from photographers who want to participate.
- Tries as hard as he can to play by the rules and give copyright.
- Photos promote discussion and bring people together.
- Reduces quality of image so people can copy and print them.

Panel: Designers and Developers - Why Can’t We All Just Get Along?
- Use different ideas and environments to solve communication issues.
- Joint ownership is the key.
- Mutual respect between all contributors to the project must exist.
- Make sure developers are brought into process early.
- Meetings that get people together to explain everything that’s happening.
- Specialization in skillsets is important.
- Developers want to understand the problem, and have data to back things up.
- Digg guy keeps track of what product marketers are promising to build.
- If developers give pushback because of technology they should be fired.
- Hire people that appreciate the skills of others.
- Worst project managers are ones who cater to every client need and bring everyone in.
- Hang out with colleagues and find commonality.
- Understand other peoples disciplines.
- Phrase things as challenges and not as features. Work together to find solutions.
- Conflict is a good thing. More friendly/healthy once you’re past it.

Keynote: Guy Kawasaki interviews Andersen (Wired)
- Big difference between $.01 and $.00. Charging creates value.
- Create celebrity status and sell it.
- Offer things free and try to get 5% of people to return the investment.
- Big cost is people leaving and doing something else.
- What motivates people? The negatives or the positives?
- Try something out, find out if you like it, and won’t be surprising when you have to pay for it.
- Brazilian example. Focus on what’s most important during time of crisis (ie. family, food, etc.).

Panel: Designing Change in America
- Building an airplane while in flight example. Short timelines, high expectations.
- Focus was on clear, concise messaging on “we” more than “he”.
- Communicating hope through imagery and not through text (ie. rainbow image).
- Established consistency and balance early in the process.
- Took Barack’s wordmark and modified the type.
- Elections are the equivalent of the Olympics of technology.
- Destroyed the fold in the website design.
- Open source style of government.
- Design should get a say in the strategy of a campaign.
- Respect, empower, and include.

Wireframe vs. Priority Map

Posted on February 26, 2009 in Design | comment bubble No Comments »

Over the past few months I’ve been asked to do an increasing number of wireframes for sites and in process I’ve been doing a lot of thinking about how they should be treated. Usually what the wireframe entails is me reviewing the information architecture and drawing a bunch of rectangles and squares in an Illustrator document. No color is ever used, no fancy typefaces, just boxes on paper to show layout. Which is precisely where I think the conflict arises. When most of our clients see a wireframe document, they assume that things are going to be positioned exactly as is on the wireframe, and I as the designer, instantly becomes limited in how I can treat the content when it comes to execution. Instead of the wireframe informing the design, it starts to dictate the design, which I think is the wrong path to go down.

I’ve had this conversation with colleagues and I’ve started trying to get them to think of wireframes in a different way. Instead of it being a document that shows where content is going to be positioned on the page, I have been proposing that we treat them as more of a “priority map”. For example, in a recent wireframe I did I had the normal stuff at the top (universal links bar, header, main nav), then underneath that I had a large block for mission stories and to the immediate right in a second column I had a news block stacked on top of an events block. The mission stories block took up 75% of the width of the page, which was a decision informed by the information architecture and discussed by the project team as being the most important thing that we wanted to say on the homepage. News and events were secondary items, and thus only received the remaining 25% of the homepage real estate for that particular row of content. Now I look at that and say to myself, “Maybe I don’t want to put news and events to the immediate right of the mission stories block, but I know that I have to give the priority majority to the mission stories block. That’s the most important thing.” So instead of the wireframe dictating design, it’s informing it, and telling me which areas should get more visual emphasis.

Unfortunately it’s a hard sell to tell our clients to not think about wireframes as structured design layouts. They tend to be reactionary people who see something and immediately want to assume, or worse yet, turn into designers. Perhaps I need to take my concept of a priority map one step further and stay out of Illustrator. Perhaps the solution would be to cut out the rectangles and squares individually and then move them around in a very loose and free-flowing manner either with or without the client present. Whatever way I decide to do it, the most important thing is that clients understand that I have been entrusted by them to give them guidance as to how to most effectively display their content on their website.

So move over rectangles and squares and get ready for the scissors.

Take Care of Your Files

Posted on February 20, 2009 in Design | comment bubble 3 Comments »

One of my biggest pet peeves is people who don’t manage their files well. Now I completely understand that everyone is different, and everyone has their own system that works for them, but seriously, do you need 100 icons on your desktop? At this very moment I have all my files divided into 2 different folders on my desktop, one is for all things associated with my Human Radiator brand, and the other is a folder containing all the work I do for Notre Dame. Inside the Notre Dame folder I have projects folders that I try to keep to less than 700MB in size, for the specific reason of easily being able to back them up to CD. Inside those project folders, all of my projects are labeled with name and the current year. That way I have an immediate sense as to when the project was started. On a sidenote, lately I have been adding a project number in front of the project name that corresponds with the project number that was assigned in our time/project management system.

Drilling down further, almost all of my project folders have the same core set of interior folders … assets, docs, and mocks. Inside the assets folder is where I keep all digital materials such as photography, iStock downloads, Illustrator or InDesign files, etc., that I use to create the mockup. Documents such as information architectures, wireframes, and written content fill the docs folder and are separated into appropriate sub-folders. Finally there is the mocks folder. Scanning the mocks folder you will typically find a subfolder labeled _Currents that houses all the most recent mockups for a client. The reason for the underscore is so that it is always at the top of the list. Also in that folder you will find folders labeled Round 1, Round 2, and so forth, that serve as a way for me to version my work, in case a client would ever come back to me and say, “Can we go back to 3 versions ago?” Finally, in this same mocks folder, I tend to keep a folder named scraps, where I typically put concepts and sketches that I didn’t think would work for the particular project I was working on, but may work for someone else.

The last thing about file management that I want to mention has to do specifically with how design files are handled in Photoshop. When I start a new web design project, the very first thing I do is set my 960px wide boundaries. To do this, I have a preset 960px wide by 100px tall box generated by Photoshop, I make it an obnoxious red or green color, I drag and drop it in my document, and then I strike a couple of guides. To complete that process I then create a new layer folder with the name “Borders”, throw the 960 block in it, and hide the visibility. From there, it’s a crapshoot when it comes to what objects I place where and what order the layers are in, but one thing always remains the same. When I create a new layer in Photoshop, the very first thing I do is label it. Nothing frustrates me more when I take a handoff from a fellow designer and all I see when I open the layers palette is a stack of layers named “Layer 1, Layer 2, Layer 3, and oh yeah, Layer 54 has an adjustment layer applied to it. Good luck finding it.” That system is inefficient and causes unnecessary stress for a fellow designer or developer who have to decipher the mysterious code that was established. Once I have the mockup complete, and all my layers have appropriate names, and I then group them as if they were a legend for the mockup, so developers can read it like a book from the top down when they are chopping it up and coding it. And finally, unless you want other designers and developers to pull their hair out as they watch the spinning pinwheel of death, please use adjustment layers and complex masks carefully, as they add a ton of file weight, and more often than not, the effect can be achieved the exact same way without using them.

Morale of the story … take care of your files. The system that I have developed for myself seems to be working quite well and I can’t remember the last time I had a complaint from a developer because my files were difficult to interpret. If I can prevent frustration simply by taking a second and adding a layer name or collecting things in a folder then by all means I am going to do it.

Being Stealthlike

Posted on February 13, 2009 in Daily Life | comment bubble No Comments »

I like to consider myself a ninja in training, constantly honing my stealthlike abilities, both at home and at the office. It starts in the mornings when I have to successfully get out of bed without waking my wife and our 3 month old son who is sleeping in the bassinet next to our bed. I quietly creep past him, go down the hall, and close my 2 year old’s door, all the while hoping that the hinges holding it on don’t let out an ear-piercing squeal. As I enter the bathroom directly across the hall and go about my daily bladder-emptying sequence, I cross my fingers as I gently push the toilet flush handle down. After the whooshing and swirling sounds have stopped reverberating off the walls, I listen intently to see if the natives have grown restless. Success. Everyone is still asleep. From there I jump in the shower and turn on the water, praying that my son thinks it’s just that daily downpour. After a quick drying session, I proceed to slip into my outfit for the day, all the while trying to not rattle my clothes hangers into an uncontrollable plastic chorus. Then I glide past my sleeping son and wife again, grab my glasses, and clench my phone with a death grip as I attempt to muffle the unhooking beep. With a surgeons precision, my fingers lift up my keys and they quietly clank together as they dangle and await the nerve-racking drop into my pants pocket. After a quick gazelle-like gallop down the hall, I slowly lift the plastic shopping bag that contains my lunch and mechanically slip my work bag over my shoulder. Finally I open my 2 year old’s door slightly, quietly whisper goodbye to everyone, and efficiently negotiate the creaky boards of our upstairs as if they are museum security lasers. Success. I’m downstairs and in the clear.

After packing up my lunch and nervously listening to the gears of our garage door grind, I gracefully pull out of the driveway and go off to work where I engage in a different kind of stealthiness. Donning my design ninja outfit, I quietly enter our basement offices, and fire up my computer. Unknowing clients and co-workers walk past my curvicle and say hi, never knowing completely what I’m doing as I sit hunched over my keyboard. I am quietly concepting video gallery interfaces, sketching out wireframe documents, designing site bugs, and changing the face of the web at Notre Dame. Without notice I emerge from the shadows of my glowing MacBook Pro and launch an attack on the social networking world, thrusting my conversational throwing star into the Twitter and AIM interfaces. While the rest of the campus leaves the comfort of their offices and goes out to enjoy lunch, I stay back, and with my stomach rumbling from sheer hunger I continue to plow my way through client projects and initiatives. I have complete radio silence throughout the day, with the exception of the occasional blasting of Rage Against the Machine or Metallica and the tension-relieving phone call from home, where I listen to the calming words of my wife or the incoherent sentences of my 2 year old. At the end of the day, with a cat-like reflex I close all software applications and dialog boxes, swiftly pull all cords from their respective outlets, and stride out of the office only revealing my presence with the parting words, “Have a goodnight gang.”

Fortunately, the pressure of being ninja-like subsides once I get home, until bedtime of course, and I can enjoy the freedom and chaos that comes from being a husband and father of two young boys. My son Jacob and I can wrestle and play cars on the floor, I can hold my son Lucas and watch him smile at me as I make sounds only frogs would make, and I can crash on the couch with my wife, with TiVO remote in hand, and peruse through numerous shows with robotic-type grace. Along the way, diapers are changed with the highest degree of calming smoothness, table scraps and crumbs are collected, temper tantrums are resolved, and the garbage is taken out under the cover of the late-evening Midwestern darkness.

The night has come once again and the warrior must once again appear. After engaging in online video game conflicts and tweaking freelance design projects while the rest of the world sleeps, I creep upstairs, and amongst the glow of a hallway nightlight and a harmony of snoring, I get ready for bed, only to wake up the next morning and do it all over again.

Back To Blogging

Posted on February 8, 2009 in Uncategorized | comment bubble No Comments »

Hello everyone. I know it’s been a long time and I apologize for the delay. Been busy at Notre Dame and raising my two boys. Now I’m back on the blogging circuit and I hope to spark ideas for creative writing.

Check this out