Designing The Digital Experience

  • 1,633 views
Uploaded on

Presentation version of my book, Designing the Digital Experience, given at Computers in Libraries 2009. Focuses on creating digital experiences on websites.

Presentation version of my book, Designing the Digital Experience, given at Computers in Libraries 2009. Focuses on creating digital experiences on websites.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,633
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
62
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • So - what IS experience? [click]
  • Experience Economy - Pine & Gilmore say this: “experiences are a distinct economic offering ... Experiences result when a company uses tangible goods as props and intangible services as the stage for engaging each customer in an inherently personal way.”

    - Pine and Gilmore claim that our economy is changing.
    People have enough money ... and they don’t want simply goods anymore ... they can get goods & good service anywhere.
    Instead, they want to go one further, and buy an experience.
    Think about a restaurant. You can go to McDonalds to buy a sandwich. Or you can go to Applebee’s and buy a better, larger, tastier sandwich with better service. Or you can go to the Hard Rock Cafe, and have a rock star experience ... and get a meal along with it.

    That’s buying an experience.
  • then we connect experience to design

    Nathan Shedroff defines experience design this way: experience design is \"an approach to creating successful experiences for people in any medium.“ nathan.com - that includes digital experiences
  • The doll, right? But not just dolls.

    We visited the Chicago Am Girl Place - shopping, museum-like displays, a musical, tea-time, get your doll’s hair done (and a gameboy for the boys) ... all the books ...

    Website - games, ecards

    american girl is all about the experience....

    And, of course, on getting more of my money…
  • Harley Davidson site - events, factory tours, ride planner, rider education, maps, etc...

    What’s missing? Actually buying a motorcycle! It’s all about what to do with your motorcycle – guided experiences!
  • Now that I’ve intro’d you to digital experience design, I’d like to introduce three concepts, or paths, to designing digital experiences

    very different from each other, but all focused on providing an experience:

    structural, community, customer paths.

    [click]
  • let’s start with the structural path. What is it?

    creating a better experience by improving a website’s ease-of-use.

    Great customer experiences happen when customers can focus on their own goals, rather than on how to navigate your site.

    what do I mean? Think about lightswitches and bathrooms for a sec...
  • Lightswitch:
    want to turn on the light - you don't want to think about breakers, which way you have to flip the switch, etc...

    Bathroom:
    When you’re at a cool restaurant and need to go to the restroom, your goal is not to be wowed by the naming scheme or signage of some “wayfinding” expert, right?

    a well-designed digital experience should, in most cases, stay out of the user’s way
  • kathy sierra (creating passionate users) explains this well

    I think this is usually the goal - focusing on you

    not on “cool features”
  • 3 different approaches to experience through structure
  • #1: Jesse James Garrett - his elements of user experience - excellent book

    - explores a structured process of digital creation

    Start at the bottom, and move up: strategy, scope, structure, skeleton, and surface (very briefly what each area is)

    from start to finish, or strategy to surface

    logical and linear
  • #2 - David Armano’s Experience Map

    5 steps: Uncover (customer needs, org needs), Define (experience brief - not a functional specs document!), Ideate (immersion), Build, and Design
  • #3: 37signals book - they don't focus on logical steps, but they do tackle experience design - go read it - lots of good stuff here!

    functional specs
    - Don’t write a functional specifications document
    - instead, dive in - brainstorm, paper sketches, build a prototype, then code it... goal is speed!
    - fine-tuning is done by customers
    - if you do need a directional document... write a story! that experience brief again ...

    Simplify - google docs as example

    [click]
  • My library and the structured path -
    lots of planning before building our new site
    focus groups, discussions
    Same with a redesign we’re working on now - more usable, less cluttered is our goal
    This is all very fluid, very “let’s change it now” mentality - not a “next march is our deadline” mentality
  • so - 3 different views of structured experience. What do we do with it?

    - look at your websites with critical eyes
    - think about what makes people stumble - and work on removing that stuff
    - then figure out some goals - what needs to change, how/when to change it/who will do it

    Big goal – customer doesn’t want to think about your site’s structure… I want to think about my stuff!!!

    Do your job well with usability and helpful information architecture, and your customer will be able to successfully complete business, without distraction
  • So that was structured path

    how about focusing on community next?

    What’s that mean, and how does it help provide positive experiences for your customers?

    a comm focus is a memorable experience, created through online participation and community
  • here’s one example - a town hall meeting.

    What’s going on? Conversations are taking place: traditional conversations, formal “listen to the speaker” conversation, Q&A types of conversations. There are discussions during breaks and jokes over a cup of coffee.

    How about a digital version?
  • Amazon’s customer reviews and the ability to rate the reviews.
    - One review is interesting - ability to read 100 reviews of a single book is what really turns this into a community-focused experience. That’s a pretty cool superpower that didn’t exist before the web.

    and is a great example of digital community-focused experience

    5 ways to do this: real conversation, invitation, participation, sense of familiarity, & telling our stories ... let’s look at each of these ...
  • Real conversations taking place

    This can happen in a variety of ways, including commenting on blogs and other areas of a Web site, or it can be through services like instant messaging or micro-blogging sites like Twitter. An online forum is another way to hold conversations.

    - the slide shows my library’s myspace, youtube, flickr, and blog comments
    - The goal/challenge with conversation in digital spaces is to allow your customers to connect with you and with others.
    - Connecting with you is important. Your customers want to interact with you. they do it in your buildings, on the phone, and want to do it digitally too
    - They also want to connect with each other. book review comments on my website

    So - think customer reviews of books in catalog, comments on various websites and services... real conversation.
  • two types of invitations - passive and active:

    point out circled stuff - active invitations (asking)

    passive invitations
    Content enablers focus on making content compelling - Displaying content, Creating compelling content, Using action-oriented titles on posts, Including links with posts
    Web tool enablers focus on making content accessible and usable - Allowing commenting, Moderating promptly, Including RSS feeds
  • Participation is extremely important in providing community-focused experience. No participation, no community!

    Comments on my lib’s website - what’s the goal? Interact with the form? Not...
    - real goal is to participate in the discussion - comment box allows individuals to share thoughts and opinions with each other
    - In essence, you are telling your customers “I want you to add your thoughts. I want you to continue the conversation. I want you to participate.” Here’s an example from a blog.

    Commenting/walls/friending - all ways to participate in a digital community.
  • sense of familiarity - outgrowth of participation and invitation

    flickr - who has flickr friends here... discuss.

    Even subscribing to a blog will lead to some type of familiarity, since you are reading/viewing something the person has created.

    Same with a library - organizational familiarity. patrons read/watch/view our library thoughts, our stuff, and see our organization’s personality... they become familiar with the library.

    Pretty cool concept
  • What’s so important about telling stories?

    people want to know “the story.” They want to know who U are – what your credentials are, what else you’ve developed, and if you like using the product... and what shortcuts you take when using it.

    People want to participate in the story. They want to feel like they are part of the story, like they are the next chapter. This happens currently in Second Life and gaming. Flickr also allows you to visually participate in the story.

    People want to continue the story. Katrina hurricane peeps had one story to tell... But then that story continued – when they revisited their houses... when they received their FEMA trailer to live in... etc

    And others can add to the story, too. I did ... I was able to continue one track of the hurricane Katrina story.

    lib stories - what you liked/didn’t like - what you read - what the library reads, does, etc... video etc.
  • One example using twitter. twitter is all about extending our reach into the community:

    1. experience of community - we tell patrons about events, cool things in the library, etc
    2. answer questions: “@allieadams you have a little time. we don’t charge late fees, unless it’s checked out a very long time, then you pay replacement costs”

    3. back-channel conversation – at conferences, share your thoughts with everyone. added depth to the presentation that wouldn’t have existed before - chat without making noise...

    value-added via community tools
  • Another example from this morning’s keynote:

    Eric and Jaap livestreamed the keynote session - they were interacting with people on twitter and in the ustream chatroom, too

    They extended the community experience ... out of the room ... out of the building (for our libraries). Why not livestream your events, and stretch your reach outside the library, connect with community OUTSIDE your building?
  • Here’s what we’re doing on the community path. We’re connecting to our patrons in many ways, including (read slide).

    With all of these, the goal isn’t to use the new tool. It’s to hold conversations, to connect with the community, and to participate.
  • Finally, the 3rd path - focusing on the customer.
  • anyone do this last night?

    last 10 years or so, there has been a “hotel bed revolution”

    Starwood Hotels & Resorts were the first to focus on providing ultra-comfortbale beds. They created the “Westin Heavenly Bed” which prompted other hotels to focus on the guest sleep experience.

    Well, duh!!!!!! Why wouldn’t a hotel do that? Gee...
  • Another example - SportClips Anyone here use them?

    Sport Clips recognized there were no “just-for-guys” hair salons. So they made a haircutting place for men who like sports.

    watch sports on big-screen TVs while getting his hair cut
    The waiting lounge resembles a locker room and has sports-themed magazines
    interior features sports-themed décor, and there’s even sports memorabilia for sale

    Sport Clips isn’t just providing a haircut – every salon does that. Instead, they’re providing a sports-themed, TV-watching haircutting experience. The actual haircut is just part of the complete experience.
  • what’s this look like digitally? Examples...

    Webkinz - secret code/Webkinz World - games, feed your pet, set up a room for your pet, buy things for your pet with virtual money, and chat with other pet owners
    - extend their brand into your home. It also allows pet owners to extend the fun they have with their pet.

    Starbucks - extend your coffee aficionado experience, on the Starbucks Web site. You can find out about Starbucks coffee.
    Coffee taste matcher – to help find your “personal taste” of coffee
    Education on tasting coffee – how to’s, what you should notice, etc. – very similar to wine tasting
    Information on grinding methods
    The history of coffee and Starbucks
    Coffee bean growing regions

    extended the Starbucks experience online through content and sales
  • What do webkinz, starbucks, & harley davidson have in common? They are all working to extend their physical presence into digital spaces, which involves thinking differently about the Web sites.

    Focus on the Show - or staging experiences.
    - holding pre- or post-shows for the “main event” (buying the thing).
    - Starbucks post-show includes detailed info on the coffee you just purchased
    - libraries - group read, then discuss on web - event is checking book out - post show is the discussion. Pre-show = book review?

    [click]
  • Community Connections
    - Most people don’t really want to interact with information, or with a Web site. They want to interact with other real live people!
    - Webkinz - meet stuffed virtual pet, also meet other pet owners
    - harley - events, ride planners - goal is to meet people (and enjoy the motorcycle)
    - creates a digital community connection.

    Not About the Product - the site isn’t about “the product itself - It’s more the experience around the product.
    - Webkinz World, for example, doesn’t focus on getting kids to buy more Webkinz pets
    - The site’s goals focus on interaction with the pets and other owners
    - It’s about extending that physical experience into the digital space in a way not really possible in the physical space.

    Goal here is to provide great customer experiences.. online.

    Two ways to do this [click]
  • buying a car - The first step in the car-buying journey isn’t visiting the showroom - usually some preceding steps - like a blown head gasket on your current vehicle

    Customer journey mapping ... maps out touch points – figure out each time a customer “touches” or interacts with, your organization, provides valuable insight into the messages your customers receive - does 2 things:

    provides insight into customer needs – how they feel during each experience, and how your company or organization should treat its customers during each interaction.

    provides customer focus - who is in the center - customers or staff?

    Customer journey mapping can turn those interactions around so that customers are at the center of the experience
  • So - customer journey mapping of a library catalog search
    - before the search - where are they? Home? How did they get to your site? At the lib? How are your PCs? LInks on the PC?
    - starting search - where can they start? Is it easy to see and use? Familiar?

    A journey that needs to improve!!!
  • What do I do next? Probably click on a book/title... that’s ugly, but straightforward
  • How about the next step of the journey? How do I put it on hold? Click the red HOldings word? No... maybe click request item... ???
  • Here? Ick. What do I do? What is this? Can’t we do something wit this white space?

    And etc - After they put it on hold - what next? where do they pick up the book? What’s the mailing package look like? etc.

    We still have some work to do ...
  • Wd40 – the straw! chat about it for a sec...

    So, how can we improve the ordinary experiences people have on our websites?

    - figure out what “ordinary” means for our site. Poke around the major features and touch points of your site.
    - Is there a way, if you were going to build it from scratch, that you could improve the user’s experience?

    Think through these questions, and you’re bound to find a way to improve your site.

    I’d also suggest comparing your site to sites in other industries. I look at sites that my actual customers use. (ie., Facebook, Amazon, and eBay). Then we can look at the experience provided on those pages, figure out how to translate those experiences and those functions into a library Web site, and work backwards from there. This allows the web team to move from the ordinary (a normal library Web site) to the extraordinary (well, that’s the goal anyway).
  • Customer focus - we’re working on these things...
    Our first redesign was to take our website, which was an “ordinary library website” and to improve it. And we succeeded - our customers tell us that.
    Now we are working on improving the improvements...
  • Something I thought of this morning ... surprise & delight your customers! And use humor sometimes...
  • iPod shuffle instructions - Do not eat iPod shuffle


  • Not sure we’ll keep it but we want to do more of this: Notice the sun = sunny day when I did screenshot
  • This screenshot? Cloudy day ... simple little thing hooked to forecast... we don’t mention it.

    It’s a hidden fun thing...

    Yet another way to delight, surprise, and engage our users.

  • Wow

    We’ve talked about three paths to a digital experience - structure, community, and customer paths.

    What do we do with that?

    4 ideas [click]
  • 1. connect the customer...

    to the company.

    to the product. What do I do multiple times every hour? Visit Google rss/email/youtube - not search. I have definitely connected to Google’s products. This is easy for libraries - books. But how about connecting them to blogs/videos/even databases?

    to the extras. what do you do on Facebook? flickr feed/funwall post/twitter/etc
    Facebook apps – not actually Facebook. Facebook provides the space, and allows others to provide the fun. Hence, the extras.
    We can do that too via participation and invitation

    to other customers. This happens in many ways, including blogs, photos, videos, microblogs like twitter, or even a discussion forum. These sites are providing a way for me to connect to others.
  • Go create some experience stages!

    Adam Lawrence from the work-play-experience blog says this: “Your customer touchpoints - your retail location, your hotel, your Web site, your brochure - are your stage sets. Arrange them to mirror the Boom-wowowow-BOOM! of your storyboard as people move through the experience (or as it unfolds around them).”

    you are the actor on the stage - Lawrence explains: “Whether you are a doctor or a plumber [or web designer, or writer, or the comment answering guy or the videographer, etc.], every part of your customer contact is like performing a show – after all, you are trying to manage the perception that the customer forms of you and your offering. So rehearse!”

    What do actors and musicians do besides memorize lines or music and perform? They connect. They connect with you, the audience. [click]
  • Connecting with customers is our job on the web, too.

    To do this, we need to learn to interact on the web. train for this, just like at the physical desk (ref interview training) - training needs to include “how to connect” and “how to interact with others online”

    The experience your visitors have while on your site and while attempting to interact with you, with your products, and with your content is is your stage.

    You need to get this right!
  • Work on Conversation ... to improve our ability to connect and interact.

    Read emerging marketing books/blogs - Conversations have become the new way to market stuff

    we need to learn the fine art of conversation in many different formats – writing, photoing, videoing.

    It’s still the same old skill – conversation – but presented in a new, digital-age wrapper
  • finally, work on organizational change

    I’ve presented some ideas that are different than the “traditional way” of thinking about websites.

    Not a focus on the structure of the site, but about the experience the structure can provide. We’re not thinking about the content, but the experience that the content can provide.

    Yes, folks – change is in the air. And change is hard!

    But if you give it some thought - you’ll definitely benefit!

    More importantly - your patrons will benefit. And that’s what we’re here for!

