Archive for December, 2011

New WordPress Theme & WPBundle Birthday Discounts

WPBundle turns 1 year old today, and to celebrate we’ve added a new theme, and you can grab any individual theme for only $15, grab the full bundle for only $115. Full details, as well as a run-down of all of our themes are available here.

New Theme: Imminent

The introduction of our new theme Imminent brings our total number of themes in the Bundle to 14. Imminent is a “coming soon” or countdown theme with a live activity stream in the sidebar so that you can keep visitors up to date on any new products or websites you might be launching.

Buy Imminent Now $5 or Demo Imminent Theme or Dark Variation

Imminent Dark Variation

The Imminent Dark variation is optimised to be easy to use with large dark backgrounds. The transparent sidebar elements means that it’s super easy for you to create a whole new look simply by adding a new dark background image.

A very simple theme, but one that we think would be perfect for a “coming soon” or pre-launch page. Imminent offers a different approach to a static “coming soon” page, with a live activity feed in the sidebar. We’ve also made it super easy to integrate with Campaign Monitor, Feedburner etc.

Just a reminder, we’re also celebrating our birthday!

Buy Imminent Now $5


Mixing Up Illustration: Combining Analog And Digital Techniques





 



 


In the digital age, don’t forget to use your digits! Your hands are the original digital devices

Lynda Barry

People often ask how I arrived at a finished illustration. Honestly, it’s different every time, but it always starts with a hand-drawn sketch. Sometimes, I paint it completely by hand; sometimes I’ll scan in a pencil drawing. Many of my pieces are 100% analog that I’ll show only at shops or galleries. Use anything you can; if the illustration would work as a wood carving, go that route. There are concrete steps one can take, but they certainly don’t have to be the same every time. My goal is to take a sketch or idea as far as it can go — and also, to get out of my comfort zone and challenge myself with every new job. For this article, I’ll use handcrafted brushes and Photoshop as my tools.

Sketching It Out

Concepting for me always starts with pencil and paper. If there is one consistent element through all of my pieces, it’s sketching. I love to draw. If I could establish and execute everything with a single pencil drawing, I would. The best thing to do is keep some type of sketchbook or journal with you as much as possible. Milton Glaser said it best: “Drawing is visual thinking.� Drawing creates many possibilities for any idea you might have. It’s then when the character’s personality starts to emerge. Then, I’ll add some volume to the sketch to show where the textures should really come through.

Sketch It Out

Researching

This is the most underestimated part of the process, but one of the most important. Here, we’re assessing the sketch. What textures would work? What colors would work? It helps to look at your influences.

Some artists who always inspire me are Mary Blair, Alice Provensen, Charley Harper, Maurice Noble and Eyvind Earle. And there are so many ways now to catalog and bookmark historical artwork.

Also, if I’m drawing an elephant’s skin, or wood on a camera, or a band on a helmet, I’ll want to take a close look at the real thing. Google Images is quick, but if I have time I’ll run to the library. Sometimes I do this as soon as I have an idea. Really seeing what you’ll be working with helps.

Researching It image

Crafting Your Own Brushes

I do this because I want my brushes to be my own. Many great websites out there offer textured brushes for Photoshop. For me, the more unique these brushes, the better. Based on my sketch and research, I will have some idea of what I want to capture. I’ll use oil pastels, paint, paper towels, charcoal and anything else. It’s all about being resourceful — use everything. One more thing: when making brushes, the grittier the paper, the better. The more tooth it has, the more the marks will scan. It is for this reason alone I have to clean my scanner all the time.

Tools for Making Brushes

Crafting the Brushes

Pastel Marks on Paper for Brushes
Some rough crosshatching for the elephant’s skin, with an oil pastel on drawing paper.

Scanning It All In

Scan everything: the initial sketch, the textures, anything you’ve made to this point. I’ll keep anything that I don’t use at this point in a library, possibly to use for something else. I’ve set the scanner to 600 DPI at “Millions� of colors. If your scanner has a “Sharpen� setting, crank it to “High.� You can scan the sketches in black and white at 1200 DPI, or in grayscale since the brushes will be black and white. I’ve set the colors to “High� so that I can archive the files and use them for something else. Once everything has been scanned, let’s open the images in Photoshop.

Here is a scan of my original sketch. I scanned it in at 300 DPI because I will eventually be printing this piece.

