I had the opportunity to be the final speaker at the 2010 Indianapolis Startup Weekend event on Sunday afternoon. For the uninitiated, I’ve included a bit of background from the Startup Weekend website below.

Startup Weekend recruits a highly motivated group of developers, business managers, startup enthusiasts, marketing gurus, graphic artists and more to a 54 hour event that builds communities, companies and projects.

Founded in 2007 by Andrew Hyde, the weekend is a concept of a conference focusing on learning by creating. It is known for its quick decisions, ‘out of the box’ thinking (oh no, the buzzwords are attacking!), unique facilitation technique and letting the founders show what they can do. The program has already met with success in indianapolis, Toronto, New York, Hamburg, Houston, West Lafayette, indianapolis, DC and more.

The participants that attend a Startup Weekend decide what they want to tackle over the weekend and come out at the end with several developed companies or projects. Attendees are responsible for bringing the same desire and passion to the project and walk out of the room with the task at hand, in a short 54 hours. Sound intense? It is.

By all accounts the weekend was a success and the groups produced three strong concepts:

Zankit
http://www.zankit.com

GoBizSpeak
http://www.gobizspeak.com

NinjaButton
http://twitter.com/ninjabutton

You can view my presentation on “Designing A Startup” on SlideShare.

I’ll admit it – I’m a recovering design process deliverables junkie. Historically, the generation of process maps, usability audits, wireframes, site diagrams, application flows, mental models, task-level scenarios, user stories, standards documentation, conceptual frameworks, content audits, navigation maps, and countless other examples of design ephemera, were so central to the work that we created for clients that we began to view them as the work we were creating for our clients. In reality, as important as many of those deliverables may be, they are just means to an end. The end – is a finished product that customers want to purchase and use and a solution that meets or exceeds the clients expectations.

So before I start a holy war about the importance of research, process, and planning in User Experience Design (UX), let me be clear – all of the steps and deliverables mentioned above are, in many scenarios, important and useful elements of the design process. But as time has gone by, and we’ve continued to refine our own approach to design, we’ve begun to realize that by over-emphasizing their importance we’re doing a disservice to our clients and ourselves. Sometimes, some (and very rarely all) of, these deliverables are critical to delivering a winning design solution. But trotting them out in front of clients in an often vain attempt to either impress them, overwhelm them, or justify your fees often has the inverse effect.

In a brilliant post, titled “An Open Letter To The Design Community“, Marty Cagan at the Silicon Valley Product Group details some common traps that designers often fall prey to. In particular he extolls the virtues of getting to the real product, via Hi-Fidelity prototypes, as quickly as possible.

“Please people, if you want to succeed at your company, just remember this rule: the only thing that works to explain your design to execs and stakeholders are prototypes, the higher the fidelity the better.  Do yourself a favor and keep the sausage making within the design team.  Some execs will want to know how you got from here to there, and that’s okay, so long as you start with them understanding where “there” is.”

Do yourself a favor and keep the sausage making within the design team.

We’ve discovered a much more liberating way to engage our clients, do away with a ton of busy work, and deliver better design solutions in the bargin. In short, it’s about getting to the point. You can’t cut corners or entirely abandon the development of design support materials, but you can get much smarter about determining what design deliverables are essential to the projects success and which ones are only part of your process because you feel they have to be. I can promise you, at least in our experience, that most clients don’t care and aren’t nearly as impressed by many of the process-oriented deliverables that we, as designers, have come to hold sacred.

We’ve discovered a much more liberating way to engage our clients, do away with a ton of busy work, and deliver better design solutions in the bargin.

I’m not suggesting that you can go from a back of the napkin sketch to a fully functional product design without going through the painstaking process of researching user needs, mapping complex interactions, and creating comprehensive design specifications. What I am saying is that, that’s the stuff in the kitchen that you darn well better know how to execute on and that getting to something worthy of presentation in the dining room is where your focus should be. The faster you can get to a “real world” manifestation of the final product the happier your client will be and the sooner you’ll be able to begin the process of refining the design solution.

What’s there to be afraid? Stalkers? Is the team really so ugly that their mugs can’t appear on the site? Or is the team so transient that upkeep would be too much of a challenge?

If you really want to create two-way dialogue and meaningful relationships with your customers (i.e. join the conversation on the social web), then give your customers access to your people. We don’t have relationships with abstract entities in the same way that we do with flesh and blood people. Not even if you anthropomorphise your business six ways to Sunday.

In the end, it’ll be good for everyone. Your staff will enjoy a more public sense of ownership and involvement, and your customers will rest easy knowing there are real people behind the curtain.

