Designers are unique people. We look at the world through different lenses. When I look at an object I think of the possibilities and other purposes it can serve. This thought process also follows me from graphic design to web design and to interaction design. I look at how interactions can be improved. In Roger Martin’s book The Design of Business: Why Design Thinking is the Next Competitive Advantage, he argues that designers are more equipped to take on more complex challenges in the coming years. As we all know, we are in the midst of an exciting technological explosion of new services and tools that change on a daily basis. Designers, through their unique way observing and deductive reasoning, will help business interact with users on a different level. He also gives a step-by-step analysis of how businesses have changed their environment to accommodate the designer.

Martin argues businesses should take advantage of a designer’s imagination and their thought process. Jared Lewandowski also alludes to this in his article Getting More From Analysis. Martin points out businesses adopting this design thinking go through a Knowledge Funnel – (1) Mystery (2) Heuristic (3) Algorithm.

Mystery: Are Hunches, pre-linguistic intuitions sensed through observation and contemplation. For example, people from different cultures noted that objects tend to fall down to the ground. In turn, they ask themselves why do objects fall to the ground? This turns into a heuristic or rule of thumb.

Heuristic: Is a rule of thumb for explaining observations. For example, a force we call gravity causes things to fall to earth. They are open-ended intuitions, but also explicit.“The beauty of heuristics is that they guide us toward a solution by way of organized exploration of the possibilities.” – Roger Martin

Algorithm:  Is a step-by-step process to solving a problem.  It’s a linear process that has a beginning and an end. The move from heuristic to algorithm is what Martin calls design thinking.

Martin points to a few outstanding businesses that have embraced the Knowledge Funnel: Black Berry, P&G, and Herman Miller. To start with BlackBerry, Lazaridis (the founder of RIM) designed small interactions that captured people.  Lazaridis understood that design was not just how the product looked, but how it functioned. Email on other phones buzzed as soon as the email arrived, whereas on the  BlackBerry the message would pop up as soon the phone was removed from the holster. I also see these types of small changes on Apple devices, where the keyboard now includes a .com. Small user interactions, such as these, go a long way.

Herman Miller transformed itself from a small furniture manufacturing company to one of the pinnacle American design companies of the century. Herman Miller created the Egua chair which some call the greatest chair ever made. It was launched in 1984 and soon after Time Magazine named it the Design of the Decade. But they didn’t stop there. In 2002 the Aeron chair was launched. It’s a very different design and no other chair manufacturer could compete against it then or now.  The designers Don Chadwick and Bill Stumpf had to forget what they learned previously on the Equa. From the beginning they sought out to create something that was different. They asked the question, “what do people need when they sit down to work?” They observed the subtle signals of  discomfort, the shifts of position as sitters grew stiff or the seat got too warm. The method of observing people and asking questions, led to their original design.

In 2000 Procter & Gamble stock prices were in decline and hadn’t produced a viable product for years. The CEO at the time, A. G Lafley, was one of the youngest CEO in P&G’s 165 year storied history (Lafley was already a fan of design and what it could do for his company). He knew something different had to be done to change the course that P&G was headed. He knew he had to be more innovative to compete.  He promoted Kotchka, an internal entrepreneur that started Tremor, an internal social networking application. She had a gift of speaking about business and design to executives. They both set a course for transforming P&G into a design company. Kotchka changed the way they recruited design talent and the process of user research. She sent executives out to observe how the designers studied users. She also put designers in strategy meetings, where previously they had never been allowed. She incorporated them in the core business teams.

They’re definitely part of the business team and that was our goal. We wanted a seat at the table. We wanted design to be sitting on the leadership team, wherever decisions get made, and have a voice. And we wanted the business units to really understand design, participate in design and not see it as a black box.

In conclusion, I really liked this book. To tell you the truth, I liked it as soon as I read the title. I agree with Martin’s statement that Design Thinking is the Next Competitive advantage. During my time at Apple I experienced first hand how designers can shape the path of a company with imagination and vision with programmers taking a back seat. If given the correct tools and environment, a designer can create new experiences that coincide with business strategy. But we as designers also have a responsibility to communicate to the business in a way that is understood, which the book clearly illustrates. We have to understand the product and the details and not be stuck in the middle. Thanks Roger, I can now go and become a CEO!

Author: Iniobong Uto-Uko

Khoi Vinh is the Design Director of NYTimes.com, where he and his design team seek to communicate the prestige of The New York Times via an innovative online user experience. Khoi has his own blog, Subtraction.com, and also recently launched his dog’s blog, Misterpresident.org. Before joining NYTimes.com, Khoi worked with other high-end clients, including HBO and the Smithsonian, through his design firm, Behavior LLC.

In this interview, Khoi takes us behind the scenes at NYTimes.com. He also tells us which skills and sensibilities are, in his opinion, most important for today’s web designer.

Q: Please tell us about what you do at NYTimes.com. For example, how is working for an in-house design department different from working for, or in your case founding, a design studio? What are the pros and cons of each environment?