Original Scan

Initial Brushes

Up the Levels

If you scan as black and white, you won’t need to worry about adjusting the levels. I’ve scanned in color, so I’ll increase the black and white values in Photoshop. The levels can be found in Images → Adjustments → Levels.

Defining Brushes In Photoshop

I recommend making each one of these brushes a separate file. For the resolution, you can go up to 2500 × 2500. It really depends on what the finished piece needs to be. For this exercise, I’ll select a portion of the scan and define a brush from it.

Selecting the Brush to Make

Define Brush in PS

From the menu drop-down, go to “Edit� and then “Define Brush.�

Name Selected Brush

Now that we have created a brush, we can name it. It will be added to our Brush palette.

Brush Added to the Palette

You can view the Brush palette by selecting the Brush tool. Look at the options toolbar, and you’ll see a thumbnail of the brush; you can pull this down to view the entire palette. From the menu arrow in the top right, you can save brushes you’ve created. Brushes are saved in Photoshop’s Presets/Brushes folder. You can also load brushes from this menu as well.

Selecting A Color Palette

Now that our brush set is in order, let’s start painting. For the color palette, I’ve researched my idols. Mary Blair and Alice Provensen are masters of color and shape. I always look at their use of color and design. Again, this is why research is so important. Study the people you admire, and analyze why you admire their work. I really like a somewhat muted palette, with some small areas of intense color. In my scanned sketch, I’ve added another layer and sampled the colors I’d like to use.

Color Palette

Making Shapes And Painting

Let’s go to the Paths menu and draw the shapes that we want to paint. From here, we create a “New Path� using the Pen tool, to define the shapes that we established in the sketch. So, let’s open the sketch that we scanned, select the Pen tool from the toolbar, and select “New Path� from the Path menu. Once the Path is saved, we use the Path tool (which is the Pen tool), and start tracing out our shapes. The image below shows all the paths I’ve created that I intend to paint.

Creating Paths

Let’s start by painting the shape that will be the background. From the toolbar, select the Path tool, and select a specific path.

Selecting an Individual path

Now that we’ve selected a Path, we can create a selection from that path. To do this, select from the pull-down menu on the right in the Paths menu. You’ll see an option named “Make Selection.�

Make Selection from Path

Once that’s selected, a dialog box will pop up asking for a radius to feather the selection; 0 is fine. Also, enable “Anti-aliased� and “New Selection.�

Make Selection from Path

Now that we have a selection, we can “Create a New Layer.� This layer will be specific to this shape. We’ll end up with many layers for each shape, but they will give us the flexibility to edit down the road.

Create a New Layer

Now that we have a new layer, and the Path is a selection, we can use a brush from the brush set that we created. Also, I’m still using the colors from the palette that I created earlier.

Painting Shapes

Here’s where the research, brush creation and painting all come together. Let’s paint the path on a “New Layer,� using the steps described above.

Painting Shapes

Painting within the shapes you’ve defined is a chance to experiment. You can try all kinds of things, like making the brush more transparent or painting over other textures. For me, it’s a lot of trial and error. This image below is a close-up of the brush I’m painting with.

Brush Close Up

After many painted layers, I end up with a piece that is digitally painted with hand-crafted brushes.

Finished Illustration

Other Resources

You might be interested in the following articles and related resources:

  • Illustrations of Alice and Martin Provensen
    Alice and Martin Provensen were a husband-and-wife illustration team. They wrote and illustrated numerous children’s books, including many little and giant golden books from the ’40s until Martin’s death in 1987. Alice continues to work as an illustrator.
  • “How to Steal Like an Artistâ€�
    An excellent article on creativity and life by the brilliant Austin Kleon.
  • The Drawn Blog
    A daily source of inspiration for illustration, animation, cartooning, and comic art.
  • Today’s Inspiration
    A great source for inspiration and the history of Illustration by Professor Leif Peng.

(al)


© David Mottram for Smashing Magazine, 2011.


Holidays Around The World: Smashing Photo Contest





 



 


Update 15 Dec 2011: Submissions are now closed! The winners will be contacted tomorrow and announced next week!

2012 is around the corner and the year is (already!) coming to an end. We’d like to know how upcoming holidays are celebrated in your city. Just send us a photo of your kind of Christmas or New Year’s Eve and with some luck you may be the winner of some truly smashing prizes! We’re giving away five wonderfully designed books as well as five golden tickets for our upcoming Christmas special bundles.