Below are some examples of nicely executed team pages (yes, I included KA+A).

We’ve started by pulling together a list of all the tech-oriented startup in Indy. Currently it’s an incomplete list. If you are a founder of an Indianapolis-based startup or you are aware of one that is not our list, please go here and submit it. There are lots of really great young companies here in Indy, but for the time being we are predominantly focusing on technology and technology-enabled businesses in the web space (software, web-apps, etc.). For the time being, we’re not focusing on advanced manufacturing, life sciences, or service-based businesses – but that will come.

Once we’ve got a good handle on startup landscape in Indianapolis, we’ll begin to flesh out the other side(s) of the coin… infrastructure, support services, funding, etc. We’ve begun to detail some of that already, but its a work in progress. We’re using a really cool application called Mindmeister to create a mind map of the ecosystem. You can check out a truncated view below, or click through to see the whole thing. One the infrastructure and services tip we are really looking for businesses that specialize in working with and for startups. We’re really looking for businesses and organizations that are focused on the Indy startup space. Indianapolis is achieving critical mass in the startup infrastructure space and that is what we want to highlight.

If you have a startup or a technology/web-based startup to recommend or would like to ask a question, hit me up on Twitter @kristianindy and let me know about it. But take a look at the mind map we’ve set-up first so that you can get an idea of what we’re looking for.

Note: Regarding “stages” (e.g. seed, growth, established, etc.) These are pretty fluid terms, but you can use the following brief descriptions for context.

Early/Seed Stage – Building the product and proving the concept

Growth Stage – Growing the business and becoming self-sustaining

Established – Profitable, stable, managed growth

Once the mapping process is completed, we’ll publish the entire Indy Startup Genome Project online for public consumption.

Warning: This is a work in progress. There will be errors and omissions. If you find an error or omission, let us know in the comments.

With the upcoming release of Apple’s iPad (April 3rd, 2010), there has been an increasing amount of buzz recently around the change in the way we will consume media. With an estimated 40-50 tablet devices set for release by early 2011, Wired Magazine, in partnership with Adobe, has seen this as an opportunity to rethink the way we connect with magazine brands, leading to a fundamental shift in the way Wired is produced with it’s new digital app.

At the SXSW panel After Magazines: Wired’s Digital Rebirth, panelists Scott Dadich (Creative Director, Wired Magazine) and Jeremy Clark (Senior Experience Design Manager, Adobe) explained the production methods of the app using Adobe Air, and showcased its features with a multi-platform demo.

Wired’s Goal: Publish Once, Author Anywhere

The average Wired article takes 24 days to go from initial copy to finished layout—a tight timeframe considering Wired is a monthly publication. Luckily, the team responsible for the print version of the mag are able to repurpose the layouts for use on the iPad and other devices, with only incremental hours, and no need for any additional staff.

Whereas reading a print magazine is a single-axis, linear experience, Wired have succeeded in developing their digital magazine into a multi-axis, non-linear experience. Articles are navigated by swiping left and right, while pages within these articles are accessed by swiping up and down. In addition to this, readers can tap the screen to bring up the ‘Scrubber’, a scrolling navigation bar that allows the reader to scroll page-by-page through the magazine. There is also a ‘Browse’ mode, which provides a fully zoomed-out view, allowing easy access to any article or page with just a couple of taps.

It’s not just Print, it’s Print Plus

The digital app is not simply a straight, digitized version of the print mag, it is much more. The app utilizes audio and video, perfect for providing snippets of interviews, music clips and movie trailers. Illustrations, charts and diagrams can be animated and even allow reader interaction. Photography has a whole new lease of life with the use of galleries, allowing multiple images to occupy the same space, accessed with a swipe of the finger, and 360 VR imagery allows the reader to see more of a tested product than a typical 2D photo. The orientation of the iPad plays a big part in the layout of the articles too. Rotating the iPad from landscape to portrait (or vice-versa) can switch editorial images, offering different perspectives on the same image, or zoom in on interactive content that appears smaller in the alternative orientation.

Of course, it’s not just editorial content that gets the special treatment. Using the same features listed above, consumers can interact with their favorite brands in a whole new way. Fashion labels can showcase collections in one ad and can utilize high-resolution photography to allow detailed close-ups (using your finger and the ‘Rover Dot’ to move around each image). Automotive brands can use 360 VR photography to allow rotatable views of their vehicles. Music labels can embed clips of songs or albums, just as movie studios can embed movie trailers, clips and featurettes.

Reflective vs. Emissive Displays