A: Working in house is much more about building long-term relationships and developing a broad understanding of the larger context and the way design figures into the business. It takes a lot more patience, but the rewards are potentially greater. When I was working at a studio, we’d labor long and hard over design solutions and the just hand them off to clients to use – who might change and build upon the concept — sometimes with unsatisfying results. When working in house, you have more control over a much longer lifespan.

Q: It sounds a lot more satisfying, having that control. Tell us a bit more about the longer project lifespan that comes with working in-house. Since you obviously can’t redesign NYTimes.com constantly, what sort of design work do you and your team typically do on a day-to-day basis?

A: Well, in a sense, we are redesigning NYTimes.com constantly. We’re just not making the dramatic and visually apparent changes that people normally associate with redesigns. Most of our projects involve overhauling existing sections of the site. We add new features and functionality and continually evolve and improve the overall user experience as much as we can. We’re also adding new things all the time — like My Times, which recently launched after a long and intense design, development, and beta process. So, in a manner of speaking, we’re redesigning right now — just in slow motion.

Q: How do you achieve the level of consistency that The New York Times requires?

A: We use a lot of documentation in an effort to better articulate — to others and to ourselves — what we’re doing, why we’re doing it, and how it should be done in the future. The key to consistency for a site as large as ours is documentation, documentation, and documentation. We use a wiki to do that, because we want to make the process as simple and as widely available within the organization as we can.

Q: That’s the first I’ve heard of a Wiki being used for design documentation, and it’s a great idea! What other applications and tools do you and your team employ while designing and coding? Photoshop? Dreamweaver?

We use Photoshop to mock up our pages. It’s not the perfect tool, but it’s the one that affords us the most control on a pixel-by-pixel basis. Everything is hand-coded here; we don’t use WYSIWYG software at all. We prefer text editors like TextMate on the Mac to get that work done, though personally I’m a fan of skEdit.

Q: What, in your opinion, are the benefits of hand-coding over WYSIWYG software, like Dreamweaver, in the NYTimes.com work environment? Do you also prefer to hand code your personal sites?

A: We don’t use WYSIWYG authoring software at all [at NYTimes.com], and neither do I use it for Subtraction.com. I hand code everything. At some point, we’ll have software that will allow for direct manipulation of layouts and behaviors, but it’s a ways off. And when it gets here, it won’t look anything like Dreamweaver, a program which, though it has its merits (I can’t think of any right now), I think is pretty much a waste of everyone’s time.

Q: For years, the web design industry has been unable to decide whether visual design and coding are independent or one and the same. Thinking back to your work at Behavior as well as your current undertakings, what makes the most sense to you, and why? When you’re hiring new designers, do you look for people who have experience with both sides of the coin?

A: In an ideal world, everyone I hire would be both a skilled coder and a skilled designer, but that’s not realistic. I try to hire specialists who can think like generalists. The visual designers I look for have a sensitivity to code and information architecture, and the technologists I tend to hire have a sensitivity to visual design and information architecture. Our information architects have to know everything.

Q: That’s a tall order! And speaking of knowing “everything”, how much do you and your web designers need to know about print design, given that you’re working for a primarily print publication?

A: It’s helps to know both print and web design, because having both sensibilities generally makes one a more well-rounded, deep-thinking designer.

On the other hand, I like to remain open-minded when it comes to qualifications. I believe there are some people who really excel in a given medium, and it wouldn’t make sense to disqualify them from working in that medium just because they don’t know another. For instance, it would be silly to disqualify a film director because she doesn’t have experience directing for the stage. It would be nice if she did, but it shouldn’t be a prerequisite.

Q: How can print design sensibilities improve a web design? How does one build an exciting, aesthetically pleasing web design around a print publication?

A: There are lots of things that a strong foundation in print can bring to web design: typography, layout, a sensitivity to how text and image collaborate to structure a narrative. It’s a valuable foundation, but it’s also only part of the picture. The secret to translating those skills properly is to be as true to the medium you’re working in as you can be.

Q: What print and web resources and designers inspire you when you’re working on both NYTimes.com and your personal sites, and why?

A: I actually look at print designs quite a bit. Annuals from the Society of Publication designers are always a inspiring. The work of Massimo Vignelli, Josef Muller Brockmann, Alexey Brodovitch are enormous creative resources for me, too. On a practical level, I’ve learned a lot from the way they do things for the newspaper at the Times. Tom Bodkin, the Assistant Managing Editor and Art Director of the paper, produces an impeccable publication, and his staff has taught me a lot about news design.

Author: Tara MacKay

Role: UI Designer
StreamFocus is a SaaS web application. They streamline customer’s time by integrating communications and documents directly with the work at hand. Their focus is the workflow. They make understanding and creating workflows easy and allow connecting workflows together to better organize projects for secure and simple collaboration.

Before

]]> http://www.uto-uko.com/blog/?feed=rss2&p=491 0 http://www.uto-uko.com/blog/?p=421 http://www.uto-uko.com/blog/?p=421#comments Mon, 29 Nov 2010 00:03:33 +0000 admin http://www.uto-uko.com/blog/?p=421