But I Don’t Celebrate Christmas…

Of course, not everybody celebrates Christmas, but there is still something special about the atmosphere that upcoming holidays create worldwide. You may take pictures of your office New Year decorations, a market in your town or even a winter wonderland you’ve discovered! You can also make a photo of a special event  —  an event that makes you relate to the year coming to an end, or even your list of your New Year’s resolutions, or anything else really. Just keep in mind to stay creative!

The Prizes

The best photos will be rewarded with one of the five books presented below. The winners can select which book they’d like to have. We hope that the book will be delivered in time before the holidays, but unfortunately we can’t guarantee it. We’ve found the books in a selection by Maria Popova over at Brainpickings. As mentioned above, we’ll also be giving away five golden tickets for our upcoming Christmas special bundles, meaning there will be ten winners in total! So… what are you waiting for?

Visual Storytelling
Stunning, ambitious, and thoughtfully curated, Visual Storytelling is part high-concept dictionary for a language of increasingly critical importance, part priceless time-capsule of bleeding-edge creativity from the Golden Age of information overload, the era we call home. Image source.

Moby-Dick In Pictures: One Drawing For Every Page
This artbook collects Matt Kish’s lo-fi drawings in a 600-page visual masterpiece of bold, breathtaking full-page illustrations that captivate eye, heart, and mind, inviting you to rediscover the Melville classic in entirely new ways.

Visual Complexity
A rigorously researched, beautifully designed, thoughtfully curated anthology of the world’s most compelling work at the intersection of these two relatively nascent yet increasingly powerful techno-cultural phenomena, network science and information visualization. Image source.

Radioactive: Marie & Pierre Curie: A Tale of Love and Fallout
In Radioactive: Marie & Pierre Curie: A Tale of Love and Fallout, artist Lauren Redniss tells the story of Curie through the two invisible but immensely powerful forces that guided her life: Radioactivity and love.

344 Questions: The Creative Person’s Do-It-Yourself Guide to Insight, Survival, and Artistic Fulfillment
A pocket-sized compendium of flowcharts and lists to help you figure out life’s big answers by ever-inventive designer Stefan G. Bucher.

Submission Guidelines

  • Your photo should have JPG format, a maximum size of 4000 x 3000 pixels and should not exceed 8 MB in size.
  • Each participant may send one photo at most.
  • You may take photos of anything or anyone, as long as it fits the theme of the contest and nobody is harmed. Don’t forget to mention the city where your photo was taken at!
  • Please name your photo with your full name (john-peterson.jpg)
  • Please do not send ZIP, RAR or other compressed archives — just the image.
  • You must own the copyright of the photo you are submitting.
  • Submit your photo to photos@smashingmagazine.com.

All selected photos will be published in an upcoming Smashing Magazine post. So, get your cameras ready and shoot!

Examples To Get You Inspired

Just to give you an idea and inspiration for your entry, here are some photos to get your creative juices flowing:

Photo Contest

Photo Contest

Photo Contest

Photo Contest

Deadline and Announcement

Please submit your photo by December 15th at the latest. The qualifying submissions and the winners will be announced a couple of days later after that. We will showcase the most interesting photos here on Smashing Magazine, including the names of the contributors.

Please note: your photo will be used only for this event, and you will retain the full rights to it.

Let’s Go!

On your marks. Ready? Set? Go! Send your photo to photos@smashingmagazine.com! We look forward to your photos, folks!

Wishing Y’all Happy Holidays!
 —  The Smashing Team

(sp) (il) (vf)


© Smashing Editorial for Smashing Magazine, 2011.


Adobe Illustrator Tutorial: Creating a Realistic Curtain


  

Adobe Illustrator has an amazing feature that allows us create many realistic illustrations. Today we will have the opportunity to practice with the Mesh Tool once again. We will use it to create an interesting damask curtain. The Mesh Tool will help us to create the illusion of the silk look of the curtain with a nice floral design. You can use this simple technique to create similar illustrations (a waving flag, for example).

So, let’s get started on this new Adobe Illustrator tutorial.

The final result should look something like this.

Creating the Floral Pattern