Many skeptics have expressed concern that reading long articles on the iPad, which uses an emissive light display (LCD/LED screen), brings on eye fatigue much faster than on devices such as Amazon’s Kindle, which uses a monochromatic, reflective light display. Due to the high resolution display of the iPad, Wired are able to use the same custom typeface family they do in the print version of their magazine. Wired’s typefaces were specifically designed to minimize the amount eye fatigue reader. Further research into reflective vs. emissive light displays is being conducted in conjunction with Hoefler & Frere Jones, although they admit there could be years of work ahead in this respect. Also, the monochromatic display of the Kindle isn’t conducive to an engaging, immersive interactive experience like that of the iPad.

The Better the Design,
The Easier the Reading Experience,
The Deeper the Engagement,
The More Connected the User,
The Stronger the Brand Relationship.

Social networking is expected to play a huge part in Wired’s digital rebirth, with Twitter, Facebook and email integration directly within the app, with content sharing capabilities being implemented. The ability for ‘Favorite’ articles will also be present, as well as strong search capabilities. Content will have a ’sticky’ shelf life and will be available for purchase/viewing from within the app. Finally, user engagement will be tracked using Omniture (the web analytics platform acquired by Adobe in October 2009).

Wired’s iPad app is set for release this summer, through the iPad app store. Versions for other devices such as iPhone and Google’s Nexus 1 later in the year. Subscription pricing TBA.

Wired rocks audience at SXSW with iPad demo from Mangrove on Vimeo.

]]> http://www.kaplusa.com/blog/2010/03/sxsw-wired%e2%80%99s-digital-rebirth/feed/ 0 http://www.kaplusa.com/blog/2010/01/radical-redesign-thesixtyone/ http://www.kaplusa.com/blog/2010/01/radical-redesign-thesixtyone/#comments Tue, 26 Jan 2010 15:55:01 +0000 Nathan Sinsabaugh http://www.kaplusa.com/blog/?p=3343 thesixtyone, a Y-Combinator funded music exploration community, launched in early 2008. The service began life as a pretty typical web-based social networking site. Over the last couple of years, it has gone through some interface updates and improvements, but for the most part it seemed to toe the social network line with its user interface.

The image below shows the service immediately before the latest redesign. It was definitely clean, well organized, and functional. There are even some sweet keyboard shortcuts to make controlling the music easier!

Last week thesixtyone distinguished itself from the web’s pile of music recommendation sites by completely redesigning their service. The new design is bold and immersive. While a song plays, the background of the entire page becomes a beautiful full-screen photograph of the current artist. At the same time, smaller images fade in and out in a slide show fashion. The effect is impressively cinematic, and gives artists a much better opportunity to show listeners what makes them unique… especially when compared to the limiting avatars and thumbnails used by the old design.

The other major update is the minimization of the music controls. A small menu in the upper right corner that appears only when the cursor is moving allows users to pause/play, adjust the volume, add a song to a playlist, and toggle repeat on or off. Large arrows on either side of the screen provide navigation between the previous and next song. Other functionality includes the ability to build playlists, and to share, love and comment on songs.

While the redesign is getting plenty of positive attention, a number of users have been less than happy with the drastic changes. The design is, without question, a sea change, so some degree of uprising isn’t surprising. The good news is that users can still access the old site.

I don’t know exactly how the update was rolled out, so maybe there would have been a better, less painful way to introduce the new design to the community. There are definitely parts of the UI that I don’t quite understand and wish were better explained, but the overall experience is engaging enough that I’m willing to let them go for now. Whatever the future holds for thesixtyone, I hope more companies become willing to take risks with bold new approaches to delivering experiences online.

A few months back I revisited a favorite game of mine — Portal. Portal is an extension of Valve’s Half-Life series. In it, the player controls the protagonist from a first person perspective (you know, a first person shooter…). You begin your adventure locked in a cell in some kind of testing environment/laboratory. After being released from the cell, you’re directed through a series of increasingly complex puzzle situations in which your goal is to progress through one test chamber and move to the next. Here’s where the “portal” comes in. The solutions to these puzzles require the use of a portal gun, which creates two interconnected portal ends. Here’s Wikipedia’s description of this interesting tool:

The portals create a visual and physical connection between two different locations in three-dimensional space. Neither end is specifically an entrance or exit; all objects that travel through one portal will exit through the other.

In the image above you can see how looking into the orange portal results in looking out of the blue portal. Check out the images at the end of the post to see more examples. You can also play a web-based 2D version here to get an idea of how portals work.

Anyway, you should definitely go get the Orange Box and play Portal. But, I’m not writing this just to give a game recommendation. There’s a lesson that, as a UX designer, I want to learn from Portal.

Painless Acclimation

