Sun.com Customer Experience and Stuff: Notes from the Sun.com customer experience team.

Martin blogged about our amazing Information Architecture Indesign Template System earlier this year.

Cool Idea: Wireframes with Active Code

It is a set of Indesign documents and objects that allow for the rapid building of anything found in the online style guide. Extreme Wireframing is how I like to think of it.

We had a release of the InDesign Template System in early June and even since then the value keeps increasing. Publishers request the highly detailed documentation, the library of site sections documented continues to grow through the hard work and partnership of EightShapes (who also built the system). Other vendors we work with like OIC and Hot Studio are able to utilize our design system and build with these tools. They've done some interesting things to inform the tools as well. Having a tool like this has also made it clear where partner vendors could try to push the style guide in meaningful ways. It's hard for team members to come in from the outside and build on the system, but this documentation system makes it relatively quick to get up to speed.

We are slowly extending the usage of the tool to more designers. We are also going to be moving some of our documentation for commerce into this system so those pieces will be there to leverage in the future.

It's really key to document the system so that content creators don't have to continue to reinvent the wheel. It creates a single documentation language-the style guide- for our work. That's no small thing and it feels like we are getting closer and closer.

Creating this tool for designing experiences on sun.com has simplified communication. We still have some work to do but we're seeing results. There is too much content to be able to address each piece in a custom manner. This allows more attention to the differences.

Until this documentation is complete, we are, as my esteemed colleague Chris H. says, 'negotiating the gaps'. It's a really interesting puzzle from a design perspective. It's also not short term. The team has worked on the core of the system for years. Andrew P. has a really good story about that.

I'm sure there will be more to the template story as well as the overall styleguide. I'll continue to keep the blog updated as our progress moves us along, hopefully I can get others to chime in as well.

I'm not really sure whether this qualifies as either social networking or aggregation - that really depends on your own interpretation of those terms - but its certainly a good example if how you can bring together all those loose ends of user-generated content you have lying around. I'm sure most people with a passing interest in next-generation web publishing environments will actively subscribe to, publish to, or regularly visit one or more of the streams of content that Ben Hammersely subscribes to, publishes to, and visits himself. Some of us, like Ben, might actually publish to pretty much all of them. Unlike Ben, most of us who do that don't really have much to add, but do it anyway, because its there.

What Ben and the BBC News Online team have done, however, is more interesting than just what Ben has to say - its how he says it, and how we consume it. Its no longer unusual to get your news, back stories, or inane chatter from various sources, such as blogs, twitter, flickr and youtube. You can even let others decide for you what might be actually worth reading/viewing, via del.icio.us, digg, tag clouds, etc. That experience is usually blighted by the 'multiple voices, multiple locations' problem. For any given topic of interest, I have to invest a reasonable amount of time simply researching where the items of interest are located, before going off and visiting, subscribing, evaluating and consuming. Worst of all, it takes me more time than I should reasonably be able to afford to simply find everything that I've said, created, or published in the last week or so. Wouldn't it be nice is all that stuff was in one place?