There are numerous patterns you can create to apply to the curtain. We will make a nice and interesting floral design. Creating the floral design is actually very simple. The only thing you have to pay attention to is creating smooth paths and symmetrical shapes. We will be using the Pen Tool (P), Ellipse Tool (L), Blend Tool and some other very useful Adobe Illustrator features. First we will prepare a few brushes that we’ll apply to some simple shapes.

Grab the Ellipse Tool (L) from the Tool Panel and create a circle.

Duplicate it (Ctrl / Cmd + C, Ctrl / Cmd + F) and place it as it’s shown on the picture below (hold the Shift key on the keyboard for straight dragging).

With the Ellipse Tool (L) create an ellipse and place it in the middle.

Select all the elements and under the Pathfinder Panel hit the Unite button. It will unite all the elements into one shape.

Create another circle and place it as shown in the picture below.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the red circle and move it to the right. Make sure to align the elements properly. Under the Pathfinder Panel hit the Minus Front button.

Grab the Ellipse Tool (L) again from the Tool Panel and create a small circle. With the Direct Selection Tool (A) grab the lower anchor point and drag it downwards (hold the Shift key on the keyboard to ensure straight dragging).

Drag and drop the shape we have just created to the Brush Panel. The New Brush window will pop up. Make sure to check the Art Brush box.

In the Art Brush Options window make sure to set the Colorization Method to Tint. It will allow you to change the color of the brush directly, without expanding the objects.

This way we have created the brush that we will use a little bit later.

Now, grab the Pen Tool (P) from the Tool Panel and create the path as pictured.

Set the Stroke to 5pt.

Now we are going to turn the path into an editable shape. This is going to allow us to adjust the positions of some anchor points. Under Object select Expand. Grab the Direct Selection Tool (A) from the Tool Panel and try to adjust the shape as it’s shown.

This is also one of the shapes we will use a little bit later.

Now, let’s create a small leaf. To do that we will be using the Ellipse Tool (L). Create a circle (hold the Shift key on the keyboard for the proper circle). With the Direct Selection Tool (A) select the upper anchor point and drag it upwards (Shift for straight dragging).  With the Convert Anchor Point Tool (Shift + C) turn the top of the shape into the sharp corner.

Grab the Pen Tool (P) from the Tool Panel and create the shape shown below.

Select both shapes and under the Pathfinder Panel hit the Minus Front button.

For the next floral element we will use the Pen Tool (P). Draw the path as it is shown on the picture below.

Set the Stroke to 5 pt and expand the path under Object > Expand.

With the Direct Selection Tool (A) adjust the positions of the anchor points and the angle of their handles. Try to create something like this.

There are numerous shapes we can create this way. Just use your imagination and make sure to create smooth shapes.

Let’s put our elements together and try to create a nice looking floral pattern.

Grab the Arc Tool from the Tool Panel and create the arc as shown in the picture below.

Reflect the arc by using the reflecting feature under Object > Transform > Reflect. Set the Axis to Vertical and hit the OK button.

Make two more copies (Ctrl / Cmd + C, Ctrl / Cmd + F) of the arc and place them like they are below.

With all arcs selected, choose the brush from the Brush Panel that we made earlier. You should end up with something like this.

Continue arranging the shapes we have already made.

Each time we add a new shape to our illustration we will use Reflection to create a mirror image in order to create a symmetrical illustration. In the same time make sure to align all of the elements to be centered.

Grab the Ellipse Tool (L) from the Tool Panel and create a circle . With the Add Anchor Point Tool (+) add one anchor point like we’ve done below.

With the Direct Selection Tool (A) select the new anchor point and remove it by hitting the Delete key on the keyboard.

Remove the Fill color and apply the brush we have made earlier.

Place the new shape as it shown on the picture below.

You can also add three flowers to make this part more interesting.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the curved path with the brush and scale it down little bit.

Grab the Ellipse Tool (L) one more time and create a circle.

With the Pen Tool (P) create a path as you can see done on the picture below.

Select the circle and the red path and under the Pathfinder Panel hit the Divide button. Ungroup the (Shift + Ctrl / Cmd + G) divided circle and remove one part by hitting the Delete key on the keyboard. Place the new shape as it shown on the picture below.

Select the new elements on the right side of the floral design and under Object select Transform > Reflect. Set the Axis to Vertical and hit the OK button. Place the copies on the left side.

Using techniques from previous steps create new elements.