In spite of the little to no practical experience I have with inter-spatial teleportation, by about five minutes into the game I had become proficient at it. While I’d like to credit my own cleverness and adaptability, in reality it was the skillful job Valve did of acclimating me to the rules and conventions of Portal that turned me into a capable and competent player.

Valve is known as much for its great storytelling as it is for its gameplay, and they go to great efforts to keep the experience seamless and immersive at all times. To that end, Portal’s training system is built right into the storyline of the game. The sophisticated use of progressive disclosure (i.e. only showing the player what they need to know to accomplish a discrete task) combined with in-game symbols and occasional vocal instruction, transforms players from novices to experts in a way that is so integrated with the game that the transition is hardly noticeable.

Players put their skills to use as they move from one test chamber to another, and finally, in a plot twist, the player breaks out of the testing environment and escapes from the facility. The in-game training culminates with the player putting it to use to counter the system in which is was acquired.

What About Commercial Software?

If game-based software can provide in-product training in such an integrated way, why can’t commercial, tool-based software? Why do I have to pop in an Adobe DVD and struggle to follow along as I attempt to mimic what the guy in the video is doing? Why is the help menu so worthless? Why are training and tutorials from 3rd party sites so much better than the ones from the software producer?

To some degree there’s a difference between video game and software development in that video game producers deliberately seek to challenge and confound users (to an extent) with their products, while it’s just an unfortunate byproduct of most software. And, while games keep you on a predetermined “path to victory,” the best software eventually gets out of your way and is used to do things that the developers may not have even thought of (Valve gives us a picture of this in Portal when the player escapes from the testing facility).

I don’t believe those differences should stop software developers from exploring more effective and integrated training solutions. I know this is not an easy thing to do. At KA+A, we know through experience that the training and help components of software are difficult to manage. But it’s time to stop neglecting them and treating them as an afterthought. This is one of those situations where a longview will reveal benefits for both software makers and users.

The Takeaway

No post would be complete without some bullet points, so I’ll close with a list of software training ideas I believe we can learn from Portal:

• Integrate training directly into the application
• Provide users with some “quick wins” that build confidence and create a sense of accomplishment
• Don’t treat users like they’re stupid – keep this in mind when facilitating “quick wins”
• Disclose tools and techniques in a way that prevents sensory overload – i.e. progressive disclosure
• Look for unique places to include tips and help – but don’t get in the user’s way
• Facilitate discovery – make it possible for users to learn on their own
• Make it easy for the user to get your training out of the way when they’re ready to “escape”

Strategically placed portals result in a view of oneself from a perspective completely independent of their actual position in space.

An example of the in-game symbols that serve as instructions for players.

Eventually the tests become more complex and challenging.

Recently I was fortunate enough to become certified in Landing Page Optimization (LPO) after attending a one-day course presented by Dr. Flint McGlaughlin of MarketingExperiments, an internet-based research lab that conducts experiments in optimizing sales and marketing processes. The primary goal of LPO is to optimize the content and appearance of landing pages to make them more appealing to a target audience, in order improve the conversion rate of website visitors that become sales leads or customers.

Having been a designer for nearly 12 years I’ve designed my fair share of websites and landing pages, and I was skeptical about how much I could really learn from this course. However, as we dug deeper into the science of LPO I realized that thinking from a potential customer’s perspective, as opposed to a designer’s or website user’s perspective, allowed me to see beyond just the visual design and understand why content and process are also large parts of the puzzle.

Here Comes the Science Bit
MarketingExperiments has developed a heuristic formula to aid understanding of LPO and conversion:

It looks overly complicated but it’s actually very simple: the likelihood of a click becoming a sale (C – probability of conversion) depends on how badly the user wants what you have to offer (m – motivation of user), how clearly you state the reasons they should buy from you (v – clarity of value proposition), whether there are any special offers to encourage them to do so (i – incentive), whether they experience any resistance from poor design or messaging (f – friction), and how wary they are about submitting personal information or committing to a purchase (a – anxiety). The coefficients and the variables’ position in the formula (left to right) specify how much influence each has in the conversion process.

Effective Solutions
In order for a landing page to be successful, a clear value proposition must be effectively communicated – state why what you are offering is different from the competition and why potential customers should buy from you. Each element on the landing page should state or support the value proposition (congruence), just as every step of the conversion process should too (continuity), from banner ad, email or tweet, all the way to sign-up/checkout. Friction can be reduced by cutting down on superfluous graphical elements, and through clear and effective information design (e.g. reducing the amount of information required at sign-up or reducing the total number of steps in the process). Testimonials, awards and official certification logos can help reduce user anxiety and encourage them to put trust in your company.