Role: Creative Director
As a consultant at Online Design I rebranded Data Physics. The old site was out of date and lacked good information architecture. They wanted a new look that communicated high-end, clean and informative. Since they have many products but only four flag ship products, they wanted those products to stand out. The old site was clustered with information that was thrown on the site without any consideration of information hierarchy.

Role: Art Director, Interactive Designer
www.internactive.org

As a consultant at Online Design, I served as Art Director on for InternAcitve. There are many internship sites that will post any internship opportunity and will accept any candidate’s resume.  However, InternActive strives to be a high quality database of art related opportunities with an integrated social experience. InternActive seeks to connect high quality interns with supervisors to create their ideal internship. When the intern becomes a member of the site he/she selects an internship of interest. The supervisor is notified, and this starts the conversation between the supervisor and intern. If the supervisor feels the intern is the right fit, they move forward in crafting the internship together. On the other hand, if the supervisor doesn’t feel the intern is the right fit during the conversation process, the supervisor has the right the reject the intern. This interaction helps to ensure that when the internship begins, the expectations for the opportunity are clearly communicated and understood.

Since the site is intended to serve both 20-year-olds and 40 -year-olds, I needed an overall look and feel that appealed to both demographics . As a starting point, I used colors from the logo to create a vibrant feel to attract young adults, yet contemporary enough to engage a mature audience.

The colors from the logo are primary colors that if not carefully used could cause the site to look like a Christmas tree on steroids.  So I had to be cautious with my approach. When using primary colors, users can easily be distracted; so I used a white background as a good bridge between the colors.

Role: Creative Director , UI Designer
www.bay101 .com
As a consultant at Online Design, I served as Art Director on Bay 101. Bay 101 is the only casino in Northern California that hosts a World Poker Tour Event.  The owners wanted to convey that Bay 101 is a classy, safe and fun Calif. Casino. In addition, they have a 24 hour / 7 day restaurant which needed to be an emphasis on the new website.

The original website for Bay 101 was disorganized , there was misplaced content, and users could not easily find information. In particular, visiting contestants for the World Poker Tour event could not find necessary information. In addition, there was no hierarchy of information on the site to draw the user to primary and secondary content. For the re-design, I wanted to create an organized, yet elegant look and feel. Since the World Poker Tour draws participants from around the globe, a world class design needed to match their reputation. To help with the hierarchy of information, I used photo of the building as the main image. This welcomes the user into the doors of Bay 101. For secondary information, there are smaller images with relevant copy.

Role: Creative Director

From the kitchen to presentation, Birk’s Restaurant appeals to a clientele that knows and appreciates fine dining.

I re-designed the site and pared down visual clutter and unnecessary information. This creates a sophisticated experience that communicates the deliciousness of the food by showcasing the dishes in a clean, grid-like pattern. I made the food the most prominent feature on this site. Food that looks as divine as it tastes, tantalizing copy, and a custom photo shoot created the mouthwatering content for his site.

Role: Art Director
www.rmhessling.com

As a consultant at Online Design, I served as Art Director to develop an overall marketing portfolio for Renee Hessling’s attorney practice.  I created an image that presents both a feminine, yet strong brand presence. As part of this portfolio, I designed and developed a website, business cards and letterhead.

The goal of this website was to design an image that reflects Renee’s personality and professional knowledge. This conveys the impression of a seasoned defense attorney that can rival the ‘good ol’ boys club’. She’s a professional Defense Attorney that is here to alleviate anxiety, make life easier for those going through legal troubles, impassioned to protect the client’s legal rights, and responsive and empathetic to the client’s needs.

Role: Creative Director, Interactive Designer

As a consultant at Online Design, I served as an Art Director and Interactive Designer on the CPP project. CPP is best known as the exclusive publisher for the Myers-Briggs Type Indicator^® assessment. Much more than just a product, the Myers-Briggs^® (MBTI^®) assessment is a powerful  solution that has helped millions of people around the world better understand themselves and how they interact with others. MBTI®Complete is an online version that enables individuals to take the assessment and immediately access an interactive interpretation session to learn about and verify their four-letter personality type. At the conclusion they receive a three-page report describing their type.

CPP wanted to develop a version of MBTI®Complete for the college market that would be used by universities, community colleges, and college-bound high school seniors. This college version is within the MBTI®Complete and has similar functionality and output.

When developing for young adults, it is imperative to get their attention within 5 seconds, otherwise, they will move on to the next shiny new toy. Thus, the look and feel was very important for this website. I made it fun and inviting to frame the students’  mental model.   I wanted them to feel like they were sitting at their desks writing notes or doodling.

MBTI®Complete has a huge amount of copy and this was challenging for the college market.  I used two methods to address this. First, I placed the copy in  smaller chunks so the user wouldn’t be overwhelmed and the page would be easy to scan. Second, I used progressive disclosure on charts and certain lists. All the content with yellow and orange headings are drop down menus.