Let’s create one more interesting detail for our floral design. Grab the Ellipse Tool (L) from the Tool Panel and create a small circle. Duplicate it (Ctrl / Cmd + C, Ctrl / Cmd + F), scale it down and move it to the right.

Select both circles and under Object select Blend > Make. To set the number of the circles that are going to appear between these two circles under the Blend Tool set the Spacing to Specified Steps and the value to 15. It will create 15 circles in the middle.

Now we are going to use the Arc Tool again. Create the arc, select it within our line of descending circles and under the Object select Blend > Replace Spine. It will arrange the circles to follow the path of the arc.

Using the same technique, create a few more interesting details and complete our floral design.

Creating the Curtain

Now when we have our floral design ready and set, we can move on and create the illustration of a fancy curtain.

First of all we are going to grab the Rectangle Tool (M) from the Tool Panel and to create an arbitrary rectangle.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the rectangle and lock the layer with the original rectangle. We are locking it to make sure not to distort it during our creation process.

Now grab the Mesh Tool (U) and make sure to add new anchor points to the rectangle by clicking exactly on the edge of the rectangle.

Keep applying new anchor points randomly.

Now we are going to apply different tones of gray color to the anchor points. Select the Direct Selection Tool (A) from the Tool Panel and by selecting each individual anchor point apply the gray color. Just make sure to apply the same tone of the gray color to the opposite anchor points.

With the Direct Selection Tool (A) try to adjust the angle of the handles of each anchor point. Just feel free to play around until you create smooth folded parts of the curtain.

When you are satisfied with the result unlock the layer we locked earlier and set the Fill color of the rectangle to #8DC63F. Now we are going to change the Blend Mode of the layer with the Mesh to Hard Light. This will change the color of the curtain to a nice green. Feel free to try out other Blending Modes until you achieve a nice result.

At this moment we will add the floral pattern we created earlier.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the floral shape we made earlier and place it as shown on the picture below.

Don’t forget to align the shape by using Vertical Align Center. Select both shapes and under Object select Blend > Make. It will create a few more floral elements in the middle. To set the exact number of the floral elements we need to bring up the Blending Options box. To do that go to Object > Blend > Blend Options. Set the Spacing to Specified Steps and the value to 3.

Turn the result into an editable shape by selecting Object > Expand.

Duplicate (Ctrl / Cmd + C, Ctrl / Cmd + F) the row of floral elements and place them as they are below.

Repeat the previous step. To make sure to create equal distance between the rows select all the elements and under the Align Panel hit the Vertical Distribute Space.

Group (Ctrl / Cmd + G) all the elements and place them on the top of the curtain we already created.

Make sure to set the Fill color of the floral elements to #58595B and under the Transparency Panel set the Blending Mode to Overlay. Feel free to try out a combination of Fill colors (make sure to use a gray color, just change the tone) and different type of Blending Modes. You should end up with something similar to this.

Select all the elements we have created so far and Group them (Ctrl / Cmd + G). Grab the Rectangle Tool (M) from the Tool Panel and create the rectangle.

Remove the Fill color and the Stroke color of the rectangle. Select all the elements and under Object select Clipping Mask > Make. It will hide all the elements outside the new rectangle.

This is actually the final result of our vector illustration.

Feel free to use different colors, shapes and angles. The results can be very interesting.

Conclusion

Today we had the opportunity to use the Mesh Tool for creating a 3D illusion for the curtain in vector format. As you can see we didn’t experiment with lots of colors. The most important thing is to find the right balance between different tones of gray color. Blending Mode will do the rest. There are numerous textures you can create. Just be creative. If you happen to have any questions or comments please post them in the comment section below. It would be nice to see your achievements as well. I hope you like this tutorial. Feel free to visit other Mesh Tool tutorials: Create a Halloween Ghost with Mesh Tool and Christmas Greeting Card for more practice. Thank you for following along.

(rb)


Effective User Research And Transforming The Minds Of Clients





 



 


Ah, the love of a client. That is indeed what we all seek as professionals, is it not? If we lived in a utopia, then that’s all there would be. Openness. Honesty. Passion. Flowing in both directions, client to service provider and vice versa. We want our clients to be right behind us in our ideas and open to new ones. In order for this to happen, there has to be trust.

Clients that deal with large agencies tend to place their trust in the big brand names of these shops. Freelance designers and small agencies do not always inspire the confidence in clients that large shops do, which means that trust has to be built, nurtured and never taken for granted.

