One of the most common CSS questions is undoubtedly how to center an element vertically. There are several techniques for doing that, but many, including one that I posted more than seven years ago in Centering with CSS, rely on specifying a height for the centered content. That obviously makes the technique somewhat inflexible.
I recently needed to center something both horizontally and vertically and started thinking that there might be better ways of doing it if I could disregard IE7 and older. The technique I ended up with uses display:table to center the whole page and seems to work well, though there is one caveat.
When it comes to designing in Photoshop, there is a myriad of ways one could use to achieve a certain result, especially when it comes to photo retouching. Designers use technique they are most confident as well as comfortable with, which is great because it’s always useful to peek into the workflow of our colleagues and learn new design approaches. We have had articles on cloning, compositing, masks and obscure Photoshop time-savers in the past. This article is different.
I’ll be covering some of the useful techniques and tricks which I’ve learned from my experience. You may know some of them, but hopefully not all of them. All images used in this article were purchased and are used according to their licenses. The second part of this post will be published in 2 weeks.
Here is a short overview of the techniques we’ll be covering:
The light of the sun creates texture. There are shadowy areas and spots where the sunlight can shine without interference. To control the intensity, you can draw more light onto a separate layer or increase already existing light. Create a new layer by going to Layer → New → Layer, or by pressing Shift + Control + N on Windows or Shift + Command + N on a Mac. Set the blending mode to “Color Dodgeâ€� and the opacity to about 15%.
Increase light on a separate layer.
Then use the brush tool with a soft brush, and hold the Alt/Option key to pick up colors from the area that you want to brighten. Continue to brush in some light, picking up appropriate colors if the background changes. This way, you increase not only the light, but the saturation, which makes for more realistic results.
The blending mode “Color Dodge� creates realistic results.
Simulate Infrared Images
Open a photo in Camera Raw; you can do this either in Bridge, using the right mouse key and clicking “Open in Camera Raw,â€� or directly in Photoshop, by selecting File → Open as Smart Object. Apply basic adjustments to optimize your image (for example, with the “Recoveryâ€� and “Fill Lightâ€� slides), then switch to the “HSL/Grayscaleâ€� tab. Check “Convert to Grayscale,â€� and set the Blues down to around -85. Set the Greens to +90 and the Yellows to +20.
Trees and bushes should now shine in the typical white, and the sky should appear almost black. If you want to go on and simulate some grain, switch to the “Effects� tab, and enter 15 for the amount, 20 for size and 80 for roughness. You could also apply a “Vignette.� Here I used -30 for the amount, 40 for the midpoint and -35 for roundness.
It’s almost like an infrared image.
Levels
When applying a “Levels adjustment,â€� you can set black and white points in order to decrease color tints, but where are the darkest and brightest spots in the image? Go to New Adjustment Layer → Threshold to find those areas. This function is available under the “Layerâ€� menu.
Move the slider so far to the right that only a few white spots remain in the document. Use the “Color Sampler tool� and set down a point there. Move the slider to the left until only a few black spots remain, and set a second point down there.
One could also find a neutral gray in the image by using a “Threshold adjustment layer.â€� Add a new blank layer between the original image and the threshold adjustment layer, and fill this layer with 50% gray. Go to Edit → Fill or press Shift + F5, then select “50% Grayâ€� under “Contentsâ€� and click “OK.â€�
Here is the threshold adjustment layer at work.
Change the blending mode of this layer to “Difference.� Select the “Threshold adjustment layer� again and move the slider all the way to the left. Slowly move the slider back to the right until black dots start to appear. These are the neutral gray areas in the image (if neutral grays are present). Add a “Color Sampler spot.�
Now delete both the threshold adjustment layer and the 50% gray layer. Create a new adjustment layer, “Levels.� Use the first Eyedropper tool to click on the darkest area, then use the third Eyedropper on the brightest area.
Here’s a before-and-after comparison.
Now you can use the gray Eyedropper tool on the third Color Sampler spot. The color tint will be decreased. Color Sampler spots can be deleted by dragging them off the canvas with the Color Sampler tool.
Color Look With An Adjustment Layer
Go to the Layer menu, and then New Adjustment Layer → Hue/Saturation, and set the blending mode to “Soft Lightâ€� and check “Colorize.â€� Use the Hue, Saturation and Lightness sliders to control the color: for a cool look, for example, set the hue at 210, the saturation at 50 and the lightness at 10; for a warm look, set the hue at 30, the saturation at 30 and the lightness at 5.
Here is Hue/Saturation and Color Fill.
Alternatively, you could use several color layers. Create them from the layer palette with the “New Fill/Adjustment Layer� button. Choose a color, then set the blending mode to “Vivid Light.� Reduce the opacity to about 12%, and invert the layer mask with Control/Command + I. Paint in the colored light with a big brush and white color. This works especially well for the lighting in portraits that have a textured background.
Here’s the Color Look with an Adjustment Layer.
Controlling Mid-Tone Contrasts
To increase detail in landscape shots, boost the mid-tone contrast. Copy the background layer with Control/Command + J, and then click on Filter → Convert for Smart Filters in the menu. Then go to Filter → Other → High Pass and enter a radius of 3 pixels. Change the blending mode to “Overlayâ€� and double-click the layer next to its name to open the “Layer Styleâ€� window.
Layer Style window: This Layer
For the first gradient, “This Layer,� split the sliders by holding the Alt/Option key and trim the layer effect to the “50/100� and “150/200� ranges. As soon as you move the sliders, you’ll see where those numbers are. This increases contrast only for the mid-tones. Double-click the “High Pass� filter in the layer palette to bring the dialog box up again in order to adjust the radius to your liking.
Check out these mid-tone contrasts.
Sunset
A sunset, especially at sea, can be an amazing color spectacle. The hues will depend heavily on the weather, though — but you can push them a bit with a gradient map. Click on the “New Fill/Adjustment Layerâ€� button in the Layer palette and select “Gradient Mapâ€� from the list. Click on the gradient to open the “Gradient Editor.â€�
Gradient Map
Click on the first color patch below the gradient, and change the color to red. Set the color patch on the opposite side to yellow, and click “OK.� Set the blending mode to “Soft Light� and reduce the opacity to about 50%. This will create a warm, almost golden sunset.
Observe the movement from a blue to a golden sunset.
Creating Smiles
Roughly select the area around the mouth with the Polygon Lasso tool. Go to Select → Modify → Feather, and enter a radius of 10 pixels. Confirm, then click on Layer → New → Layer via Copy (or press Control/Command + J), then Edit → Puppet Warp. Photoshop will put a mesh over the entire layer in the shape of your previous selection.
Here’s the mesh over the layer.
You can control the size of the mesh with the “Expansion� value in the Options bar. Increase the density to “More Points� for increased precision. Press Control/Command + H to hide the mesh, then set the first pins to the corners of the mouth. Add more pins to distinctive spots of the mouth. By clicking and dragging the mesh, you can shape a nice smile.
Colorful Water Drops
Macro shots of water drops are appealing, and shapes can be further accentuated with discreet coloring. You could treat the bland surface with a linear gradient from #772222 (RGB 119, 34, 34) to #3333bb (RGB 51, 51, 187). If the photo is on a layer of its own, click on Layer → Layer Style → Gradient Overlay or double-click the layer next to its name.
Layer Style: Gradient Overlay
Set the blend mode to Color, the opacity to 50%, the gradient to “Foreground to background color� and the angle to 90%. The gradient will be saved as a layer style, so you can come back at any time to adjust the values. Double-clicking the style name opens up the dialog window once more.
See the colorful drops with optimized colors.
Skin Color
If the skin is not quite perfect after retouching, it might be because of the general hue. You can control it by going to New Adjustment Layer → Hue/Saturation. Click on the miniature mask, and press Control/Command + I to invert the mask.
Adjustment Layer: Hue/Saturation
Using white color and a soft brush, paint over the skin areas so that only they get treated. For the adjustment, switch from Standard to “Reds� (found in the Hue drop-down menu of the Adjustment layer), and use the Hue, Saturation and Lightness sliders to adjust the skin color. Switch to “Yellows� and optimize the skin tone. Getting the colors exactly right depends very much on the image material. Rely on your common sense.
Optimized skin tones
Matching Skin Tones
A sunburn or a blush can disrupt a portrait, especially if there is a contrasting pale person nearby. Photoshop has a tool to correct that: “Match Color� offers control over skin tones. Open your image and use the Quick Selection tool to roughly select the red skin areas.
You can hold down the Alt/Option key and subtract areas from the selection. Click on Select → Modify → Feather and enter a value of about 15 pixels. Use the Control/Command + J shortcut to copy the selection to a new layer.
Adjustments: Match Color
Using the same technique, copy the non-reddened skin to a new layer. In the next step, you’ll have to differentiate between the source layer and the layer to edit, so rename these two layers meaningfully; all it takes is a double-click on the layer name. You could use the naming scheme shown here and call them “Beautiful skin� and “Reddened skin.�
Activate the layer with the red skin, and select Image → Adjustments → Match Color from the menu. For “Source,â€� select the current document, and for “Layer,â€� select the one with the beautiful skin. Control the effect using the “Luminanceâ€� and “Color Intensityâ€� sliders in the Image Options area. Once you confirm, you can control the effect’s strength with the Opacity slider.
Paler skin after Match Color
Reducing Noise
Noisy images are annoying. One way to reduce noise is through the channels. Copy the background layer by pressing Control/Command + J, switch to the Channels palette, and select the channel that shows the least noise. Drag that channel down to the “New Channelâ€� icon (next to the trash can) and go to Stylize → Find Edges. Then apply a Gaussian Blur with a radius of about 3 pixels.
Look at this copy of the red channel.
Click on the new channel’s miniature icon while holding the Control/Command key to select the content. Activate the “RGB channel� (top-most), and switch back to the Layers palette. When the duplicated background is selected, click on the “Add Layer Mask� icon.
Click on the Layer Miniature icon, and select Filter → Blur → Surface Blur from the menu. Play around with the Radius and Threshold sliders until the noise has been reduced as much as possible. Thanks to the mask you created, the contours are safe.
With and without noise
Retro Look With Curves
Go to Layer → New Adjustment Layer → Curves and switch from RGB to Reds. Then drag the line downwards a little for the shadows and upwards for the highlights, creating a slight “Sâ€� curve. Do the same for the Greens. For the Blues, drag the highlights down a little and the shadows up (for an inverted S shape). The shadows should now be slightly blue-ish, the highlights slightly yellow-ish.
Adjustment Layer: Curves
Create a new layer with Shift + Control/Command + N, and fill it with #000066 (RGB 0, 0, 102). Set the blending mode to “Exclusion.� Now copy the background layer by clicking it and pressing Control/Command + J. Set the blending mode for this copy to “Soft Light.�
To decrease the effect overall, activate the top-most layer and then click on the background copy while holding the Shift key, thereby selecting both layers. Alternatively, you can add them to a group with Control/Command + G. Reduce the layer’s (or group’s) opacity. Note that in Photoshop versions prior to CS5, you’ll have to reduce the opacity for each layer individually.
Achieve a simple retro look in a few steps.
Identifying Layers
If you’re ambitious with your collages, then you’ll be familiar with this problem: meaningful layer names are often neglected during the creative process. This can result in layer names like “Layer 4� and “Layer 5 Copy 2,� which are not very helpful when you need to quickly identify the contents of a layer.
Photoshop offers a number of solutions for our laziness. For example, you can click on the element you want to select by using the “Move tool� and holding the right mouse key; you’ll see which layer contents are below the tool. Photoshop will display a list in a drop-down menu, from which you can easily select the desired element.
Right click with the Move tool
Control/Command + left-click with the Move tool selected and, in most cases, you’ll select the corresponding layer of the element that your mouse is over (unless Photoshop can’t distinguish between the multiple layers).
You could also Control/Command + left-click on a layer’s miniature icon to get a selection of the content of that layer. The marching ants will show you what is on that layer and where it is.
Another option is to click on the Layer palette’s Options icon, in the top-right corner, and select “Layers Palette Options.� From here you can adjust the size of the layer’s miniature preview and concentrate the miniature’s content to the layer’s bounds, which should cut down on future guesswork when it comes to layer contents.
Layers Palette options
Conserving Resources
Plug-ins save time, but they’re a bit resource-hungry; at least, they lengthen Photoshop’s start-up time. Your plug-ins might have functionality that you rarely use, so deactivate them until you need them. To do so, create a new folder by going to Adobe → Adobe Photoshop CS5 (or whatever your version) and name it something like Plugins_deactivated.
After disabling some plug-ins.
Now move all of the extensions that you don’t need for the moment. When you restart Photoshop now, those plug-ins won’t load, so the program will start up quickly. Your RAM will be relieved. Because you neither deleted nor uninstalled the plug-ins, they’re available to use anytime. If you need them, just move them back to the plug-in folder.
Classy Sepia Look
The sepia look is an absolute classic. To enhance a black and white image with a classy sepia tone, follow these steps. Click on Layer → New Adjustment Layer → Photo Filter, and select the Sepia filter, with a density of 100%. Double-click the layer (not the layer name) to open up the Layer Style window. This will show the Blending options.
A view of the Layer Style window.
At the bottom of the dialog box for the first gradient, move the white slider to the left while holding the Alt/Option key. This creates a smooth transition between adjusted and unadjusted areas. The sepia will now look elegant.
Subtle sepia
Precise Positioning
I’m sure you’ve often been irritated by Photoshop’s tendency to position elements on its own, but the program is just trying to help you align an element that is on its own layer with the outer edge of the document or with the edge of another object. To your frustration, the layer’s content will jump to the edge, even though you wanted to leave a few pixels of space in between. You can temporarily deactivate the automatic snapping by holding the Control/Command key as you position.
A banner, close to the edge.
Applying Layer Styles Multiple Times
Usually, layer styles can be applied only once. For example, if you click on Layer → Layer Style → Drop Shadow, you cannot create a double drop shadow, one of which has an angle of 120°, a distance of 2 pixels and a size of 2 pixels, and the other of which has an angle of 180°, a distance of 12 pixels and a size of 12 pixels.
Actually, it is possible! It just requires a little detour. Create the first drop shadow as you normally would. Then right-click on the layer and select “Convert to Smart Object� from the menu. This smart object can be assigned another drop shadow, and you can convert the smart object into yet another smart object. This way, you can easily add a third and fourth drop shadow. Alternatively, you could apply multiple strokes.
Three shadows in combination.
By the way, to put one or even several styles onto their own layers at once, right-click on the FX symbol and select “Create Layer� from the list. Now you can apply filters to these styles, but they won’t be editable anymore.
User experience design for the Web (and its siblings, interaction design, UI design, et al) has traditionally been a deliverables-based practice. Wireframes, site maps, flow diagrams, content inventories, taxonomies, mockups and the ever-sacred specifications document (aka “The Spec�) helped define the practice in its infancy. These deliverables crystallized the value that the UX discipline brought to an organization.
Over time, though, this deliverables-heavy process has put UX designers in the deliverables business — measured and compensated for the depth and breadth of their deliverables instead of the quality and success of the experiences they design. Designers have become documentation subject matter experts, known for the quality of the documents they create instead of the end-state experiences being designed and developed.
When combined with serial waterfall development methodologies, these design deliverables end up consuming an enormous amount of time and creating a tremendous amount of waste. Waste is defined as anything that is ultimately not used in the development of the working product.
Engaging in long drawn-out design cycles risks paralysis by internal indecision as well as missed windows of market opportunity. Image by opensourceway.
As organizations struggle to stay nimble in the face of an ever-changing marketplace that is disrupted constantly by incumbents as well as start-ups, getting to market fast becomes top priority. Engaging in long drawn-out design cycles risks paralysis by internal indecision as well as missed windows of market opportunity. In other words, by the time the company decides internally how the product should be designed, the needs of the marketplace have changed.
Waterfall software development looks something like this:
Define → Design →Â Develop →Â Test →Â Deploy
The design phase typically breaks down like this:
Wait for requirements definition to take place and get approved → Consume requirements documents → Develop high-level site maps and workflows → Gain consensus and approval → Develop screen-level wireframes for each section of the experience → Present to stakeholders and gain consensus and approval → Create visual designs for each wireframe → Present to stakeholders and gain approval (after repeated cycles of review) → Write The Spec, detailing every pixel and interaction → Usability test for future improvements → Hand off to development for review, approval and start of implementation
This phase can take anywhere from one to six months depending on the scope of the project, leaving many wasted hours and much designer frustration in its wake.
Enter Lean UX.
Lean UX
Inspired by Lean and Agile development theories, Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.
Traditional documents are discarded or, at the very least, stripped down to their bare components, providing the minimum amount of information necessary to get started on implementation. Long detailed design cycles are eschewed in favor of very short, iterative, low-fidelity cycles, with feedback coming from all members of the implementation team early and often. Collaboration with the entire team becomes critical to the success of the product.
Interestingly and not surprisingly, one of the immediate casualties of Lean UX is the stereotypical solitary designer, working silently in a corner for a period of time, inviting only occasional peeks at their work before it’s “done.� This mindset is also the biggest obstacle to wider adoption of this practice.
Let’s take a look at the Lean UX process:
Stay lean and focus on the experience, not the paperwork.
Looks familiar? It should if you’re familiar with Agile or its derivatives. Lightweight concepting kicks off the process. This can be done on a whiteboard, a napkin or a quick wireframe. The goal is to get the core components of the idea or workflow visualized quickly and in front of your team.
The team begins to provide their insights on the direction of the design as well as its feasibility. Changes are then made to the original idea, or perhaps it’s scrapped entirely and a new idea proposed. The initial investment in sketching is so minimal that there is no significant cost to completely rethinking the direction. Once a direction is agreed upon internally, a rough prototype helps to validate the idea with customers. That learning helps to refine the idea, and the cycle repeats.
What’s most important to recognize here is that Lean UX is focused strictly on the design phase of the software development process. Whatever your organization’s chosen methodology (waterfall, Agile, etc.), these concepts can be applied to your design tasks.
Isn’t This Just Design-By-Committee?
Lean UX encourages you, the designer, to show your work early and often to the team, collect their insights and build that into the next iteration of the design. To many folks, this sounds like the dreaded “design by committee� approach, which has killed many designs in years past.
In fact, the designer is still driving the design by aggregating all of that feedback, assessing what works best for the business and the user, and iterating the design forward. By providing insight into the design work to your teammates sooner rather than further down the design road, you accomplish the following:
Ensure that you’re aligned with the broader team and the business vision;
Give developers a sneak peek at the direction of the application (speeding up development and surfacing challenges earlier);
Further flesh out your thinking, since verbalizing your concepts to others forces you to focus on areas that you didn’t think of when you were pushing the pixels.
The trick is to stay lean: keep the deliverables light and editable. Eliminate waste by not spending hours getting the pixels exactly right and the annotations perfect. Got an idea for a flow? Throw it up on the whiteboard, and grab the product owner or project leader to tell them about it. Ready to design? Rough out the first page of the flow in your sketchpad. How does it feel? Is the flow already evident? Post it in a visible place at the office and invite passers-by to comment on it.
In the Lean UX methodology spending time on realistic goals and informed design decisions is crucial. It helps to effectively match expectations and reality for your clients. Image by Kristian Bjørnard
As you iterate, suggestions and feedback from various team members will inevitably start to manifest themselves in the experience. The team members who suggested these ideas will begin to feel a sense of ownership in the design and notice it in others. It has now become something they had a hand in creating. This sense of ownership will equip the designer with new allies to defend the work when it comes under criticism from external forces. The team ultimately becomes more invested in the success of the experience.
Lean UX Is Not Lazy UX
It may seem at first that this is a lazy approach to UX, that the goal is simply to do less work. On the contrary, you’re actually using all of the tools in your UX toolkit. Sketching, presenting, critiquing, researching, testing, prototyping, even wireframing — these all get a solid workout in each cycle of the process. The trick is to use these tools when appropriate and, more importantly, to use them at the depth appropriate for the immediate problem you’re trying to solve for the business.
Designers Need to Feel in Control of Their Work
“But I’m giving up control of my design!� is one of the most often-heard complaints from designers who try out Lean UX. Their concern is that by collecting feedback from non-designers, they will be less valuable to the team and be relegated to the role of menial pixel-pusher.
Holding on to the concept and avoiding the unnecessary is vital in Lean UX. Image by Kristian Bjørnard
By staying lean, however, the frequent collection of team-wide feedback actually minimizes the time spent heading down the wrong path. The designer continues to drive the design, but the guardrails (i.e. constraints) become more visible with each iteration and review. Basically, if you spend three months perfecting a design only to find out after launch that it fails to meet customers’ needs, then you’ve just wasted three months of your life, not to mention your team’s.
Lean UX also speeds up development time. By giving the team early insight into the design’s direction, it can begin to lay the groundwork for that experience. This foundational coding phase helps to expose feasibility challenges in the proposed solution. The time, material and resources available then help to prioritize the product’s elements, separating the parts that get built from those that get pushed out or reduced in scope. All of this affects where the designer focuses their energy, thus minimizing waste.
Prototyping: The Fastest Way Between You and Your Customers
Lean UX is where prototyping shines. As with the initial sketches, focusing the prototype on critical components of the experience is essential. Pick the core user flow (or two), and prototype only those screens. The fidelity of the prototype ultimately doesn’t matter, so create it the way you know best. Once created, it will be immediately testable by any and all users.
Successful lean prototypes have been created with code, with design software such as Adobe Fireworks and even with PowerPoint. At times, your client (internal or external) will demand a level of fidelity that helps them better visualize the experience. Work with the tool that is most comfortable and fastest for you and that delivers just enough fidelity for the client.
Next, get that prototype in front of everyone who matters internally, and validate whether you’re meeting the needs of the business.
Diagram of the iterative design and critique process. Warfel, Todd Zaki. 2009. Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media.
Most importantly, get the prototype in front of customers. Bring them in regularly to test the workflows, ideally once a week. You don’t need to test with many customers. Jakob Nielsen found out that after five participants, the odds of finding new roadblocks in the experience were low. If you test regularly, you can cut the number of participants per week to three. This will also cut costs.
Collect feedback. Figure out what worked and what didn’t. Tweak the prototype. Hell, gut it if you have to: that’s the beauty of Lean UX. The investment you’ve put in at each phase is so minimal that rethinking, reconfiguring or redesigning isn’t crushing in workload or ego-bruising.
Once validated, demo your updated prototype to the team. Explain the flows, the user motivations and why you designed it the way you did. The prototype has now become your documentation. It is “The Spec.� Very little (if anything) more is needed. Regardless, you’re there to answer any questions that come up. The strength of Lean UX here is that, with the design validated, the designer is now freed to move on to the next core component of the experience, instead of spending six weeks creating a design-requirements document and pixel-perfect specs.
Prototyping puts the power of validating the design’s direction much more quickly in the hands of the ultimate decider: your customers. They are the ones with whom the design will speak for itself, and in the environment where it will ultimately have to succeed.
Maintaining a Holistic Vision
“But what about my vision? By chopping the design up and delivering it piecemeal to the team and, ultimately, customers, I’m compromising on my vision of the product and putting out a sub-standard experience!�
UX designers have traditionally worn many hats. You now have another to add to the hall tree: keeper of the vision. In this new role, your responsibility is to keep an eye on the big picture. Lean UX forces you to think of the experience in prioritized chunks. Ultimately, those chunks all have to roll up into one cohesive product. That cohesive product is your vision. Even as the design shifts and morphs through iterations and customer feedback, you are always designing towards that greater goal. “Increasing time on site for returning customers� could be a vision. “Deliver content faster and in a more contextual manner� could be another. Regardless of how the design shifts, these goals drive your work.
It won’t be easy. In the past, those hard-won, comprehensive, approved deliverables authorized you to design in a specific direction. With Lean UX, the iterative cycle and the frequent varying opinions will inevitably create conflicts with your vision. This is where you push back. Use the stated vision to help sort out conflicting feedback and focus your efforts on the end goal.
Deliverables For Maintenance Don’t Make Sense Anymore
Documentation has long served as a way for organizations to maintain their software. It becomes a reference tool to understand the decisions of the past, which inform the decisions of the present. While this may make sense for complex business rules, it doesn’t make sense for design. The final product is the documentation. It is the experience. Thick deliverables created simply for future reference regarding the user experience become obsolete almost as soon as they are completed. When a question arises about how something should behave in the UX, going through that workflow in the product to see what happens is easy enough. The old kind of documentation is waste and draws effort away from solving current design problems.
How Does Content Strategy and Planning Fit In?
Websites and applications that are focused on heavy content delivery (as opposed to task- or function-based websites) will need some up-front planning and documentation. Getting right down to the level of the page and article may not be necessary, but getting enough of an idea of the type of content that will be delivered and a sense of its hierarchy is essential to getting to that first sketch and prototype. Once the team grasps the scope and type of content needed for the experience, work can begin as the experience is refined.
Can It Be Done At My Organization?
At the risk of oversimplifying, let’s look at two types of organizations: the internal software/design shop and the interactive agency.
For internal software/design organizations, the transition to Lean UX is well within reach. You are in the problem-solving business, and you don’t solve problems with design documentation. You solve them with elegant, efficient and sophisticated software. Working in these new attributes should ultimately be an easy sell internally because you are advocating for more collaboration, more conversation and earlier delivery to customers. Yes, the culture will have to shift — shipping what amounts to the minimum desirable product can be a tough pill to swallow for those used to big-bang releases. However, the ability to make quicker decisions along the way, informed by regular customer feedback, should ultimately trump these concerns.
Interactive agencies have it a bit tougher because they are in the deliverables business. They get paid for their documentation and spend a lot of time creating it. A specialist creates each document, and they charge for that time. Reducing those efforts means reducing revenue.
Lean UX proposes that the shortfall in up-front revenue generated by deliverables can easily be made up, and then some, by delivering higher-quality work, faster, to the client. The process has to be modified slightly, though:
Lean UX process for an interactive agency.
The core difference with the agency’s process is the regular and frequent involvement of the client. Set up twice- or thrice-weekly 30-minute reviews with them. Set the expectation that you’ll be showing rough, directional work and that you’ll want their feedback. Each time you review a directional sketch with your client, they’ll notice the evolution and progress. Their feedback will work its way in and, like an internal stakeholder, they’ll gain that sense of ownership.
By involving the client in the process, by iterating the design quickly and by testing the iterations with real customers, you will reach an optimal solution in less time than before.
In agency-land, less time typically means less revenue, which could potentially be the death knell for Lean UX. But while the output took less billable time to create, it will likely be more effective and will bring the customer back to your shop more frequently than in the past. In addition, you’ve made the client part of the process. This is empowering, and clients like that feeling.
This is not an easy change because agency culture has been the same for many decades. Only the boldest agencies will take this on. But those that do will find greater success from it and will quickly be imitated. These ideas are worth piloting on an internal project; perhaps the redesign of the agency’s website. Prove that they work, and then branch out to actual clients.
I’m a Consultant/Freelancer. Does This Make Sense for Me?
Consultants are, in essence, an agency of one. It stands to reason that the agency process could work in this situation as well. Constant feedback and iteration with the client will engender the same feelings of trust and co-ownership. The challenge for the consultant/freelancer is the amount of time they can dedicate to each client. Assuming they can handle multiple projects or clients simultaneously, providing the level of attention and communication necessary to maintain a true Lean UX process becomes difficult. In this case, falling back on a slightly deeper level of documentation makes sense to keep concurrent projects moving forward.
It’s worth mentioning that one big challenge for Lean UX to be successful in any of these settings is the use of offshore development vendors. One of the fundamental principles needed for Lean UX to succeed is collaboration — ideally in real time and place it can even work via Skype or other virtual meeting technology. When a vendor has minimal contact with your design group and requires a certain level of documentation in order to produce work, Lean UX may not work in its entirety.
Lean UX is being actively used by a growing number of organizations. The way TheLadders has implemented it in a recent effort is an example of keeping deliverables light, fostering greater collaboration and achieving goals successfully.
Conclusion
Lean UX is an evolution, not a revolution. UX designers need to evolve and stay relevant as the practice evolves. Lean UX gets designers out of the deliverables business and back into the experience design business. This is where we excel and do our best work. Let’s become experts at delivering great results through these experiences and forgo the hefty spec documents. It won’t be an easy road. Culture and tradition will push back, yet the ultimate return on this investment will be more rewarding work and more successful businesses.
Yeah I know, there are already plenty of shelf wallpapers out there… and most of them are really good. However I'm kinda peculiar when it comes to wallpapers and exclusively use my own ones :) I liked how it turned out and thought you may enjoy it as well. So here you go…
Yeah I know, there are already plenty of shelf wallpapers out there… and most of them are really good. However I’m kinda peculiar when it comes to wallpapers and exclusively use my own ones :) I liked how it turned out and thought you may enjoy it as well. So here you go…