Transcript

  • 1. Designing the Digital Experience David Lee King Topeka & Shawnee County Public Library davidleeking.com
  • 2. what is experience?
  • 3. experience design? “an approach to creating successful experiences for people in any medium” - Nathan Shedroff
  • 4. http://flickr.com/photos/dragnfly78/220689303/ American Girl
  • 5. Three paths to experience http://flickr.com/photos/didmyself/2354238160/
  • 6. Structural Path http://flickr.com/photos/gdominici/93021919/
  • 7. http://flickr.com/photos/angrykeyboarder/2316631084/ http://flickr.com/photos/maproomsystems/2872203555/
  • 8. http://headrush.typepad.com/creating_passionate_users/2006/02/its_the_stupid.html
  • 9. three approaches to structure
  • 10. http://flickr.com/photos/7855449@N02/2780452644/
  • 11. http://flickr.com/photos/liewcf/467408934/ Getting Real, by 37signals
  • 12. Skipping down the structured path look at your site with critical eyes think about the potholes Big goal: don’t make me think
  • 13. Community Path
  • 14. http://flickr.com/photos/rwhitlock/1422242668/
  • 15. digital community experience...
  • 16. Real Conversation
  • 17. Invitation
  • 18. Participation
  • 19. Sense of Familiarity
  • 20. Telling our Stories http://flickr.com/photos/bjackrian/2111462650/
  • 21. comments youtube flickr video facebook blogs myspace IM reference tscpl.org participation conversation connections
  • 22. http://flickr.com/photos/thomashawk/5741775/ Customer Path
  • 23. http://flickr.com/photos/jamesyu/366732085/
  • 24. http://www.sportclips.com/uploadedimages/Photo_Gallery/South%20Carolina%20SC%20Team.jpg
  • 25. Digital Version?
  • 26. Commonalities?
  • 27. Commonalities?
  • 28. Customer Journey Mapping http://flickr.com/photos/thetoad01/2317084812/
  • 29. improving the ordinary http://flickr.com/photos/rvettese/264579764/ http://flickr.com/photos/goatopolis/189188667/
  • 30. Surprise & Delight
  • 31. what’s next? http://flickr.com/photos/b-tal/116220689/
  • 32. connect the customer...
  • 33. Create an experience stage http://flickr.com/photos/kgradinger/2095191253/
  • 34. Create an experience stage http://flickr.com/photos/kgradinger/2095191253/
  • 35. Work on Conversation http://flickr.com/photos/damiel/221166778/
  • 36. http://flickr.com/photos/spursfan_ace/2328879637/ http://flickr.com/photos/twcollins/867628074/
  • 37. Thank you! davidleeking.com