So, what tools do freelance designers and small agencies have at their disposal not only to get a client on board with their ideas, but to inspire them and encourage buy-in from other stakeholders in the client’s company? We’ll take a look at few of them in this article.

Getting a Win-Win

Getting a win-win is when you deliver solutions that address the client’s business problem. The client should respond to your ideas with respect, placing their trust in ideas that they may not immediately identify with, and turning down ideas they intuitively know will not work. We must be able to respond with the same respect and trust, allowing some of our ideas to fall by the wayside and letting others shine.

Keep in mind that challenging opinions is OK, especially ones that are bound to fail. In this type of relationship, both parties handle tension objectively, putting aside personal feelings, to complete the goal. Indeed, this well-oiled platform allows for the creation of amazing work. So, how does a win-win transpire? It transpires through actions, research and delivery.

Actions: Engaging Your Clients

The way that the teams from the client and agency engage with each other is critical. First and foremost, be what you want your client to be. If you want them to be honest, be honest. If you want them to be passionate, show your passion. They may not immediately reflect your enthusiasm, but they will feel it, and over time it will reinforce your efforts. This is Client Relations 101 and should not be ignored.

Often, though, this honesty, enthusiasm and passion aren’t enough. One of the stakeholders might have wanted another contractor to win the bid, or a variety of other issues might prevent the relationship from maturing. At this point, get the client to stop thinking about any perceived shortcomings, and get them to think objectively about the problems they’re facing, with you as the catalyst for solving them.

When we come across a resistant client, we look to customer insight as the means to help the client focus on the user and the business problems that need to be solved. By discussing these in a controlled, test-driven environment, the biases of both the client and agency are eliminated, and the issue becomes how to objectively solve the problems together.

Research And Customer Insight: The Objective Problem-Solving Approach

Before diving into ways to use customer insight to guide a project, I’ll go over the types of research methodologies and testing protocols that my firm commonly uses. These include ethnography (a research method from the social sciences that involves field research and up-close observation in the user’s environment), heuristic evaluation (a form of usability inspection, in which usability specialists judge whether each element of a user interface follows a list of established usability heuristics), focus groups, surveys, prototyping, usability testing, user interviews and more.

These methodologies yield valuable data, and from this data we can build persuasive artifacts to convince the client of strategies that we know have a high probability of success in the real world. In addition to customer research, stakeholder interviews can be invaluable in highlighting, and gaining consensus on, the scope of UX engagement.

Some of the research methods described above can be extensive and could require the client to commit some of their budget. But conducting research up front to understand customers and what they want is less expensive than spending time and money correcting a solution after it has launched. If the client does not have a budget that supports social science research, then light inexpensive testing can be performed. Nothing is wrong with heading to the nearest coffee shop, finding five to ten people in your target demographic and asking them contextual questions or giving them a run-through of a proposed solution. This is generally enough to make a case for change.

Case in Point

My company was recently hired by Boeing Commercial Aviation Services, the services arm of Boeing, to help transform its customer portal, MyBoeingFleet.com. As part of this transformation, we conducted a large ethnographic research project. It was a huge endeavour, with more than 150 users interviewed around the globe. Though large in scale, it gave us valuable insight into Boeing’s users, enabling us to identify challenges within its existing customer portal. Once we obtained the data, we analyzed it in detail and created a series of artifacts to help the Boeing team clearly understand what we had learned. These artifacts and deliverables also served to convince the Boeing team of our capabilities and expertise, as well as help sell the project to key internal stakeholders.

Upon completion of the ethnographic study, we created a document called SUDA, or “system, user and domain audit.� This comprehensive document detailed the results of the ethnographic research, transferred knowledge of fundamental UX processes, and compiled our findings into persuasive artifacts. This was then presented to all major stakeholders. Two primary artifacts in the SUDA helped to convince our clients and other stakeholders not only to trust us, but to become our champions: those artifacts were the personas and customer journey maps.

These deliverables are a turning point in translating the user research into design. In addition, you will need to develop other artifacts, including wireframes, which must be thoroughly understood before any design work begins.

Personas

Personas are artifacts commonly produced by agencies that perform research. They are key tools for creating empathy among everyone involved in the project. They consist, by definition, of an archetype that represents the needs, behaviors and goals of a particular set of users.