Which is where Ben and the BBC have piqued my interest. There are other aggregation sites out there, various attempts at mashing up social media and interminable tag-cranking sites cluttering up search engines, but nothing I've seen that comes close to matching the customer experience on Ben's Turkish Journey page. You might question whether seamlessly integrating various social media sources into one location is relevant, if all the content comes from the same author (I know there's external blogs on there), but from a design and deployment perspective, its a fine piece of work. We're just starting to integrate user-generated content on our own sites, and I think we're ahead of the game in many respects, but the design framework and usability of this page has to be admired, considering it doesn't really contain any content at all. If you've ever been involved in a customer experience project designing for content that actually exists somewhere outside of your control, then I'm sure you understand the challenges, and appreciate just how well they've presented it.

Kudos to the design and customer experience teams, of course. I mean, Ben is obviously a smart bloke (sickeningly young, smart and healthy, in fact), but someone, somewhere, decided that the twitter class needs to have a background-color of #900 and those rounded corners, right?

When I'm visiting any consumer sites for researching, comparing and spending money on products, I'm sharing that experience with a large number of visitors. We're not actually sharing a desk or a web browser (or a cheap screen dedicated to purchasing products, located in the bathroom), but the desire to tap into the collective thoughts of customers looking for the same thing as me is overwhelming. There's hundreds of other consumers like me out there, doing what I'm doing. Maybe they've already done it and have an experience, an opinion, a story to share.

If I could just turn to them and say "what do you think?", wouldn't that be great? I might not always agree with them, or even like them, but, in general, I can make significantly better informed decisions based on that simple question. I could also tell people what I think and maybe that would be helpful to them. We might even work out that what we're looking for just isn't there, or that we want it another way. Whatever conversations we might have, my customer journey is now a community-driven affair and my perspectives are changed, or at least much broadened.

It so happens that many of us simply can't stop sharing our thoughts and opinions these days. I mean, we really can't. We get blog withdrawl and twitteritis. If I don't rate my last purchase within a couple of hours, I've lost all sense of worth. Okay, its not that bad, but the community is thriving, and so why wouldn't Sun provide a way for its customers to ask the "what do you think?" question of the thousands of other customers sharing that experience?

The answer is we do, already, of course. As you're looking through our product pages on sun.com, check out the 'Perspectives' tab. We've integrated all the key community activity around each product, so that you can see right there what others think. We've got product ratings. We've got product blogs. We've got product reviews. But most importantly, they're your ratings, your blogs, your reviews. We do include blogs form Sun's own product teams, of course, so you can get the story from the inside, but what we really want is for you to make your decision to try, download, or buy from Sun a decision based on open, honest and frank conversations. After all, we're immensely proud of our products, so we've nothing to hide.

I recently worked with one of our agency partners to audit around 50 of our key customer contact scenarios on sun.com. We were hoping to get a good idea where we support customer interactions well, or, more importantly, where we might have common customer journey issues. In most cases, we expected there to be the occasional dead-end, or one of those annoying circular scenarios where you never actually get closer to what you're looking for.

We came up with reasonably specific scenarios to try and identify issues, such as "Looking for status on an existing hardware order", or "Wants to ask a question about training courses in local area", but we also threw in a couple of what might be referred to as 'curveballs' (I think, I'm in the UK you know). The real eye-openers were the ones that assumed little or no knowledge about a particular product or service. I had a conversation at the weekend with a cousin I'd not seen for a number of years, and we got onto the subject of work. I told him I work for Sun Microsystems (and gave him the golden pitch, naturally). His response was "didn't you invent that Java?". I said yes we did. He said "What's that then?".

Which brings us back to our scenarios. We included "Looking for information about 'Java'", to see where that would lead. Although there are multiple entry points for this journey, the auditor picked what seemed like an obvious one, and unfortunately ended up on a journey that went down a number of fruitless dead-ends, and ended up with a search for a way to chat online with someone instead.

All of which reinforced the idea that, if you get it right, supporting specific tasks can be the easy part of customer experience design, but as the vagueness of the task increases, so your ability to map the customer journey dramatically decreases. We obviously can't think of all the possible questions we might get asked and how to route those questions to someone who knows the answer, but its invaluable to at least understand how well you route the one's you do get asked - even if it's only at a dinner party.

Tunes: LCD Soundsystem: All My Friends

What do you do? I'm customer journey producer. Eh?

There are many titles out there, and many I've had previously, that lead to uncomfortable silences at dinner parties, but none more so than Customer Journey Producer. We have a small team of of these in the customer experience group at Sun who have the unenviable task of trying to understand what we used to call the 'end-to-end experience', and mapping that back to what we do on sun.com to support our customers. It's not really end-to-end, because more often than not our customer experiences jump around within a particular task, which is wholly expected. If I followed a linear path every time I visited, say, Amazon, I've never have ended up with the re-issued Gang of Four albums.

The customer journey producers at Sun currently take ownership of the customer experience on sun.com for specific areas. They are responsible for working closely with the business teams, content owners, publishing, engineering and design teams, and anyone else who has anything to do with the content in their area, to ensure that what we put out is consistent, compliant, compelling, and above all, supports customer interactions as best we can.

Lou, for example, has the rather nifty customer journey subtitle of 'communities producer' and is the man behind, amongst other things, our RSS feed pages, embedded customer reviews and ratings, those technorati, del.icio.us, digg and slashdot submission links on every page and some splendid video output. In fact, Lou is our de facto 'web.next' producer, and if anything looks like it might have something to do with user generated content, aggregation, syndication, or have come to us via Twitter or something, it lands on Lou's desk. Lou pushes the boundaries constantly, and this is a key part of the producer role - to capitalize on business opportunities.

I, on the other hand, have a couple customer journeys that I'm currently producing that are rather more specific than Lou's wide-ranging remit; the ongoing program to bridge the gap between sun.com and our telesales force, and the rearchitecting of our customer contact provision and key touchpoints on the web. I've been out tonight and had a couple of drinks, so I'll go into those in more detail at another time, but they're interesting, honestly.

We also have Dave and Patricia who are a couple of the most hard-working producers in the world, and have the dubious pleasure of not only defining our globalization strategies (difficult), but also implementing them (that's just impossible, surely). Inevitably we all overlap on projects, so it's as well that we all face in the same direction on this stuff.

There. I used verbs and punctuation and everything, Martin.

Tunes: The Fall: I Am Damo Suzuki

I am still basking in the afterglow of the great party my Sun team threw for me Saturday. It has been a wonderful 20 years at Sun, and I've been very lucky to work with a warm and talented group of folks over the years. Our current online Customer Experience Design team has been particularly amazing and includes some of the smartest and most passionate people I've ever worked with.

If you are at Sun, please be good to my old team: If they sometimes seem a little revved up or hyper-focused, it is because they are obsessed with delivering great designs and creating incredible customer experiences. Work well with them: Explain your business strategies crisply; attend their storyboard calls and walkthroughs; provide thoughtful design reviews (and on time, please); become advocates with them for best imaginable customer experiences. Learn from them how to leverage design thinking to visualize your desired end result.

I am really excited about my new gig at Cisco.com, and plan to start a blog there. You've probably noticed that Cisco is doing a lot of interesting and innovative things, with much more to come.

But please keep reading this Sun.com blog too, which we've turned into a group blog about Sun.com design and site features. I know that Jennifer, Marilyn, Lou, Tim, Greg, Chris, Linda, Paul, and the rest will be posting things here regularly. Uncharacteristically, Tim promises to use both verbs and punctuation.

Cheers.

- Martin Hardee

Technorati Tags: Design Web-Design CustomerExperience

Tunes: Black Eyed Peas: Let's Get It Started

Several friends from a well-known Internet retailer tell this story from a few years ago: Their CEO, who is a dynamic and convincing fellow, was excited about gathering more customer feedback about their company. In fact, he was so excited about this idea that he decided to take design into his own hands.

"We need a GREAT BIG comment box in the checkout flow," he told his team. The implementation team dutifully took this literally, and soon enough there was a huge comment box in the checkout that seemingly consumed almost half the page. Legend has it that users were confused, conversions dropped, and of course the designers were horrified.

What should the CEO have done instead?  Probably his instructions should have been more like: "We need to get a lot more feedback from our shoppers. Can the design team come up with some effective ways to get meaningful customer input at key touchpoints in the buying process, and lots more of it?"  Then there would have ensued a short discussion in the design group about best data collection methods and best placement for surveys or other mechanisms... and the result would have been much more effective.

Senior exectives sometimes like to do web design, because they are trying to help. After all, they understand business objectives and strategy thoroughly, so doesn't it make sense to fast-track things by offering explicit design direction?  The answer is that usually this backfires, because most VPs aren't designers nor do they have time for the many hidden and tedious details of good design process.

You won't be surprised to hear that sometimes we have this problem at Sun. In fact, I find myself often pointing to one of my credos previously posted, which is that "VPs shouldn't do web design." And yet every now and again, we get a random missive from any one of our VPs (whom we love, mind you) that says something like "we need a BIG RED signup button on every page to promote my event" or "we need my product logo on every page so people will buy it or download it."

Of course, big red buttons and logos placed willy nilly around the site probably won't do what the executive is intending because (1) they look terrible and create noise, and (2) they aren't likely to be nearly as effective as a solution tailored to a specific objective such as increasing event sign-ups. It is hard for anyone to resist playing designer, but when VPs do it the design suggestions are often interpreted as outright commands, and often get implemented verbatim even if they're a bad idea. So, we usually talk the VP down and come up with a better, designed solution.

But all the talking eats up a lot of time. And, fundamentally, a dictated design solution from a VP is starting at the wrong place: Vice-Presidents and above in any company should be thinking about strategy and high-level business objectives, and then communicating those things to their minions. In the case of the event sign-ups or product logo examples above, it would be a lot more effective for them to tell their web team: "We need about 900 more sign-ups for this event for senior developers... can you drive something online with our campaign?" or "We need more downloads of product X, what can you do to make people aware of it and get them to try it?" or "We want to build a community of a million college students sharing tips and preferences about lip gloss" or even "We have a big product launching Wednesday and want to make a mega impression on the web." These are directions that a web team can take and execute on with great design and web strategy.

Here's another story, which illustrates a more complex problem I call the "cluster of designer VPs" syndrome. This is where you'll see multiple executives trying to do design together. Often, they're actually disagreeing about the strategy and design direction, but think they're agreeing, which makes it all the more difficult to follow for us on the design team.

For instance, recently we launched a subsite that the product team had been working with us on for around six weeks. We learned late that there were a lot more interested VP stakeholders than we'd originally realized, and that the product team hadn't managed to brief them until a few days before the site launch. So, Thursday afternoon before a Tuesday AM launch, the executive design direction started filtering in.

The conversation went something like this (I'm paraphrasing a bit to protect the innocent), mostly in email about JPEG comps:

Chris (our visual design director): OK, here are the designs approved by brand and the product team. We're really excited about them and think they really hit the mark.

VP #1: These are pretty good... but could you make it more like a big Wurlitzer jukebox, and more colorful?

Chris (a day later): OK, we really hadn't gotten the jukebox input before, but here are some more Wulitzeresque comps.

VP #1: Yeah, this is what I'm talking about!  Let me copy the CEO so he can see too.

CEO: Well, of course you should rely on the direction of your web team... but I think it should look more like imdb.com. Let me copy 3 more product engineering VPs so they can add their comments.

VP #1: Exactly what I was thinking -- like a big colorful jukebox but also minimalist like IMDB.

Chris: Um, guys, it's Friday and we need to lock this down really quickly because we have 50 pages to get into production.

VP #2: I hadn't seen this before, but shouldn't it look completely different? Maybe we want to diverge from the brand completely so we can make a statement here.

Chris (Friday evening): OK, so we have the jukebox design, and also here's a more minimalist design we did back in round 4. Let's make a decision between the two of these and lock it down Saturday morning so we can get into production.

VP #3: Form... follows... function.

VP #1: Maybe we should hold off on the subsite launch until we figure out the design direction.

VP #4: Oh, we have to launch it... we have already prebriefed a bunch of folks and the product is ready to go!

VP #1: I like the jukebox; let's go with it.

VP #2: I like the IMDB idea. Could we design something like that? These comps don't quite work for me.

Chris and me (Saturday noon): Um, guys, it's Saturday noon. Someone needs to pick the direction from the two comps by tonight at 6 PM or you will not have a web site on Tuesday morning.

VP #4: What time are we launching, anyway?  Is it 8 AM Pacific time?

VP #2: I thought it was 8 AM Eastern time.

VP #4: We should figure that out.

Chris and me (Sunday 11 AM): We haven't seen any more feedback or decisions. How about we just go with the jukebox design?  Could we just do a quick concall?

VP #5: I just saw all this email. Let me have a look at the designs and I'll send you input Monday morning.

Assistant to VP #4 (Monday 8 AM): We've decided to put the launch on hold so we can sort out the design.

Chris and me: OK, we'll stand down.

Me to Chris, privately: I would keep working on this. They always change their minds at the last minute!

VP #4: (Monday, 4 PM): We just had a big meeting and decided to go with the jukebox design.  And, it's launching at 8 AM Eastern time, 5 AM Pacific.

Chris and me: Um, you realize someone in publishing will be working on this all night, right?  Will someone be up to review the final staged pages around 3 or 4 AM?

Assistant to VP #4: I don't know, that's pretty early for our folks but we'll see what we can do...

So, somehow the subsite launched and despite all of the machinations everyone was happy with it and there were lots of congratulations on a job well done.

But, there are four big lessons from the project. First, senior executives typically shouldn't try to do detailed web design but instead should communicate strategy and business direction so their web teams can execute on design and deployment. Second, make sure you understand who all of your stakeholders are and get them involved early. Third, have a single decision maker in charge, so you know who is approving final direction. And fourth, lock down your designs a week or two ahead of time so you have time to execute sanely.

It's worth mentioning that do have VPs at Sun who have keen sense for design. Curtis Sasaki, our VP for Sun.com, has an inspiring vision and a very good visual design sense. John Fowler, the EVP for Systems, is a gifted writer and has actually rewritten some product pages on occasion. Ingrid Van Den Hoogen of Brand of course has an excellent sense of brand.  But the thing I notice is that the more design talent an executive has, the more like he or she is to give strategic direction rather then get out the crayons and start to color.
 
My advice for your company, big or small, is simple: Don't let your VPs practice design without a license!

Technorati Tags: Design Web-Design CustomerExperience

Tunes: 26: Rob Thomas: Little Wonders



 

My team and friends threw a wonderful bon voyage party for me on Saturday.

Marilyn and a toast...



My friend Eric. We sampled many different vintages....



Marilyn & John's son Michael, donning the fabled RSS costume.



Our son James (playing the entirety of The Who's Tommy, compressed into 10 minutes) and our daughter Blair....



More on Flickr.

Sorry Chris, Elaine, Droo and Lisa (California) and Jennifer (Minnesota) and Maura (Boston) and Tim (UK) couldn't jet in, but I will catch up with them soon enough.

Thanks for the great party, everyone!

A while back I put together some slides to describe our design process at Sun to interested colleagues at other companies.  It's a pretty detailed slide deck (see link below), but there are a couple of key ideas.  One key idea is that 80-90% of the projects we see don't need a new design -- they just need standard templates and a standard treatment applied.  In those cases, we don't do very much design at all. We call these the "fast track" or "turn key" projects:





Here's how a "turn key" project works: We capture the initial requirements in an intake form (not shown here, but use your imagination of something that hovers just above the ideas phase). Then, if the project is non-trivial we ask the person requesting it to create a short strategic brief (a topic I have blogged about previously). Once we have these initiation steps complete, we can size up the project pretty quickly and understand whether it is something very standard ("turn key," as shown above) or requires new design work. The example shown above shows an informational page that we determined would simply need a standard template. So, in that case the team creating the page(s) would simply figure out their content and calls to action" (what they want the site visitor to do), and the right components. They'd then request some artwork from our central process for banners and graphics, put the page together (or have one of our publishing experts do so), and they'd be done. This process can take as little as a day or two if all of the pieces are in place, but of course usually it takes a while for the sponsor to figure out all of their content and objectives, and sometimes content and objectives change in the middle of the project (which eats up time and money).

But then there are the non turn key projects: In some cases, when we look at the strategic brief, it's clear that we need a brand new design. This can range from something simple -- like a new or extended template type -- to something complex like an overhaul of the search system or a rollout of a new commerce subsystem. That's when we bring in our full process:



In this full design process, we pull out all (or many of) the tricks: We review or gather customer research; analyze best practies from other sites; study site metrics if they apply; create simple scenarios, user stories and business use cases to model the experience; storyboard and walk through ideas; and then develop schematic wireframes, test, iterate, and create the final designs. This blog you're reading has been focused on this very design process (for instance, see Opteron Pages as a Web Design Case History), and I know my team at Sun
will keep posting about these best practies even after I have moved to Cisco.com, now this this is a group blog!

The full Design Process slide set explains a lot about our design process and the tools we use.  Ask your friendly local web design team at your company to explain the nuances -- they'll be glad to!

Technorati Tags: Design Web-Design CustomerExperience

Tunes: 94: Lefty Perz: Solseros Unidos

Web analysts SiteIQ posted a nice article recently about Sun.com. Here are some excerpts:

• "Although Sun.com ranks third among the enterprise systems Websites based on overall score in our evaluations, we think there's more to this site than rankings."
• "This site continues to have one of the most effective hardware selection and discovery clickstreams in the IT industry"
• "Sun.com is a pioneer in the use of now-classic Web 2.0 features, including inline video, blogs, podcasts and RSS feeds—and has been especially adept at weaving these features into the site's current clickstreams and content architectures."
• "Sun's new e-commerce clickstreams, which eliminate duplicate marketing and e-commerce catalog pages have streamlined the e-commerce experience for visitors and are a blueprint for companies"
• "Sun's integration of customer (discount) prices into its public site e-commerce experience is the first step in creating a world where customer extranets cease to be a distinct destination"

You can read the full article on the siteIQ web site.

Technorati Tags: Design Web-Design CustomerExperience

Tunes: Elton John: Goodbye Yellow Brick Road

Here's a little pet peeve I'd like to get off my chest: I hate passive voice in research reports, metrics updates, or in fact any kind of business communication.

What's passive voice?  Here's a comparison with active voice:

Active voice: Sally is reading the RSS feed.

Passive voice: The RSS feed is being read by Sally.

Active voice almost always works better with your readers, since with passive voice it often sounds like you're trying to hide something or obfuscate an issue.

Example

Here is a very simple example from one of our internal newsletters that shows how changing from passive to active voice makes an article easier to read (I have substituted "curling" for the thing the site actually does, since embarassingly we're stil fixing one of the problems mentioned):

BEFORE (Passive):

International Sun Curling Sites Informative, but Inconsistent

Three studies on Sun curling sites have been performed, one each on the US, Netherlands, and Singapore sites. The US site was tested several months ago and most recommendations have already been made to the site, improving the user experience. On the international sites, information is seen as informative and positive, but somtimes broken links or paths lead to dead ends cause struggles for the customer. The sites should be made more consistent, error free, and steps to lead the customer to and through registration should be simplified. Issues for process improvement regarding global usability execution were also addressed separately.

For a details, see [url of full report]

AFTER (Active):

International Sun Curling Sites Informative, but Inconsistent

Sun is making some improvements to Sun's curling sites based on feedback from customers in usability studies. Over the past several months, we've run studies with customers using the US, Netherlands, and Singapore curling subsites.

Most recommendations for the US curling area have already been made, improving the user experience in several key areas.

But the study found that customers who use the non-US subsites may encounter broken links or dead-end paths. The report recommends simplifying the registration process and ensuring that the curling areas on non-US sites are more consistent and error free.

One piece of good news: International customers looking for curling are likely to be impressed with the quality of the information they read and find it helpful in making buying decisions.

For a details, see [url of full report]

Technorati Tags: Grammar Web-Design CustomerExperience

Tunes: 73: Dick Haymes: Blue Skies

Even though I didn't start there yet, some of the Cisco.com gang invited me to join them on a Segway outing Wednesday.  Fun!





Thanks to Keith for taking these pictures with my ancient Treo 600 camera phone.

- Martin Hardee

Tunes: Death Cab for Cutie: Marching Bands of Manhattan

A good article on design comics at Boxes & Arrows this week.

Technorati Tags: Design Web-Design CustomerExperience Comics

Tucked away in Tamara Adlin's and John Pruitt's book The Persona Lifecyle is a gem of a process for brainstorming about and mapping out great experiences. The process is called "Design Mapping" and builds some neat ideas from general brainstorming technique, process flow, affinity mapping, and other techniques. Parts of the process are a bit similar to Patty Seybold's Customer Scenario Map process, but Design Maps are a little looser and more organic and don't really need training if you're working with an experienced and clever team.

Here's how it works, from a chapter of the book by Tamara and co-authored by Holly Jamesen Carr.  In this simple example, they take a known process (making a pot of coffee) and annotate the Steps (blue) with Comments (green), Questions (yellow), and Ideas (pink):



We used this technique to design many of the concepts in our My Sun Connection portal. In our case, since we didn't have an existing process to map, we dived in with a "desired state" flow and we slightly modified the stickies categories: Task (blue), Observation (green), Question (yellow), Issue/Note (pink).




After about 45 minutes of brainstorming, you'll have a pretty well populated wall of stickie notes. Here's a picture of Jennifer, me, and Marilyn who worked together brainstorming the flow of downloading a product and having it get provisioned into your portal. (Margaret did a lot of the brainstorming, too, but I think she is the one who took the picture.)



Here's a close-up so you can see the large number of ideas generated in a short time.



When you're done, you have a nice set of notes that you can turn into a flow for the project (the sparse area at the right represents some followup steps that happen over time):



And a few magic steps later, we had designed, engineered, and launched the portal:



By the way, we're still working on a few of the ideas that we came up with during that afternoon Design Maps session many months ago.

- Martin Hardee

Technorati Tags: Design Web-Design CustomerExperience

Tunes: Dashbard Confessional: So Long, So Long

Here's something innovative that our team came up with recently: A way to combine the convenience of and simplicity of wireframes with the code-rich advantages of HTML mockups.

In case you don't know, wireframes are schematic versions of web pages that we in the web world use to develop designs quickly. (For an in-depth explanation, see my previous posting Tigger, Pooh and Judy Jetson meet Wireframes & IA.) 

Among the advantage of wireframes over regular HTML mockups are that (1) they are quick to produce, with the right tools, (2) they focus on content, labels  and structure rather than the visuals, thereby avoiding the visual distraction during executive reviews, (3) the document format allows for lots of annotations and background information if needed, and (4) they are easy to share since all the pages are bundled up in a document. (See the end of this post for a few disadvantages.)

Here is a wireframe version (left) of the Corporate Responsibility section we recently launched, along with the final live design (right):



You can see that even though there was some cleanup in the final live design, the wireframe captured the basic structure of the page early on. That's what wireframes are good at.

But the drawback to wireframes is that usually, once they're approved, you have to manually transfer the ideas into HTML code.  That's painful and error prone, and we decided to automate things. 

See that little pink mark next to each of the components on the page close-up below? That's a link to the the appropriate component code from our Web Design Center:



Yep, when when you click on the pink mark in Acrobat, it opens up the appropriate component code, which is great for publishers or application developers, who can work directly from a finished and approved wireframe. Use Adobe Acrobat to open up our full wireframe of the Corporate Responsibility area and you will see how it works. (Note that the links don't work in programs like "Preview," so Acrobat is your best bet.)


Here's the interesting thing from a creation standpoint: These wireframes, with their interactive linkages, are very quick to put together, since we have created components in Adobe InDesign that mirror all of our HTML components in our design system. When our information architects or agencies need to put a new page together, they drag in the appropriate components and voilà they have a page. And when the page gets generated as a PDF, InDeisgn creates the linkages to the HTML components automatically.

Our chief information architect Jennifer Bohmbach and designer Andrew Payne came up with idea and developed it with our vendor 8Shapes. Jennifer and others uses these tools every day, and I hope will post more detail about it.

P.S. There are some times when wireframes don't make as much sense or are a waste of time. If you are developing a fair number of brand new components for a project, especially if they are interactive, it makes sense to do the mockups in full HTML so that people can understand how the new components will work together on the pages. On a recent commerce project that included popups and AJAX components, we did everything direct to HTML and it was very effective since everyone involved could play with the mockups and see how they worked. And, for highly interactive experiences, many design groups are using Flash to do initial prototyping. But, for many pages on your site, wireframes are a tried and true tool and will be around for some years to come.

- Martin Hardee

Technorati Tags: Design Web-Design

Tunes: Sara McLachlan: I Will Remember You

Thing 1: the adgoodness blog from Frederik Samuel.

Thing 2: Mary Neumeier's book The Brand Gap. The best (and shortest) brand book around.



Technorati Tags: Design Brand CustomerExperience

Tunes: Beatles: Hello, Goodbye

I was talking to one of my favorite best practies web analysts last week about the "G" word: "Governance"

Governance is something that corporate web teams tend to obsess about, because in big companies (which usually have big web sites) it's really hard to implement a consistent experience, design, and voice. And, inconsistency is bad  -- it confuses customers as they move from one section to another trying to buy your products, get support, or just get to know you.

Most companies have unified roadmaps, as well as committees who try to coordinate governance across areas of their web presence. We do that at Sun, too, of course. But it seems some of our other practices are at least as effective as the roadmaps and meetings: As I described how our processes work to my web analyst she pointed out that Sun has some very good "control points" that make that governance easier. Here are some of them:

Turnkey templates - We have standard templates defined that serve specific purposes.  Examples are our product pages and landing pages. We're in the process of documenting a few dozen templates in excruciating detail, but even having basic documentation and live examples to point to is a huge help.

A well-documented component system - Our pages are composed of well-defined components that fit into the pages in standard places. We document all of the HTML components used on the sites in detail, so that all of our web apps, publishers and vendors are using the same standard set.  You can see most of our component designs and code at sun.com/webdesign.

Standard CSS - Sun's sites use a common CSS and common .js files that ensure that
components get rendered the right way and behave consistently. A big side benefit of the
standard CSS is that we can roll out design changes very easily. For
instance, we added a "share this page" widget to all our our pages
recently by simply hanging the new functionality on the page title
style (div class="pagetitle").

Standard content management system(s) - I wish I would tell you that all of our external sites run from a single content management system. In fact, we have several content management systems globally, but the good news is that we have reduced the number dramatically over the years. That helps enforce consistently, and moreover, all of these content systems and their associated renderers take advantage our JHTML component system and style sheets. So, even when pages are being served out by different systems they all look and behave the same.

An intake process for new projects - This isn't perfect, but we have
inbound queues of new projects that our design and publishing teams
stay on top of. These queues give us visibility into new projects that
are starting even if we're not driving them from the web team. Having inbound queues (and weekly review meetings of the projects, plus a fact-track for emergencies) helps us stay on top of things and also examine commonality across independent projects. Two reasons this isn't perfect: (1) We should do more engagement management up front to scope ideas before they become projects, and (2) with dozens of new projects per month, and no matter how organized we are there is too much to keep track of!

Vendor selection and training - Because of the volume of work that comes across our sites, we often need to use design agencies.  Since we have a small, defined list of agencies -- whom we train either formally or informally on our component systems -- we know they'll produce consistent stuff. (Sometimes internal groups go off and hire non-standard vendors, and the integration of the work from these untrained agencies can become a nightmare.)

Design briefs - For bigger projects, we require a strategic brief (a.k.a. a "design brief") to get started. This document describes design objectives, customer goals, business drivers, stakeholders, and other key bits of information.  You can see one of our more elaborate design brief examples that I posted a while ago, though we typically use a shorter form. Creating some kind of project brief is a key way to focus your projects, especially if you are planning to engage someone outside to help with the work.

Walkthroughs and Storyboarding - If you are launching something new and different, it's very important to gather everyone together at least a few times during development, have someone pretend to be a customer or site visitor, and walk through the experience that will be created. You can do this with paper, with online wireframes, with quick rough HTML mockups or slides, or with the comic storyboards I've blogged about previously. But the important thing is to get everyone together and walk through the experience. This is a great governance trick because it gets everyone to focus as a team on what is being created. On a big project, you should walk through many key scenarios and rinse and repeat until you get it right. (BTW I wrote more about this walkthrough topic as part of a larger posting about avoiding bad experiences online.)


(Virtually) central publishing - Web publishing at Sun is concentrated
into a few groups who know our web standards very well. Even groups who
are distrbuted feel like part of a bigger virtual team. This level of
camaraderie and common process is important to ensure consistency.

Domain, hostname, and marketing URL approvals - This is a final early warning system we have at Sun. Things on the web run fast and sometimes a bit chaotically, and, believe it or not, sometimes web projects will spin up without our knowing about them. But we have a secret weapon: In order to register a new domain, get an external hostname, or set up a marketing redirect, folks have to fill out a form. If we get a hostname or subdomain request for some project we've never heard of, it's a hint we need to spring into action.

Video training - Lately we've been doing very short, informal video training and pre-recoded presentations that show best practices in action. These have been popular and also are a quick way to spread learning across the company. (If you are internal to Sun, you can email me for a pointer of our Best Web Marketing Video Ever, for instance.) Though training isn't exactly a control point, it's important to have people up to speed on your web best practices if you want any hope of governing the overall experience on your external web.

What control points work well to support governance in your company?

Technorati Tags: Design Web-Design CustomerExperience

Tunes: 43: Jawbox: Spoiler

A fond farewell is ahead for Sun.com and me. At the end of this month, I'm going to join the team at Cisco.com where I'll be helping with the Cisco online presence. 

This is an exciting change, since I've been involved with Sun.com beginning with the launch of our web site in January of 1994 and have helped shape many of our key Sun properties including www.sun.com, java.sun.com and My Sun Connection.  It's been an exhilarating ride at Sun for these years, and we have a wonderful and talented web team whom I will miss. But, at the end of the day, you gotta love those Cisco TV commercials:



P.S. I've talked to my team here about remaking this blog into a Sun.com team group blog. And of course, I'm sure I'll be blogging from Cisco.com once I get settled.  Stay tuned for more.

Tunes: The Who: Baba O'Riley

Technorati Tags: Web-Design

My colleague Gary Zellerbach, a hologram expert, points out that if you take a stereographic photo and alternate the two frames in an animated GIF, the illusion of a 3D picture is created.

Gary's friend Mark Diamond has set up a section of his web site that is a great showcase of these "shakeygrams." Below is one example*:




* Mark, Gary said it would be OK to include this picture here.

Technorati Tags: Design 3D

Over the last few months, we've added some neat feeds in your Sun portal that are tied to some of the products you own and interests you have. This is still a bit experimental, but I find it really useful.

First, to get you your My Sun Connection page, go to the My Account dropdown on any Sun.com page:



Poke around, and you'll find several nice RSS feeds embedded within the portal.  Via the support tab, you can subscribe to Sun Alerts and patch report updates:



On the My Products tab, you can get feeds about specific products you own (right now we have a subset of products in My Sun Connection, but that includes some big ones like Solaris):



And on the Developers tab, you can set up custom feeds of Sun blogs based on keywords.  For instance, here's one I set up on "Design":


Enjoy!

Technorati Tags: Design Web-Design CustomerExperience

That's snow on the mountains in the distance, but here in the valley Spring has sprung.

Most causal users of the web probably wonder about those square orange buttons that are popping up all over web sites. You know, the ones that used to say XML or RSS and now look like some kind of broadcast symbol.

So, Danny (our video intern) and Lou (our communities producer) put together a cute video to show what RSS is and how it works in Firefox and Thunderbird.

Oh, and they tricked me into playing the role of "RSS Thing" in the movie:




Here is some advice. If your colleagues at work grab you late on a Friday afternoon and ask you to don an Orange costume, run the other way. Especially if they have video cameras. Otherwise you will end up in an embarrassing video like this.

Nice work by Mike, Margaret ("Sally"), Danny and Lou.

Technorati Tags: RSS Firefox Web-20

Hey, I got quoted in the Wall Street Journal this week, in Sarah Needleman's A Customer's Designer article*.  Here's one of my pithy quotes:

The work calls for creative individuals with strong communication and
sales skills, says Sun Microsystems' Mr. Hardee. "It's not enough to
have an idea," he says. "You have to make it happen." Research and
analysis skills also help "because there's a whole stream of data on
user behavior," he adds.

P.S. My wife says I work more than the 65 hours I quoted to Ms Needleman.

* P.P.S. You may need a subscription after next week, but this WSJ article will be free for a few days at least.

And the really, really cool publicity thing this week is that someone told me our design comics are mentioned on Edward Tufte's blog site, and Professor Tufte (E.T.) himself weighs in with a comment about our Nutcracker Suite example.

Technorati Tags: Design Web-Design CustomerExperience

Sun's developer sites got a nice mention from web analysts SiteIQ this week, and nothing sums it up better than this cute chart:



(They really should use "flying duke" emblem for this ship, though, dontcha think?)

What's better about Sun's developer sites lately? Well, SiteIQ says they like "new user-centric interfaces, product marketing pages that are nicely
compartmentalized—and a design that avoids overloading visitors with
massive amounts of information. Quite frankly, SDN’s usability
improvements are so dramatic; it’s hard to believe the transformation."

If you're a visitor to the other Sun sites, you'll notice several of these innovations are from our core design system. Others are special touches the Sun teams gave to the developer sites specifically. A couple of points from Jennifer Umstattd, who championed a lot of these changes (with much help from our friends who do all the producing on the developer sites):

• We didn't look at this as a complete redesign, instead we've focused on  defining the overall navigational architecture then iterating on the site -- both in terms of updates and also cleaning up old content -- section by section in order priority (based strongly on what areas of the sites the users are going to)
  
• By working on this "ifnormation architecture" we've been able to present much more compelling information, value and offers to our Sun Developer Network (SDN) members
  

What's missing?  SiteIQ suggests more interactive community functions. Their posting will be up soon at their blog site (where you can also subscribe to their newsletter feed).

Oh, P.S. (and I am sure you know this since we bragged about it incessantly on the sites)... our developer sites also just won the coveted Jolt: Web Sites award!


Radio: 1010 WINS

Technorati Tags: Design Web-Design CustomerExperience

As MaryMary points out, the weather in many parts of the continental US isn't great this weekend. Here in Colorado, the pavement was too wet for Rollerblading, and there wasn't enough snow on the ground to ski around the neighborhood.

So, I did my next favorite thing, which is to hop on the treadmill, rev up the motor, and watch usability tests:

This is a screen from one of our recent tests, in case you were wondering.

Here's how usability tests work: When we are curious about how well something will work in a design that we're developing -- or perhaps about how customers do their day to day work with our software, systems, and web sites -- we can invite them into our fancy lab (complete with a two-way mirror like you see in the movies) and watch them use our web sites. Or we just call them on the phone and do a WebEx or GoToMeeting session remotely to do the same thing. We'll do this with 6-8 people per study, and learn all kinds of things about our web sites and products before they go live.

Anyway, once neat thing is that we stream these studies live on our intranet (with the particpants' permission, of course) so anyone in the company can watch the sessions as they're happening and learn how to make their site sections better. Also, because Sun people and customers are distributed worldwide, we host a replay on the intranet so that people can see the video later if they couldn't catch it originally.

This playback works great for me, because I never have time to watch all of our sessions live. Instead, I can treat the study list as an adjunct to my NetFlix library: When it's raining and cold, I set up my laptop next to the treadmill, plug in the headphones, and start power walking and scribbling notes while I watch our recent tests.

I find I get a longer workout, too, since I'm always curious what surprises lie beyond the next link or button... believe it or not, sometimes the usability tests play like a suspense movie!

Tunes: 71: Fattburger: So Far So What

Technorati Tags: Usability Design Web-Design CustomerExperience