One of my favorite examples of personas is the diptychs of Jason Travis. While not typical personas, which are generally accompanied by a textual explanation of the archetype, they still convey a user’s state of mind through the objects they carry. In order to build something for someone, you must first put yourself in their state of mind; this is one of the definitions of empathy. In the diptych below, you can quickly gauge how the person might think based on what they are carrying. A tremendous amount of information is conveyed through these objects.

Diptych
One of the diptychs of Jason Travis.

The challenge in developing personas for the Boeing project was the sheer scope and number of users. It could have easily led to 30 different archetypes, which would have been too many for the stakeholders to consume. To make our findings more digestible, users were divided into four major groups based on their activity or goal with the portal. Each group received one to five personas, based on real users. This was incredibly useful, because it enabled our team not only to construct a general archetype, but to expand on subtler aspects of the archetype through actual users. In the end, we had four archetypes, and nine total users to support those archetypes.

With these personas, we could attach a face to the actual navigation flows and interactions in Boeing’s customer portal. Our goal was to elicit empathy in our client and get them to feel the precise emotions their users felt so that they’d be willing to change the product for the better. To accomplish this, we chose to demonstrate the flows through customer journey maps.

Customer Journey Maps

Customer journey maps are graphs that demonstrate a user’s level of confidence and patience when performing various touch points in an interaction flow. Data is provided from an interview in which the user is guided through a particular task. As they move through the flow, we ask them how they feel at key intervals. For instance, if they are being guided through a shopping flow, we would let them perform the actions required, but when they click the “Buy now� button, we would ask how they feel about the process so far. They might be very frustrated or at relative ease. These feelings are then recorded, which gives us an emotional rhythm we can graph over time. Displaying the emotional journey in this way makes it easy for clients to understand, and it sometimes reveals shocking pain points.

Customer Journey Map
An example of a customer journey map.

For Boeing, the journey maps were eye-opening. By getting a visual representation of the emotional state of their customers, the client suddenly understood how important planning the user experience is to the product development process — and not only for the development phase, but for overall customer service as well. Presenting these and all of the other findings in the SUDA enabled us to begin tackling the design phase objectively, hand in hand with the client.

Delivery: Design And Interest Curves

There is a cognitive science theory called the “aesthetic usability effect.� It states that functional objects that look appealing inspire confidence in users, imparting in the users a higher tolerance for faults, a higher likelihood of overcoming learning curves and a slew of other benefits over less appealing alternatives. This is true even if the objects are actually harder to use! The theory also applies when you present your ideas and solutions to a client. Once you’ve prepared your materials, it is time to present them to the client. The more appealing the delivery, the more likely the solutions will be accepted.

Delivery is a critical moment in the transformation of a client’s attitude. If at all possible, make it face to face, and bring any executive-level sponsors from your company with you. With Boeing, we took our time to make sure that what we presented was visually appealing and well organized. Paying close attention to delivering the content builds trust; sloppy work will only work against your objective. Because most of you are designers, I am sure your presentations are incredibly visually appealing, but how do you construct your content so that it has the most impact? My advice: use interest curves.

Interest curves set the timing, or pace, of when to introduce various moments into your presentation. Take the following curve:

Poor interest curve

This shows interest points over time. It is also a poor interest curve. Now look at an optimal interest curve:

Optimal interest curve

You can see that you want to start off the presentation with something that immediately captures the attention of the audience. From there, slowly build to a climactic point (for us, that would be the journey maps), and end the presentation quickly thereafter. This will keep the audience simmering for more, and it generally leaves a great impression. This type of curve can be found in many forms of entertainment, from rock concerts to movies, and, for whatever reason, our minds are tuned to this pacing of interest. To create further interest, these curves can be embedded within each other, as the following graph demonstrates:

Fractal interest curve
Fractal interest curve

The point is, keep the client hooked with undulations of interesting moments, and make those moments grow in intensity until you impress your final point deep into their subconscious.

For The Win: Actions, Research And Delivery

Through your actions, by gathering customer insight and by creating meaningful, engaging visuals and deliverables that support your strategy, not only will you have concrete data to inform your designs and the project’s direction, but you’ll likely achieve that win-win. Getting clients on board with your recommendations translates to a more productive, successful project for everyone.

Good luck in transforming the minds of your clients!

(al)(fi)


© Leonard Souza for Smashing Magazine, 2011.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress