1. IntroductionIntroduction| 00:00 | Hi! I am Kelly Goto.
| | 00:02 | I am the Principal of the design and
research firm called Gotomedia that
| | 00:06 | specializes in creating
people-friendly experiences online.
| | 00:10 | Today we are going to go
through the web redesign process.
| | 00:13 | But the material actually covers a lot more.
| | 00:16 | In the following chapters, we will go
through the nuances of branding and client
| | 00:19 | management, user experiences and the
importance of iterative design cycles.
| | 00:24 | This title is based on
the book, Web Redesign 2.0.
| | 00:28 | However much of the material covered
in these chapters is what we've learned
| | 00:31 | since the book was originally published.
| | 00:33 | The web is changing quickly and we have
needed to modify our approach and refine
| | 00:38 | our methodologies to keep up.
| | 00:39 | And we want to share this information with you.
| | 00:42 | So before we get into the details,
let's start with how to use this title which
| | 00:46 | is what the next movie is all about.
| | Collapse this transcript |
| What is this title?| 00:00 | What is a web redesign?
| | 00:02 | Assuming you have an existing site, a
web redesign is more than just a change
| | 00:06 | in layout or branding.
| | 00:08 | It's the start of a series of
ongoing initiatives that are designed to
| | 00:11 | iteratively improve the way your
customers interact with your web presence in
| | 00:14 | the most effective way possible.
| | 00:16 | If you don't have an existing site,
this process will work just as well for new
| | 00:20 | web presences as well.
| | 00:22 | As mentioned in the last movie, this
online title is based on the book Web
| | 00:26 | Redesign 2.0 which started out as an
educational handout for our clients and
| | 00:31 | eventually turned into this 72 page
PDF that was translated into multiple
| | 00:36 | languages and downloaded all around the world.
| | 00:39 | At one point, I realized that the demand
in the material showed that there was a
| | 00:43 | need and people kept asking
when are you going to write a book?
| | 00:46 | So in 2001, the original book Web
Redesign:Workflow that Works was published
| | 00:52 | with my co-author Emily Cotler.
| | 00:54 | To meet the continued high demand of
the material and also to keep up with the
| | 00:58 | significant changes in web design and
development, a new edition of the book was
| | 01:02 | released in 2005 which brings us to this title.
| | 01:05 | Why the online title?
| | 01:07 | Well, there's many topics that have
been key to improving our own workflow
| | 01:10 | process and strategic approach.
| | 01:12 | There's lot of things
people keep asking me about.
| | 01:15 | This online training goes deeper than
the book in most of these key areas.
| | 01:19 | It also includes materials that
have been updated since the book was
| | 01:22 | re-released in 2005.
| | 01:24 | We also cover a lot of the
material contained in the book in a
| | 01:27 | streamlined overview fashion.
| | 01:29 | So the online and printed
format will work very well together.
| | 01:33 | The format of the title covers the following.
| | 01:35 | Chapter 1 covers the new web, how
it's changed, and how we need to adjust.
| | 01:40 | Chapter 2 gives you a solid overview
of the core process as defined in the
| | 01:45 | book as well as reviews other concepts such
as iterative cycles and contextual research.
| | 01:50 | Chapters 3 through 9 covers some of
the topic areas in more depth including
| | 01:54 | branding information, design
intensives, usability and content management.
| | 01:58 | The online format is really designed
for a single day of intense consumption or
| | 02:03 | you can take it in bits and
pieces, one chapter at a time.
| | 02:06 | For the newbie, it might be a
companion to the book itself to help review
| | 02:10 | the process and approach while
introducing some new concepts not contained
| | 02:14 | in the printed version.
| | 02:15 | For the advanced designer or developer
or an industry veteran looking to change
| | 02:19 | focus or gain new insights, you can pick
movies or chapters you feel might offer
| | 02:23 | a different perspective on
knowledge you already have.
| | 02:26 | For teams, this content instrumental
in aligning your vision and creating one
| | 02:31 | process that you've been thinking about
but you haven't necessarily implemented.
| | 02:35 | Use this as a starting point and take
pieces that work for you and modify as you need.
| | 02:40 | Remember each web project is different
and I'm not advocating that there is a
| | 02:43 | single process that's
going to work for everybody.
| | 02:46 | But the goal is to determine a
process that works for you and your team and
| | 02:50 | modify it as needed.
| | 02:52 | But more than anything, if you can
take one thing that we present in these
| | 02:55 | materials and incorporate it into your
workflow today, then I've done my job.
| | Collapse this transcript |
| The new web| 00:00 | So I want to give you a little bit of an
overview of what we are calling the new web.
| | 00:05 | Now the web has changed quite a bit over
the last 10 years and we are constantly
| | 00:09 | trying to figure out how do we keep
up and how do we change our workflow to
| | 00:13 | incorporate this new thinking?
| | 00:14 | The easiest way I can think of to
describe to you the differences, at least from
| | 00:18 | my perspective of how website design and
development has changed in the past few
| | 00:22 | years, is to take a look at the old way.
| | 00:24 | I remember when we used to have teams
of designers and usability experts and
| | 00:28 | information architects in one building
and then across the street, not even next
| | 00:33 | door, we had the engineers working.
| | 00:35 | We were not only separate in our
workflow processes, but we didn't even interact
| | 00:38 | on a daily basis during
the web development process.
| | 00:41 | We did our work, we handed it off, the
engineers took over and that was that.
| | 00:45 | Today the web looks, feels
and functions differently.
| | 00:49 | Before we had branded content sites
and online applications each created and
| | 00:53 | developed by teams with very
different approaches and skill sets.
| | 00:56 | The hard line between the two has gone
gray and Web 2.0 or Rich Client Design
| | 01:01 | and Development was created.
| | 01:02 | Rich client web experiences mimic the
behavior of a desktop application by using
| | 01:07 | Ajax or Ruby on Rails to create a
more interactive or rich experience by
| | 01:12 | refreshing only a portion
of the page at one time.
| | 01:15 | The introduction of so many 2.0
companies such as Flickr, Techorati and social
| | 01:19 | networking giant MySpace has caused
people to think about the Web in a different
| | 01:23 | light, which means we need to rethink
how to integrate the process merging front
| | 01:27 | and back-end development and user
experience in an entirely new way.
| | 01:31 | So the new web is all about the
interaction between what was formerly very
| | 01:35 | divided, left and right brain, and
merging back into not only a new workflow but
| | 01:41 | a new way of thinking about user interaction.
| | 01:43 | So thinking about the new web and all
the possibilities that are out there,
| | 01:46 | just realize that we are going to have
to start to change our mindsets, change
| | 01:50 | our techniques and our processes along
with the way that we flow both in and
| | 01:55 | out of engineering and design into a
completely new dynamic, both now and in
| | 01:59 | the future.
| | Collapse this transcript |
|
|
2. The Core ProcessCore process overview| 00:00 | Have you ever gone through a kitchen remodel?
| | 00:04 | If you have, then you understand the
nightmare that can happen, as your counters
| | 00:07 | arrive the wrong size, your kitchen
cabinets are six weeks late, and the
| | 00:12 | contractor that you hired disappears,
and the new one that you bring on board,
| | 00:17 | gives you an estimate for one price,
and then at the end hands you an invoice
| | 00:21 | for three times that amount. So what happened?
| | 00:25 | How can you avoid this in the future?
| | 00:27 | One of the reasons why we came up with
the Core Process is just this scenario.
| | 00:31 | We have had so many situations that
seem to go out of control at some point and
| | 00:37 | we realized that there were some steps
we should follow and some steps that we
| | 00:40 | could skip to make sure that at least
everything was covered along the way that
| | 00:44 | was core and that was necessary in the project.
| | 00:46 | The Core Process presented in this
movie is the bare-bones approach that should
| | 00:50 | be the basis of all
site-iterations, large or small.
| | 00:54 | In the following chapters we refer to
iterative site design over and over again,
| | 00:58 | and the Core Process presented here
should be applied to every initiative
| | 01:03 | throughout your redesign
process over the next 12-24 months.
| | 01:07 | This is the Cliff's Notes version or
the condensed overview allowing you to
| | 01:11 | see from beginning to end the five processes,
and how they fit into the bigger picture.
| | 01:15 | The Core Process comes from
the book, Web ReDesign 2.0:
| | 01:19 | Workflow that Works.
| | 01:21 | That's really what it is, a workflow that works.
| | 01:23 | Something that is designed to fit into
projects both large and small, anywhere
| | 01:27 | from $2,500 all the way
up to $250,000 and beyond.
| | 01:32 | These are elements that we consider
to be best practices, tips and tricks
| | 01:35 | we've learned over time and through hundreds
and hundreds of web designs, and redesigns alike.
| | 01:40 | Now, one thing I want to be clear is
that although this is considered a Core
| | 01:44 | Process, we're not saying
this is absolute perfect.
| | 01:47 | We encourage you to modify this to fit
your specific type of project as you need.
| | 01:52 | We're offering this as a series of
guidelines that not only will your team
| | 01:56 | understand, but your client and key
stakeholders can buy into the process and
| | 02:01 | understand not only how long something
is going to take, but why you're doing
| | 02:05 | things the way you're doing them?
| | 02:06 | What elements and deliverables are
important, and how you can streamline this
| | 02:10 | process and make it the most
effective and efficient possible?
| | 02:14 | This is a great example of how team
sometimes disconnect during a process.
| | 02:19 | This shows how the customer explained
it and how the project leader understood
| | 02:23 | it, how the analyst designed
it and the programmer wrote it?
| | 02:27 | How the business consultant described it and
my favorite, how the project was documented?
| | 02:32 | It follows up looking at operations
and customer billing, support, and in the
| | 02:38 | end what the customer really needed.
| | 02:40 | We're really focused on user-centered design
and that is what this process is all about.
| | 02:45 | Designing for that end user.
| | 02:47 | The Core Process breaks into five steps.
| | 02:50 | First, we have Define which covers
discovery, planning and clarification.
| | 02:56 | The main goal of this phase is to
gather as much information as you can that's
| | 03:00 | relevant to your project, and put it
together into what we call a communication
| | 03:04 | brief that's going to help
align stakeholder vision and goals.
| | 03:07 | At the same time, you're also going to
do your traditional Project Planning,
| | 03:11 | which is setting the budget and schedule
and team, and making sure that you have
| | 03:15 | your process and set of deliverables
clearly articulated for both your team and
| | 03:20 | your client, internal or external.
| | 03:23 | Phase two is about Site Structuring,
but making sure that you address content
| | 03:27 | development and understand who is
responsible for the content in the end.
| | 03:30 | While at the same time, you're
putting together the site structure from a
| | 03:34 | bird's-eye view and also a page
level layout taking a look at Naming and
| | 03:39 | Labeling and if necessary, User Tasks.
| | 03:42 | Now if you are dealing with any back-end
elements or technical needs at this
| | 03:46 | point, you are going to want to
integrate it into the site structuring phases.
| | 03:49 | Phase three is the Design, the fun part.
| | 03:51 | It is Creating and Confirming and Handing off;
| | 03:54 | making sure that you're taking
into consideration, the Strategy, the
| | 03:57 | Branding, the User-goals and in the end,
thinking also of how you're going to
| | 04:01 | translate that into HTML and utilize
what we're calling Adaptive Technologies
| | 04:07 | such as JavaScript and Ajax into the overall
process to create a more fluid user experience.
| | 04:14 | The Build phase is extremely
straightforward, prep, build and test.
| | 04:18 | We're not going to go into that much
detail in this title because there is so
| | 04:21 | much information available out there, both
in the lynda.com online library and online.
| | 04:27 | Phase five is Launching and Measuring,
and making sure that you are set-up
| | 04:30 | to test and iterate and plan for
that next release, the quarter after you
| | 04:35 | launch the first site.
| | 04:36 | You want to not only deliver the
materials that you may forget if you're not
| | 04:41 | disciplined including the style guide
and the handoff packet, but you want to
| | 04:44 | plan for and conduct a meeting after you launch.
| | 04:48 | So that you can sit down and figure out,
what you did right and what you can
| | 04:51 | improve the next time.
| | 04:52 | You want to think about Search Engine
Optimization or SEO strategy and make sure
| | 04:56 | that you are planning for maintenance.
| | 04:58 | Looking at who is going to maintain the site
over time and what they need to think about.
| | 05:02 | So here we have the core process overview,
presented in stages one through five,
| | 05:08 | allowing you to see clearly the road-map
ahead and what you need to think about
| | 05:12 | in order to create and plan for
that ultimate user experience.
| | 05:16 | We've just looked at the entire Core
Process workflow which allows you to see
| | 05:20 | the entire process in a glance.
| | 05:22 | In the next few movies, we will look
more closely at each stage in turn with the
| | 05:26 | end goal being creating the ultimate
user experience, along with creating a
| | 05:31 | frame of reference for client and team
alike, so that you can understand why the
| | 05:35 | process is important and how you can
immediately implement these processes into
| | 05:40 | your redesign today.
| | Collapse this transcript |
| Core process phase 1: Define the project| 00:00 | Planning a Web Redesign project is a lot
like getting ready for a trip to Mount Everest.
| | 00:04 | There is a lot of work that needs to be
done upfront, just to make it to base camp.
| | 00:09 | So this phase one, Define the Project, is
broken up into the following three areas;
| | 00:14 | Discovery, Planning, and Clarification.
| | 00:17 | The first part is about gathering just
enough relevant information to understand
| | 00:21 | who your audience is and why they are
coming to your site, and what the industry
| | 00:25 | is doing right now and how your Web
Redesign fits into that overall landscape.
| | 00:29 | You want to do your Planning and set
scope by creating a project plan, getting
| | 00:33 | the budget together, setting
schedules, and making sure that your team is
| | 00:37 | assigned that you know who your
resources are and what they do.
| | 00:39 | You want to set up a Central
Communication Staging Area, and plan for any
| | 00:44 | Usability Testing either as part of
this Web Redesign or down the road.
| | 00:49 | In the Clarification phase, you take
all the overall goals that are established
| | 00:53 | during this phase and put
together a short Communication Brief.
| | 00:56 | The Communication Brief is a short
document that takes the information that you
| | 01:00 | have gathered during the Discovery
process and together with a project, gives
| | 01:03 | you the deliverables that you
need to kick off the project.
| | 01:06 | So let's go over some of the details.
| | 01:09 | We start with a Client Survey which
is covered in a lot more detail in a
| | 01:12 | movie that follows.
| | 01:14 | That has an overview that Client
Survey allows you to gather as much relevant
| | 01:17 | information as possible from your
internal or external client or any key
| | 01:22 | stakeholders that are part of
the decision-making process.
| | 01:24 | You will take this information and
put it into a short document called the
| | 01:28 | Communication Brief.
| | 01:29 | Some people call it a Creative Brief,
some people call it a Marketing Brief.
| | 01:34 | Whatever you call it, the goal is to
take consolidated information and put it
| | 01:39 | together in three to five pages,
sometimes including user profiles, but always
| | 01:43 | you want to outline the overall goals,
the positioning and the perception, your
| | 01:48 | audience, and what this Web
Redesign is supposed to accomplish.
| | 01:52 | Setting the Project Scope is perhaps
the trickiest part of this entire process
| | 01:57 | and also takes the most experience.
| | 01:59 | In some of the movies that follow, we're
going to give you some simple tools and
| | 02:02 | tricks on how to establish your hours
and budget involved, set the project,
| | 02:07 | understand your team's roles and
how much time they need to put in.
| | 02:10 | So as you are outlining the project
from a scope perspective, you get a
| | 02:14 | clear sense not only of how long you
have, but what needs to be done in that
| | 02:18 | time-frame, who is going to do it, and how
many hours are they going to take overall?
| | 02:23 | We highly recommend setting up a
Staging Page to post all deliverables and to
| | 02:27 | maintain a clear source of
communication throughout the process.
| | 02:30 | Now the staging area differs from the
one that you may use to post your HTML,
| | 02:35 | and test on in the end.
| | 02:36 | So just make sure that you have a
centralized form of communication where all of
| | 02:40 | your documentation and
deliverables are going to be posted.
| | 02:43 | We have gone through the process of
defining the project through Discovery,
| | 02:47 | Planning, and Clarification, and you're
ready to move into the next stage which
| | 02:51 | is phase two, Setting Site Structure.
| | Collapse this transcript |
| Core process phase 2: Develop the site structure| 00:00 | Getting into site structure is
planning the blueprint and the foundation that
| | 00:04 | your site is going to live on.
| | 00:06 | The structure in site is divided into
content, site, and page-view and if you
| | 00:11 | have more technical areas or something
that has a lot of functional elements,
| | 00:15 | you're going to want to
look at a User-View as well.
| | 00:18 | Now remember, we're just going over the
core process and so you can feel free to
| | 00:22 | modify this depending on the
level of complexity of your site.
| | 00:25 | First, taking a look at the Content-View,
you want to address the content making
| | 00:29 | sure that you take a look at what's
existing, outlining what's necessary and
| | 00:34 | then creating what we
call a Content Delivery Plan.
| | 00:36 | Now the Content Delivery Plan is really
important because you're outlining the
| | 00:41 | content that's do throughout the process.
| | 00:42 | It's going to enable you to create
the site maps, create the wireframes in
| | 00:46 | different phases as you the full the
information in and in the end, provide the
| | 00:50 | file copy in which we -- in any media
that you need to complete the process.
| | 00:55 | The person that's responsible for the
content generally doesn't know it and
| | 00:58 | usually is in design.
| | 01:00 | Getting into content creation,
preparation and making sure that you have
| | 01:03 | someone that's responsible for the
task is a very important part of the
| | 01:07 | process, and something we'll go into in a
little bit more detail in the movie that's to follow.
| | 01:13 | Taking a look at the Site-View is a
straightforward sitemapping process, but it
| | 01:18 | takes some experience to understand
how the site is laid out at, a high level
| | 01:22 | from a content and user perspective.
| | 01:25 | We also want to outline some key tasks
including path flows that someone may go
| | 01:30 | through in a functional area of the site.
| | 01:33 | The wireframing is sometimes called
page schematics or screen layouts.
| | 01:38 | What we're trying to do is outline the
content that's needed along with how it's
| | 01:42 | organized on the page and we
represent this in some different ways.
| | 01:46 | Here, it's little more than just a sketch.
| | 01:49 | Seldom do we put it actual copy, we
usually use dummy text to help articulate
| | 01:54 | how much content is supposed to be on a page.
| | 01:57 | Some sites require a User-View;
| | 02:00 | in this case, we put together a
clickable path to show how it might look to
| | 02:05 | a user to go through a series of questions
before they can actually download an application.
| | 02:10 | Well, this isn't
necessary in every single project.
| | 02:13 | It's important to take key calls to
action on your site and make sure that
| | 02:17 | experience is as fluent and clean as possible.
| | 02:21 | So to summarize the site
structuring phase, you want to address your
| | 02:24 | content, take a look at your site
from a Site-View, putting together a
| | 02:27 | sitemap, making sure naming
conventions are set and looking at the
| | 02:31 | wireframing and page level view of
your site, taking a look at naming,
| | 02:35 | labeling, navigation and key user tasks.
| | 02:39 | With this part of the Redesign
completed, you're ready to move into phase 3,
| | 02:43 | Design the visual interface.
| | Collapse this transcript |
| Core process phase 3: Design the visual interface| 00:00 | So now we're at that part we've
been waiting for, the fun part.
| | 00:04 | We're getting into the Visual Design.
| | 00:05 | In the old days, we used to have
print designers that came in, created a
| | 00:09 | gorgeous look and feel, that they then
handed off to the HTML people and made
| | 00:14 | them figure out how to code it.
| | 00:16 | We used to have circular and angular
shapes that had about a thousand little
| | 00:19 | GIFs created specially to make that curve work.
| | 00:22 | It was a painstaking process and also
it took a long time for pages to load.
| | 00:26 | It didn't really work.
| | 00:27 | So flash forward to today's hybrid of
Visual Design and coding, and utilizing
| | 00:32 | CSS and XHTML, we can understand why
practicing smart design is so important.
| | 00:39 | Smart design is not about designing for
yourself or the whims of your CEO, it's
| | 00:43 | about understanding who your
user is and what their goals are.
| | 00:46 | Making sure you're taking branding
and the technical feasibility of what
| | 00:50 | you're creating into play.
| | 00:51 | You want to take out that communication
brief that was so carefully planned and
| | 00:55 | prepped at the beginning, and
understand what were the original goals that were
| | 00:59 | set out for the site?
| | 01:00 | Because sometimes, when you get to
this phase, the client is so excited.
| | 01:04 | They just want to see something cool
and flashy, and bright, and they forgotten
| | 01:08 | that they have said traditional,
reliable, steadfast as part of their
| | 01:12 | communication brief.
| | 01:13 | So you want to pull that out and make
sure that as you get into this phase,
| | 01:17 | you're developing concepts, designing
for that user, and making sure that as you
| | 01:21 | present, you're confirming the
functionality all along the way.
| | 01:25 | The Protosite sometimes known as a
prototype is either an HTML click-through or
| | 01:30 | something that you can create in
Flash to merge the Visual Design, and Site
| | 01:34 | Structure phases into one.
| | 01:36 | This piece is an optional deliverable.
| | 01:38 | Usually used if you have some
functionality that you need to test on your site,
| | 01:42 | or if your site is very functionally
oriented, you might want to move this back
| | 01:47 | over to phase two site structure.
| | 01:50 | However, you use it at this point, you
want to make sure that the design, look,
| | 01:53 | and, feel along with the site structure,
and the page navigation and layout,
| | 01:57 | merge together into one
comprehensive user experience.
| | 02:01 | The designer at this point will hand
off graphic templates either created as
| | 02:04 | layered Photoshop files, or in some
cases with more savvy designers, a design
| | 02:08 | style guide so that somebody besides
you can continue to maintain that look and
| | 02:12 | feel that you've so painstakingly created.
| | 02:14 | Just to put into context, for this site
redesign, here's the before shot for Portfolio 21.
| | 02:20 | Taking the communication brief into
account, visual designs were created and
| | 02:23 | presented that match the look
and feel that they had asked for.
| | 02:27 | Innovative, future thinking, clean.
| | 02:29 | So here is the Final Design,
presented and approved by the client, and then
| | 02:34 | put into Photoshop documents which were
handed off for build out into the final site.
| | 02:39 | So at the end of the Design Visual
Interface phase, make sure your designers
| | 02:43 | understand the nuances of smart design
and have created graphic templates that
| | 02:48 | are built initially in layered
Photoshop files, but reflect CSS oriented
| | 02:52 | thinking and can be
built primarily graphic free.
| | 02:55 | For hybrid designers who are coders,
create only what is necessary in
| | 02:59 | Photoshop, and move forward with
CodeBase templates once the look and feel is
| | 03:03 | set, if you have the ability.
| | 03:05 | And don't forget, you still have to
create the Design Style Guide which helps
| | 03:08 | during the Build phase as well as with
continuity after the site is launched,
| | 03:12 | and the job is turned over to
someone else for maintenance.
| | Collapse this transcript |
| Core process phase 4: Build and integrate| 00:00 | Now we've reached the Build and
Integrate phase with a live site take shape,
| | 00:04 | it's exciting but it's also laborious.
| | 00:07 | In this phase the HTML templates are
built out and populated with content,
| | 00:11 | back-end functionalities
integrated, and path flows are created.
| | 00:15 | Also, any elements that use technologies
such as Ajax or DHTML are now built out
| | 00:19 | and tested for the real world.
| | 00:21 | This phase takes a detailed
eye and a lot of patience.
| | 00:24 | Code standards exist but very widely.
| | 00:27 | During the prepping stage, you want to
establish your own best practices and
| | 00:31 | make sure if someone with knowledge
reviews your code, and confirms with your
| | 00:34 | coder or coding team that
they're practicing clean code.
| | 00:37 | Your ultimate coder understands the
nuances of style sheets and scalable pages,
| | 00:41 | accessibility, search engine strategy and more.
| | 00:44 | At this stage, you'll also want to
confirm your target audience's needs for
| | 00:47 | browser type and connection speed,
because remember you're no longer designing
| | 00:51 | solely for the lowest common denominator.
| | 00:53 | The Build stage can be very
straightforward or extremely complex.
| | 00:57 | Because there is so much information
available on CSS coding and layout, I'm
| | 01:01 | going to refer you to other Lynda.com
online training titles or any of the books
| | 01:06 | offered by Eric Meyer or Jeffrey Zeldman.
| | 01:08 | For some sites built using dynamic
content, HTML templates and the style guide
| | 01:13 | will be the hand-off to a hardcore
development team to port the content into a
| | 01:16 | database driven format.
| | 01:18 | At that point, working closely between
the front and the back-end teams is very
| | 01:22 | important, and if extremely complex
applications are being built, an additional
| | 01:27 | workflow will be necessary.
| | 01:28 | Testing confirms everything is
functioning as expected, cross-browser
| | 01:33 | and cross-platform.
| | 01:34 | Unless legally bound to adhere to
Section 508 Accessibility Laws, few sites go
| | 01:39 | through a comprehensive testing process.
| | 01:42 | Usually a bug database is in place, and
the entire team works together to test
| | 01:46 | path-flows and pages to try and break the site.
| | 01:49 | Next, a soft launch URL is sent out to a
beta group for "Banging on" and also feedback.
| | 01:54 | Remember, the invisible code such as
Title tags and Alt tags and don't leave
| | 01:58 | these important details up to
the whim of your coding team.
| | 02:01 | The format should be
established well in advance of this phase.
| | 02:05 | As you move into the launch of your
site and beyond, you'll have a lot to
| | 02:08 | manage including search engine
optimization, accessibility, marketing, and
| | 02:13 | post-launch usability testing with
continued iterative development cycles in
| | 02:17 | the months to follow.
| | 02:19 | Remember, smart design bridges the
gap between design and technology,
| | 02:23 | streamlining the user experience to
match or exceed your audience expectations,
| | 02:27 | and if done right, delivers your clients
brand promise in the best way possible.
| | Collapse this transcript |
| Core process phase 5: Launch and beyond| 00:00 | So we've just about pushed the site live.
| | 00:04 | The things to think about in phase
five are really about completing all the
| | 00:08 | deliverables necessary, not only for you
to your client, but also if you have an
| | 00:12 | internal team, sometimes these things go
forgotten, because you put so much time
| | 00:16 | and effort in and then you just
want to sit back and take a break.
| | 00:20 | So make sure that you complete the
production style guides so that you can
| | 00:23 | understand how the site is
supposed to look before and after.
| | 00:26 | This is an example of a style guide
hand-off packet, taking a look at the
| | 00:30 | palette, how the pages are laid out,
and then snapshots of specific styles and
| | 00:36 | areas of the site including HTML content.
| | 00:39 | Sometimes we present this information
in HTML and either post it on a client's
| | 00:43 | Internet site or we provide it on a CD-
ROM with all of assets in place including
| | 00:48 | layered Photoshop files, any typography
that was purchased for the project, and
| | 00:52 | also HTML, all on one disk so that
everything is in one place for hand-off an
| | 00:57 | additional site maintenance.
| | 00:58 | After that you make sure that you
track your documentation, especially those
| | 01:02 | things that are signed off during the process.
| | 01:04 | I want you to plan for what we call a
post-mortem or post project meeting,
| | 01:09 | where you get the team in a room, wait
a little bit after launch, maybe a few
| | 01:14 | weeks, it could even be a few months,
and talk about what went right, what
| | 01:18 | could be improved, making sure that
you're not fingerpointing along the way,
| | 01:22 | but that you're coming at it from a
group perspective, a very collaborative
| | 01:26 | perspective, what can we improve, what
did we do well, what things did we learn
| | 01:32 | from this experience.
| | 01:33 | It's really important.
| | 01:35 | So in preparing for launch, preparing
announcement plan, understanding how
| | 01:38 | people are going to find out about
the site and the new URL, you want to
| | 01:41 | make sure that you address the Search Engine
Optimization or SEO strategy, and finally, boom!
| | 01:48 | Launch the site.
| | 01:50 | It's a little blip, a little
black dot as we call it in the book.
| | 01:53 | But your site is live.
| | 01:56 | Now you have to plan for maintenance and beyond.
| | 01:59 | In this part of the
workflow we mention maintenance;
| | 02:01 | it's actually brought up a lot earlier
in the process, because you want to make
| | 02:05 | sure that you have a plan for
maintaining your site overtime.
| | 02:08 | So putting a maintenance plan
together, understanding how you're going to
| | 02:12 | measure success, planning for the
next stage of iteration is really what's
| | 02:16 | important at this stage of
the project. Congratulations!
| | 02:20 | Your site is launched.
| | 02:22 | Celebrate, take some time off, and then
let's get started with the core process
| | 02:26 | all over again as we move into
separate iterations of the site.
| | Collapse this transcript |
| Core process plus| 00:00 | The Core Process + contains
additional elements that are woven into the
| | 00:04 | regular core process.
| | 00:05 | They can be added this time,
budget, scope and need exist.
| | 00:09 | Because Redesign Projects differ widely,
many of these additional elements could
| | 00:13 | be overkill in some cases
while necessary in others.
| | 00:17 | We start with stakeholder interviews
and audience segmentation and move into
| | 00:20 | a competitive features overview to assist with
the strategic planning during the Define stage.
| | 00:25 | We then go into initiative planning
along with the development of a strategic
| | 00:29 | road map for projects that span the
next 12-24 months following the launch.
| | 00:33 | Next, the development of brand boards
along with the facilitation of information
| | 00:37 | design intensive, streamline the
decision-making process and help to avoid
| | 00:41 | endless rounds of back and forth deliverables.
| | 00:43 | Add these components as needed to
enhance your existing workflow process,
| | 00:48 | streamline certain deliverables and
add more depth and detail to others.
| | 00:52 | As we've mentioned over and over again,
start with the core process that best
| | 00:56 | fits your organizational
needs and then modify as needed.
| | 00:59 | Now, we will start with an approach
towards iterative design, covered in
| | 01:02 | the next movie.
| | Collapse this transcript |
| An iterative approach| 00:00 | So, website design has changed
quite a bit in the past several years.
| | 00:04 | As I mentioned in the introduction,
we've gone from content based sites that are
| | 00:07 | static into web products and services
that evoke interactivity and community.
| | 00:12 | So, when thinking about the new web,
we cannot stress iteration enough.
| | 00:16 | We've talked a lot about iterative
design cycles, which simply put, include the
| | 00:20 | redesign of parts of a website in
small components, again and again, over a
| | 00:25 | short period of time.
| | 00:27 | Thinking about the website not as a
huge entity but as several components
| | 00:30 | modified in sprints rather than marathons.
| | 00:33 | You can start to visualize how this concept
of iteration fits into the redesign process.
| | 00:38 | Make sure that your end-user is
incorporated into the process itself and divide
| | 00:42 | the website into digestible pieces that
are manageable as quarterly initiatives,
| | 00:46 | instead of trying to do everything at once.
| | 00:48 | Instead of just revamping your entire
site, think about attacking one portion at
| | 00:52 | a time and testing in
iterations through the process.
| | 00:56 | Not only will this improve your website
faster, but your time-lines will be more
| | 01:00 | realistic, your scope more defined and
your team will understand the end goals
| | 01:04 | and they will be able to
approach it one sprint at a time.
| | 01:07 | So very simply, it's making sure that
your end-user is incorporated into the
| | 01:11 | process, that you divide your website
redesign into digestible pieces that you
| | 01:17 | can get from point A to point Z in
quarterly initiatives and steps all along the way.
| | 01:23 | Instead of just dealing with the front-end
experience or the marketing side, we
| | 01:27 | start to think about rich client
environment, Ajax technology and we think
| | 01:31 | about the way that websites function a
little more like applications than just
| | 01:34 | strict marketing websites.
| | 01:36 | Finally, getting to that 3.0 vision not
only happens faster but is more realistic.
| | 01:41 | Your team understands what their
goals are, one sprint at time and they're
| | 01:45 | able to work closely with the customer
to incorporate their feedback into this
| | 01:50 | research and design process, so in
the end you're creating exceptional user
| | 01:54 | experience.
| | Collapse this transcript |
| User-centered design| 00:00 | So, I'm fourth generation Japanese,
what that means is I can't speak any
| | 00:05 | Japanese, the only thing I can really
say is "Nihongo Wakarimasen" which means I don't
| | 00:09 | speak Japanese and on a recent trip to
Japan, I had the experience of using the
| | 00:15 | one of their bidet-style toilets
for the first time and what was really
| | 00:19 | interesting about this experience was
that, there was a remote control for the
| | 00:23 | toilet which scared me a little bit
especially because there was a two-year old
| | 00:27 | in the house and I didn't
quite know what's going to happen.
| | 00:30 | Interfaces today websites, product
interfaces, applications, things that we're
| | 00:35 | working on a regular basis have so
much more to do than displaying content.
| | 00:39 | It has a lot to do with creating an
entire experience that someone has again
| | 00:43 | online and off and understanding
that what your trying to do with this
| | 00:47 | experience is create comfort for
that person coming to your website.
| | 00:50 | We've been really thinking about
Customer Centered Design, User Centered Design,
| | 00:55 | taking a careful look at your
audience, the site visitors.
| | 00:58 | Whatever you want to call them, be it
user or customer, make sure that they are
| | 01:03 | at the center of your process.
| | 01:05 | Here we have a look at a diagram and
you want to think about that customers
| | 01:08 | being at the center point of every
decision that you make, taking into
| | 01:12 | consideration the business needs
and also the technical feasibility.
| | 01:16 | I've asked a lot of companies, if they
have three axes of which to determine,
| | 01:21 | some of their decisions moving forward
what would they be, a lot of them have
| | 01:25 | partners and advertisers they have to
deal with, some people have an audience of
| | 01:29 | millions and millions of people.
| | 01:31 | Whatever that particular decision is
within the organization, just make sure
| | 01:35 | from the stakeholder level down to the
implementation that you're focusing on
| | 01:39 | that customer at every stage of the process.
| | 01:43 | Again, that customer is at the center
point of the entire process and in order
| | 01:47 | to create that user centered
experience, you want to make sure to test and
| | 01:51 | iterate using research and design
merging those disciplines into a process of
| | 01:56 | feedback and cycles, so that you can
create an experience over time that gets
| | 02:00 | you closer and closer to
meeting your customers' needs.
| | 02:04 | So, we start off looking at
perception and thinking about the brand and the
| | 02:08 | brand experience that you're
creating for your customer.
| | 02:10 | The brand value is equitable to, if you
were a car, what kind of car would you be.
| | 02:14 | I'm going to go into more
detail on brand in the later chapter.
| | 02:18 | So, as an overview, the brand value
is the emotional appeal, the positive
| | 02:23 | experiences, that trust that you
build with your customer overtime and it
| | 02:27 | leads into the centerpiece of that all,
which is really about interaction and
| | 02:31 | information design.
| | 02:32 | This combines content, navigation,
messaging, labeling and you want to
| | 02:37 | understand how you're building the
structure and the foundation of your site and
| | 02:42 | the experience overall to combine this
brand with what's to the right of it,
| | 02:47 | testing and making sure that it's
working for that customer in the most
| | 02:50 | comprehensive way possible.
| | 02:52 | To make sure that you're doing your job
right, we get into different elements of
| | 02:55 | Research and Testing;
| | 02:56 | using usability testing is one form.
| | 02:59 | You can also think about using surveys,
contextual interviews, a lot more that
| | 03:03 | will go into an usability section.
| | 03:05 | You want to incorporate feedback into
development cycle, so that you start
| | 03:09 | thinking about the brand perception,
the Interaction that your customers having
| | 03:13 | when they come to your site and then
finding out how is it working for them and
| | 03:17 | can we improve that experience overtime.
| | 03:21 | So, sometimes the customer experience
differs quite a bit from what the company
| | 03:25 | may have originally intended.
| | 03:27 | Several years ago, I started to
receive these brown paper packages that
| | 03:32 | were labeled to me with no return address
and each contained some book or DVD on death.
| | 03:38 | The first was Alfred Hitchcock's '39
Steps.' The next package I received was
| | 03:42 | Agatha Christie's 'Murder Mysteries.'
That Wednesday I got a book called
| | 03:46 | 'Breathing' and I was somewhat relieved
until I turned to the back and it said
| | 03:50 | this is about a couple going to a funeral.
| | 03:53 | I showed it to my roommate, she was
completely freaked out and wanted me to
| | 03:56 | call the police and in one of the
brown paper bags I found a tracking number
| | 04:01 | and the URL to half.com.
| | 04:03 | So, I went to the website and I found
customer service, I typed them a note and
| | 04:08 | said, if this is a the promotion it's
really sick, if this isn't, I think that
| | 04:11 | someone's trying to kill me and I got
in out of office notice saying your query
| | 04:16 | will be responded to within 48 hours.
| | 04:18 | I thought, within 48 hours I'm going to be dead.
| | 04:21 | So this went on, I received another
package on that Thursday and Friday and my
| | 04:25 | roommate by this time is completely
freaked out and coming next Monday, I get a
| | 04:29 | get a phone call from my best friend Liz.
| | 04:32 | She's laughing so hard that she's
crying asking me, so, I guess you've got some
| | 04:37 | packages and I guess you didn't get
the birthday card and she said she'd
| | 04:41 | received a cease and decease
notice from the lawyers at half.com.
| | 04:44 | So, what happened was in her mind she
had gone to the website and packaged up
| | 04:48 | some of her genre-based new CDs and
books and things, that she thought I would
| | 04:53 | be interested in, she sent them to me
for my birthday with a gift card that
| | 04:57 | said, Happy birthday Kelly, and asked
the people on half.com not to mail it
| | 05:01 | until the week of my birthday.
| | 05:04 | What actually happened was a much more horrific
experience where I thought I was being stalked.
| | 05:10 | So, in the end make sure that you pay
attention to the user experience and I
| | 05:14 | mean the real user experience from
beginning to end because you never know if
| | 05:19 | your perception meets reality.
| | 05:21 | So, just make sure that you understand
that your customer's experience maybe
| | 05:26 | completely different from your
internal perceptions and get out there and get
| | 05:30 | feedback, conduct usability testing
interviews and make sure that you understand
| | 05:34 | how your site is really being experienced.
| | Collapse this transcript |
|
|
3. Strategic EssentialsInitiative planner| 00:00 | So, we've talked about why
iterative planning and working out specific
| | 00:04 | initiatives using the core process is
very important as part of this long term
| | 00:08 | plan we want to put together.
| | 00:10 | So, how do we actually
figure out what we want to do?
| | 00:13 | What are the steps that you
can take in your organization?
| | 00:16 | Or if you have a client, you can lead
them through a process that's going to
| | 00:19 | outline not only what they need to do
immediately, but what they need to do in
| | 00:23 | the next 3-6 months, 9-12 months and
what they can envision for two years out.
| | 00:30 | The Current & Future State Analysis or
Initiative Planner is a document that
| | 00:34 | takes you through in 8-12 steps how
effective your website is, what you like
| | 00:41 | about it, what you don't like about it,
what things that you change today, what
| | 00:46 | things that you might change tomorrow.
| | 00:47 | And it allows you to brainstorm,
conceptualize, and envision how you can
| | 00:51 | organize this information
into initiatives in the end.
| | 00:54 | So we're going to take a look at the
Initiatives Planner, which is available in
| | 00:58 | the Exercise Files folder if you're a
lynda.com premium member or if you're
| | 01:03 | watching this on your discs.
| | 01:04 | So, here we have the Initiatives
Planner, it's a Word document that's again
| | 01:10 | located in the Exercise Files folder.
| | 01:13 | So what I encourage you to do is print
this out, sit down, spend a few minutes,
| | 01:17 | 10-15, even half an hour filling this
out, and get a good sense of what your
| | 01:22 | take is before presenting it to a team.
| | 01:25 | As a team exercise, it's a great way
to take an afternoon, sit everyone down,
| | 01:29 | have them brainstorm on what things
they'd change on the site, what things that
| | 01:34 | they like, what things they don't
like, how this factors into the sites
| | 01:37 | strategy as a whole.
| | 01:39 | So let's take a look at some of the questions.
| | 01:42 | The first ones are pretty straight
forward talking about, what do you think
| | 01:45 | about your website, how is it usable,
how important is it, how well does your
| | 01:50 | customer understand it, is it
meeting your customer's needs.
| | 01:54 | We want to get a sense from 1-10 what
you think about that experience, and
| | 01:58 | understanding how you solve your
customer's problems through the website, how do
| | 02:02 | you bring value to their daily experience.
| | 02:05 | That's the first part.
| | 02:06 | Moving into the second part, we
start to take a look at what is the value
| | 02:10 | proposition, or what do you hope to
solve in the future with your website, how
| | 02:14 | is this different from what it is currently.
| | 02:17 | This is the fun question, list three
to five things you'd change in your
| | 02:20 | website today if you could.
| | 02:22 | So many times you look at your website,
you hear from customer service and you
| | 02:26 | have some things that you just know, gosh!
| | 02:27 | If I could only change that. Write them down;
| | 02:30 | get them off your chest.
| | 02:32 | Think about what obstacles you're facing
that limits your team from making these changes.
| | 02:36 | Is it budget, resources, or is
it vision from the highest level?
| | 02:40 | Then think about what are the factors
that make up the gap between where you're
| | 02:45 | today and where you want to be in the future.
| | 02:48 | Take a guess, if you're not sure.
| | 02:51 | Brainstorming, put a lot of lines
in here just for you to write down as
| | 02:55 | many things as you can.
| | 02:56 | And in true brainstorm fashion please
don't edit yourself, just write down
| | 03:00 | everything that you can think of.
| | 03:02 | Start off with five things,
try and write down ten things.
| | 03:06 | If you get to 20, you're doing fantastically.
| | 03:09 | So, here you would take a look at both
websites and applications, both marketing
| | 03:14 | initiatives and user experience, path
flows, things like that through the site;
| | 03:19 | what would you change if you could on
every aspect of your site or your presence?
| | 03:27 | So now think about, okay of this list,
what are the top three things that are
| | 03:31 | going to most possibly affect the user
experience, your customer's experience in your opinion.
| | 03:36 | Not from the business side, not
from the technical side, but from the
| | 03:40 | user experience side.
| | 03:42 | Then I want you to think next of what
are the three things that are going to
| | 03:45 | most positively affect your business
initiatives, your company's bottom line,
| | 03:50 | what's going to make you money.
| | 03:52 | Then finally, I want you to write down,
what are the three items that you can
| | 03:55 | immediately implement if you
have the budget and resources.
| | 03:59 | What can you do in the next 6-12 months,
what could you attempt in the next 12-24 months.
| | 04:06 | And when you wrap it altogether, I want
you to think about 3-5 initiatives from
| | 04:11 | a user experience business and a
doable factor that you can start with today.
| | 04:18 | Now, we get into the prioritization
and we can start looking at, okay, here's
| | 04:22 | the actual initiative what we've
outlined, maybe it's a homepage refresh,
| | 04:27 | maybe it's looking at a path flow through a
registration form or some other sign up document.
| | 04:32 | We want to talk about the immediate
goals that it's going to solve and some of
| | 04:34 | the long term goals when you can start,
how many days you think it's going to
| | 04:38 | take to complete per resource, when do
you really want this to be live and what
| | 04:43 | are the factors behind that.
| | 04:44 | Think about your internal resources
versus external, is this something that
| | 04:47 | you're going to be able to do
internally or do you have to hire an outside
| | 04:50 | company or a series or
contractors to bring in the work in time.
| | 04:54 | Throw out a number what's your guess for
budget, what do you think it's going to
| | 04:57 | cost if you do hire people from the outside.
| | 04:59 | Now, I want you to do something else, I want
you to rank it in terms of user experience.
| | 05:05 | Least as 1, most as 5.
| | 05:07 | A 5 means that your customer is
going to be 100% happier if you
| | 05:11 | actually implement this.
| | 05:13 | From a business priority, again
thinking 1 through 5, a 5 meaning that this is
| | 05:18 | going to double your revenue, this is going to
bring in a lot of profit for your organization.
| | 05:22 | Then some other comments.
| | 05:24 | So in the end what we have, a series of
these and print as many of these out as
| | 05:28 | you need to, to sketch out
some of the initiatives coming up.
| | 05:30 | We're going to be putting it into a
strategic roadmap in the movie that's to follow.
| | 05:37 | If you don't have access to this
document, feel free to pause the movie, copy
| | 05:41 | some of this information down.
| | 05:43 | The most important thing is to realize
is that you can break down everything
| | 05:47 | that you have on your plate into very
doable chunks that can be executed short,
| | 05:52 | medium and long term.
| | 05:53 | Let's take a look at in real world
scenario where we took this plan and put it
| | 05:57 | into action in a group atmosphere.
| | Collapse this transcript |
| Initiative planner case study| 00:00 | So, here's an example of a healthcare
company, and the process they went through
| | 00:05 | to use the Initiatives Planner to
articulate and outline what they were going to
| | 00:09 | do in their organization
over the next calendar year.
| | 00:13 | So, first we had each of the individuals,
there were about 20 people total, take
| | 00:18 | the Initiatives Planner document and go
off on their own and spend about half an
| | 00:22 | hour working through the questions,
writing down as much as they could.
| | 00:25 | Then I have them come together and
spend about an hour working through in a
| | 00:30 | group discussion format, what were the
things that were similar, and what were
| | 00:33 | different, what do they agree on.
| | 00:35 | And in the end come out with, here is
a value proposition, the three things
| | 00:39 | that this first group thought, affected
the user experience the most, the three
| | 00:44 | things that most positively affected
their business vision, the three things
| | 00:48 | they would implement immediately, and the
three things they would implement long term.
| | 00:52 | So, you can take bits and pieces out
of the document, you don't have to write
| | 00:55 | every single thing down.
| | 00:57 | So it's great because you can
consolidate a lot of information pretty quickly
| | 01:00 | by dividing it into groups and then coming
back in a larger format to put it altogether.
| | 01:05 | So here's GROUP 2, Brian, Lorrie and Debbie.
| | 01:08 | This is the Value Proposition that
they came out with, the three things that
| | 01:12 | most positively affected the user
experience from their perspective, business,
| | 01:16 | what things would they implement
immediately, 6-12 months, 12-24 months.
| | 01:22 | You get a pretty good idea of this
group's consensus on the direction
| | 01:26 | that they're heading.
| | 01:28 | GROUP 3, Leslie, Rachel and Eric.
| | 01:31 | What is the Value Proposition? Same as above.
| | 01:33 | Three things most positively
affecting the user experience, business, and
| | 01:37 | company's bottom line, and then the
things that they would implement immediately
| | 01:41 | within 6-12 months and again in the future.
| | 01:45 | Then what we did was we compiled it
into a group, wrote down on the board
| | 01:49 | everything that we could, went
through and crossed reference to find the
| | 01:53 | things that were similar.
| | 01:55 | We decided what could be
implemented immediately;
| | 01:59 | we assigned these to actual people.
| | 02:02 | We decided what could be done in the
next 6-12 months, and assigned this to
| | 02:06 | someone to get started on right
away with the project plan, setting up
| | 02:10 | resources, figuring out how much
budget it was going to take, and what they
| | 02:13 | didn't have that they would need;
| | 02:14 | in this case content.
| | 02:16 | Then, looking at the 12-24 month
plan and realizing what things were the
| | 02:20 | priorities and what do we
need to do in moving forward.
| | 02:23 | So this is just one strategic
initiative that you can implement in your
| | 02:26 | organization or for your client.
| | 02:28 | It's something that is effective, it's
immediate, it's very simple to go through.
| | 02:33 | And the result is going to be a plan
that is going to take you through not only
| | 02:36 | the way you need to do immediately, but
it's going to give you a vision for what
| | 02:40 | you can do in the next 9 months and
12 months, and that's great to set up
| | 02:44 | ongoing work if you have a client or
understand in the future what your team is
| | 02:48 | going to be working on in the months to come.
| | Collapse this transcript |
| Competitive feature analysis| 00:00 | So, in the beginning of the
discovery phase, you want to collect as much
| | 00:04 | relevant industry information as you can.
| | 00:06 | So what I'm showing here is
something that you can charge for.
| | 00:09 | It's an extra item, it's something
that's on top of the core process, it can
| | 00:12 | even be a separate project altogether.
| | 00:15 | And the information that you're going to
be gathering from this data is going to
| | 00:18 | help you and your team wrap your head
around what are the best practices out
| | 00:23 | there, and where do you
want your site to move into.
| | 00:25 | You can help align your stakeholders,
you can give them information they might
| | 00:29 | not be seeing otherwise.
| | 00:31 | Remember, this isn't
replacing traditional market analysis.
| | 00:34 | We're not saying this is qualitative
and that you have thousands of researchers
| | 00:38 | looking at all of this data.
| | 00:40 | What we're trying to do is take a
look at these websites from the user
| | 00:43 | experience perspective, and see
what things we feel work the best.
| | 00:48 | So going through this process of
competitive analysis follows these four steps
| | 00:52 | defining the process and creating a
features list, conducting the actual
| | 00:56 | analysis and testing, and then in
the end creating the final report.
| | 00:59 | You can spend 20 hours or even up to
200 hours working on this type of project.
| | 01:03 | So, be very clear on what your scope
is for this process and how many hours
| | 01:07 | you're putting in as a nice to have versus
something that you're charging money for.
| | 01:11 | Because as I mentioned it can
go completely out of control.
| | 01:14 | So when you think about your sites, you
might have your competitors in the A set
| | 01:18 | which is brochure site, things that are
similar to what you already have live.
| | 01:22 | You may look at your competition in the
B set, things that are more interactive
| | 01:25 | and use technology in a new way.
| | 01:27 | And then maybe in your C set, you have
people that are outside your own industry
| | 01:31 | that have some elements of the site
that you really want to pay attention to.
| | 01:34 | So you think about graphics and
content and different things that you want to
| | 01:38 | compare across the board.
| | 01:40 | You also want to think about features;
| | 01:42 | now as I mentioned, we're not doing a
huge market analysis, but we're taking a
| | 01:46 | look at what are the features that
these sites have and what do we consider to
| | 01:49 | be best practices in this industry.
| | 01:51 | So, making a list of all the relevant
features that this site has, some of
| | 01:55 | them are widgets and gadgets, some of them are
specific content areas or areas of functionality.
| | 02:00 | You want to write them all down and we
usually start with the big brainstorm,
| | 02:03 | either using stickies or
writing everything on a white board.
| | 02:06 | And making sure that as we list these
things, we cross them off because you can
| | 02:09 | put hundreds and hundreds of things
up, so you want to narrow it down to
| | 02:11 | something that's digestible on one page.
| | 02:15 | So, finally, as you look at the
process of how you're going to conduct it;
| | 02:18 | in this example, we have eight
websites that we're looking at.
| | 02:21 | We have five that are main competitors
and two that are non, and we're having
| | 02:25 | three people go through all these
sites that we can take a look at it from a
| | 02:29 | user experience perspective.
| | 02:30 | Again, thinking about usability,
principles, and best practices, and
| | 02:33 | navigational layout.
| | 02:35 | We want to score it, not only looking
at it from a practical standpoint, but
| | 02:39 | also what are the emotional
elements, how does that affect you.
| | 02:42 | And we take a look at it not
from a quantitative perspective.
| | 02:46 | Now remember, we're not social
scientists and we're not researchers by trade,
| | 02:50 | we're trying to glean best practices, so
we can understand what are we trying to
| | 02:54 | do with this Web Redesign.
| | 02:55 | So, here we have a Competitive Features Grid,
which is something that's created in Excel.
| | 02:59 | And it allows us to quickly take a
look across the industry and all the sites
| | 03:03 | that we've classified as part of our
competitive set, and check off all the
| | 03:07 | different features that they have in common.
| | 03:09 | You're able to score this and at a
glance see who is doing what in your industry.
| | 03:16 | We take this information and pull out
what the emotional and practical quotient is.
| | 03:21 | I'm going to talk about that in a minute,
knowing that this is just one way of
| | 03:25 | looking at the website, thinking about
what is practical, what is the task flow,
| | 03:29 | is it pretty easy to get from point A
to point B, does it load efficiently as
| | 03:33 | its standards compliant.
| | 03:34 | So, you can take a look at the
practical aspects of this site and see from a
| | 03:38 | technical standpoint or from just a
user experience standpoint getting from
| | 03:42 | one page to the next.
| | 03:43 | Is it fairly easy to navigate, easy to
find the information you're looking for,
| | 03:47 | does the page load quickly.
| | 03:49 | So, then you get a practical score.
| | 03:51 | Now, we take a look at what I call the
emotional quotient, and that's how the
| | 03:54 | branding is, how does it make you feel.
| | 03:56 | Now remember it, this is not an
objective viewpoint, this is your own viewpoint,
| | 04:00 | what you think about it.
| | 04:01 | But if you get three or four people
taking a look at the site, and you
| | 04:04 | start thinking how is it from an
emotional standpoint, you can start
| | 04:08 | weighing and valuing that.
| | 04:10 | When you have both practical and
emotional up at the highest level, and you are
| | 04:14 | scoring it here 1-5, we start getting
a complete user experience quotient.
| | 04:18 | We want to look at these websites
from the perspective of both form and
| | 04:22 | function, and in the end get a total
score that is what I call the emotional
| | 04:26 | quotient or the user experience total.
| | 04:29 | In that way, we're ranking and
classifying sites in a slightly different way
| | 04:33 | than if we were to take a look at
it just from one angle or the other.
| | 04:37 | If you want to get a little bit more
detailed information on how to complete
| | 04:40 | your own competitor analysis, you can
take a look at the book 'Web Redesign 2.0:
| | 04:45 | Workflow that Works', there is a chapter in
there that covers this in a lot more detail.
| | 04:49 | But it is a fairly simple process, one
that I think your team can walk through
| | 04:53 | and quickly assess what's going
on in the competitor landscape.
| | 04:57 | Again, if this is a separate project,
please put some time and effort into it
| | 05:01 | and charge your clients for that time.
| | Collapse this transcript |
| Strategic roadmap| 00:00 | Getting buy-in from key stakeholders
and other members of your organization is
| | 00:04 | the purpose of this section.
| | 00:06 | Building a strategic roadmap not only
where you want to go with your site in the
| | 00:09 | current, but also the future state of
where you're taking it, looking at your
| | 00:13 | organization as a whole, and making
sure that each of the key stakeholders or
| | 00:18 | different organizations have their say.
| | 00:21 | So starting off with stakeholder
interviews is a great way to get buy-in
| | 00:25 | officially, get people on the same page,
and make sure they understand not only
| | 00:29 | the process of going through the
website redesign, but how it's going to fit
| | 00:34 | into this bigger strategic vision.
| | 00:35 | So to start, I'd like to take
individuals and interview them one-on-one.
| | 00:40 | At times, we'll get large groups in the room.
| | 00:43 | Sometimes we want to let everyone know in the
organization, what we're about to do and why.
| | 00:47 | This is a great time to do that.
| | 00:48 | In the end, we take the group, have
a presentation, show them this is the
| | 00:53 | vision, not only for what we're doing
in terms of the strategy, here's the
| | 00:58 | roadmap, here's what we're doing,
here's what we're trying to accomplish in the
| | 01:02 | immediate term, here's what we're trying
to shoot for before the end of the year
| | 01:06 | in the next 3-6 months.
| | 01:08 | Really, this is where we're trying to
take your website into the next 6-12
| | 01:12 | months, even 2 years out.
| | 01:14 | And we want to understand clearly, what
are the goals, what types of budgeting
| | 01:19 | is involved, what types of resources
are involved, and be able to give them
| | 01:23 | that vision again to take a clear shot down
the road of where they want the website to be.
| | 01:28 | The next part is really planning,
defining your initiatives clearly.
| | 01:32 | In another movie, we talk specifically
about how to gather initiatives from your
| | 01:36 | group, but you want to take
stakeholder interviews as part of the process and
| | 01:40 | understand that each part of the
redesign process can be broken up into specific
| | 01:45 | initiatives, and that those initiatives
can be defined using the core process.
| | 01:50 | The core process can be used in a
short-term, quick website refresh.
| | 01:55 | It can be used to talk about
application design and some improvements that need
| | 01:59 | to be made on a specific path flow.
| | 02:01 | It can be used to plan and execute a
very large redesign, but think about the
| | 02:05 | core process as a toolkit that you can
use to organize each step of the way to
| | 02:11 | get to the final result.
| | 02:14 | In the end, you're going to have your
current site, which is your 1.0 site.
| | 02:18 | That's where you're starting, and you
want to think about a quarterly series
| | 02:22 | of initiatives along with that testing
process, making sure that you're taking
| | 02:26 | strategy, research, and design into play,
so you get your 1.1, 1.2, 1.3, 1.4 site out.
| | 02:35 | Then you're moving towards your
complete redesign, maybe you're not going to
| | 02:38 | have it live until the end of the year,
maybe it's even going to take 6-12
| | 02:42 | months to get it completely together.
| | 02:44 | Well, instead of thinking about that
process as a comprehensive whole, break it
| | 02:48 | once again into a 2.0 plan, a 2.2 plan,
each of these launching quarterly and
| | 02:54 | planning four quarterly releases along the way.
| | 02:57 | In the end you have your 3.0 site.
| | 02:59 | It maybe something like a full content
management system in place, but whatever
| | 03:03 | that goal is you're going to want to
plan for your first release, your second
| | 03:06 | release, and your third release, along
with quarterly initiatives along the way.
| | Collapse this transcript |
| Iterative redesign case study| 00:00 | So let's take a look at WebEx and see
how we incorporated this iterative process
| | 00:04 | into what ended up being a four-year
series of re-releases of the website.
| | 00:10 | We started off in 2001, taking a look
at a site that isn't the most effective
| | 00:15 | site, there are some things they've
done right, some things they've done wrong.
| | 00:18 | But what we wanted to do was
create a more effective experience.
| | 00:22 | We started off with a three-week turn.
| | 00:24 | So taking a look at the real estate,
understanding how the site was currently
| | 00:28 | being used, and quickly taking the
content on the homepage, because remember,
| | 00:33 | we're just doing the homepage refresh
and reorganizing it so that this marketing
| | 00:37 | campaign can go live.
| | 00:39 | So we launched in three weeks, I
wouldn't say it's the most beautiful thing
| | 00:42 | ever, but it did a couple of things.
| | 00:44 | One, it increased the path flow
to join a live demo, which was the
| | 00:46 | main call-to-action.
| | 00:47 | It also had a lot more Search Engine
Optimization or SEO strategy in place, and
| | 00:54 | it took that lovely Lily campaign, here
is this photo of Lily, and put it front
| | 01:00 | in center so that at least people
hearing about these ads on the radio, seeing
| | 01:03 | it on TV, could consolidate that
brand experience into one shot.
| | 01:08 | So this stayed live until we got the
next site out, and remember, this is just a
| | 01:11 | page refresh, but at the same time, we
started working on the bigger picture.
| | 01:16 | So in 2004 this site launched, and
this was a more elegant look and feel.
| | 01:20 | This is WebEx taken to a different level.
| | 01:22 | We were able to see content services,
organized them a little bit better, but
| | 01:25 | more than that, we created a new
look and feel for WebEx that took their
| | 01:29 | branding and took their overall vision,
and implemented not only on to the
| | 01:33 | website, but a lot of their marketing
materials and other elements as well.
| | 01:36 | So here we're moving into a specific path.
| | 01:39 | Now you clicked on Join the Live
Demo and you get into the inside and
| | 01:43 | you realized, you know what, it
wasn't working, it wasn't clear what you
| | 01:45 | were supposed to do.
| | 01:46 | There was a lot of
extraneous information on the page.
| | 01:49 | So instead of just concentrating on
full site redesigns, take a section of your
| | 01:54 | site and really take that section and
make it the best user experience possible.
| | 01:59 | So here we're thinking about labeling.
| | 02:01 | We're looking at the page clutter.
| | 02:02 | We're thinking about how we can simplify
the page, eliminate a lot of extraneous
| | 02:07 | information, and create and
experience that's going to be clean and simple.
| | 02:11 | So this is part of the redesign site
where you start off, enter here, very
| | 02:15 | straightforward, and move quickly into
select a demo, register for that demo,
| | 02:21 | and finally, join a demo.
| | 02:23 | So just improving this path flow,
looking at these four pages, took something
| | 02:27 | like a 50% falloff rate and
decreased that to let's just say, 5-10%.
| | 02:33 | So it was a fairly effective way to
take that main call-to-action, streamline
| | 02:38 | it, and immediately see the
results in a very short timeframe.
| | 02:41 | Now in 2005, we designed and launched a
site that incorporated a full CMS system.
| | 02:47 | So this time, we were able to
translate this site into six
| | 02:50 | languages simultaneously.
| | 02:52 | One of the things we did before we
launched was do a quick usability test in San
| | 02:55 | Francisco and Boston to see how
people were responding not only to the new
| | 02:59 | redesign, but also to the naming and
the labeling and the main call-to-actions.
| | 03:04 | In a very short timeframe, I think,
it was a week or so that we did this
| | 03:07 | testing in two cities.
| | 03:09 | We were able to make small changes
and tweak the site prior to launch.
| | 03:13 | So this is a style guide for WebEx.
| | 03:15 | This helps consolidate look and
feel, typography, and HTML elements.
| | 03:19 | That can be used either to hand off to
a team or it can be used to incorporate
| | 03:22 | into the content management system.
| | 03:25 | After the site was launched, it was
important to track and measure to see where
| | 03:29 | people were clicking and why.
| | 03:30 | This is a Hitbox extension that
allows you to visually see where people are
| | 03:34 | clicking on a site, what things that
they think are the most important and you
| | 03:38 | can start to take this information and do an
analysis of what areas you want to address next.
| | 03:44 | In 2006, WebEx launched a new site,
this time done by their internal team.
| | 03:49 | In the years that we had worked with
WebEx, they had started to hire and build
| | 03:53 | an internal web team and I highly
recommend companies that need to pay attention
| | 03:57 | to ongoing iterations to bring the
proper resources in-house and take a look at,
| | 04:03 | again, the customer experience, the
overall strategy, and this iterative cycle
| | 04:07 | of approach to creating a
comprehensive user experience.
| | Collapse this transcript |
|
|
4. CommunicationBuilding a client survey| 00:00 | Client Survey
| | 00:03 | This is the fun part, this is the
part where we actually get a chance to
| | 00:06 | screen, plan, decide who we want to
work with and not, get a real solid sense
| | 00:12 | of the project at hand.
| | 00:14 | I have been surprised how often after
a conference or a workshop people have
| | 00:18 | said, where can I get this,
how can I use it tomorrow.
| | 00:22 | So the beauty is that the Client
Survey is actually available at
| | 00:25 | web-redesign.com, or it's available in
the Exercise File folders if you are a
| | 00:30 | lynda.com premium member or
if you're watching on disc.
| | 00:33 | Okay, the Client Survey.
| | 00:35 | So let's get started.
| | 00:36 | How many of you have a look at our
project and realized there were certain
| | 00:40 | things that were making you uncomfortable.
| | 00:42 | I had a project where the client asked us
to do so many things in a short time frame.
| | 00:46 | He wanted a demo in two weeks, he
wasn't the final decision-maker, and in the
| | 00:50 | end he owed us about $50-60,000.
| | 00:53 | And I thought to myself, I knew from
the get-go that was a red flagged client.
| | 00:58 | Had so many situations both good and
bad that I try to outline some of what I
| | 01:02 | consider to be things that have to do
with the good client, and things that are
| | 01:06 | reflective of a red flagged client.
| | 01:10 | The good client has some of
these following attributes.
| | 01:14 | And I am not going to read them all but
you want to make sure that they are team
| | 01:17 | member, they are really goal oriented,
and that they see the big picture.
| | 01:20 | Hopefully, you have either given them
a copy of the book Web Redesign 2.0 or
| | 01:25 | you supplied them with the process so that
they understand what you were doing and why.
| | 01:29 | They're not trying to
supplement with their own process.
| | 01:32 | You hopefully have RFP, which stands
for Request For Proposal, or some kind of
| | 01:37 | clear outline of what their goals and scope are.
| | 01:40 | You want to be working with someone
that has final sign off and approval,
| | 01:43 | not someone that's a middleman that has to
constantly go off and ask other people questions.
| | 01:49 | You want to work with someone that is
definitely team oriented and works with
| | 01:53 | you in collaboration, not finger-
pointing or blaming along the way.
| | 01:56 | They are definitely part of the
solution instead of the problem.
| | 01:59 | And let me just take a
minute to define what client.
| | 02:02 | For those of you who are working with
an outside firm or you are an independent
| | 02:06 | designer or a small team, the client
is the person that pays the bills, gives
| | 02:09 | you sign off and approval, and
who you are really presenting to.
| | 02:13 | The client can also be if you are an
internal team member, the stakeholder
| | 02:17 | that's part of the decision-making
process within your organization, or it can
| | 02:21 | be your manager that's down the hall
that you have to run down and present
| | 02:24 | things to every other day.
| | 02:27 | So whatever the client is for you, just
remember that there are good clients and
| | 02:31 | bad client, some of them don't mean to
be bad, they just need to be educated.
| | 02:35 | So taking a look at the red flagged
client, and I have been trying to think why
| | 02:41 | is it that these people cause so many
problems, a lot of times they are really
| | 02:44 | excited and they are enthusiastic, and
they want everything at the last minute.
| | 02:47 | And that's fine as long as you
can keep it somewhat under control.
| | 02:50 | Not only do they want to get it up
quick but they often have completely
| | 02:54 | unrealistic schedules.
| | 02:55 | Now a lot of this is because they
don't understand the process or how much
| | 02:59 | time something takes.
| | 03:01 | So sometimes a red flagged
client just needs be educated.
| | 03:04 | Oftentimes they don't know what the
content should be, they think it's going
| | 03:07 | to appear out of thin air magically and
they don't plan for it as part of the process.
| | 03:13 | They might ask you, oh, you know what,
just create this demo site, and we have a
| | 03:17 | trade show, we just want to get
something up quick, it shouldn't cost too much.
| | 03:21 | And then they use that for
the next three to five years.
| | 03:24 | And so you realize that just because
you're doing a demo site doesn't mean that
| | 03:28 | it's necessarily going to be cheaper.
| | 03:29 | The same thing goes for someone that
says, can you just design a homepage and
| | 03:33 | not really design the whole site.
| | 03:35 | Really the work that goes into creating
the look and feel and understanding how
| | 03:39 | you are going to approach the website
as a whole is the same whether you are
| | 03:42 | doing a home page or 5-20 page site.
| | 03:46 | You still need to put the
process into play all along the way.
| | 03:50 | Obviously, if they have a very small
budget and swift deadline, as you know they
| | 03:54 | say that you can't have
everything, quality, speed, and price.
| | 03:58 | You have to sacrifice one of the
three in order to get to the end result.
| | 04:02 | But overall that they really
don't have an understanding of the web
| | 04:05 | development process.
| | 04:07 | The core process that we covered in the
first section is really about educating
| | 04:11 | the client as well as your own team
because the more you can predict what's
| | 04:14 | coming up, the more you can set the
proper expectations, plan, budget.
| | 04:19 | And make sure that there's an
understanding of what you are doing and when.
| | 04:23 | So the Client Survey, let's get back to
that, what is it, why is it important?
| | 04:27 | The Client Survey is something that's come
up over several years of asking questions.
| | 04:31 | So we have consolidated a lot of the
questions that you need in order to move
| | 04:34 | the site forward, and although some of
it you're going to have to condense for
| | 04:39 | people that are really, really busy,
key stakeholders or CEOs and the like;
| | 04:43 | there is a lot of information in there
that if you actually sit down and define
| | 04:47 | you are going to be able to kick off the
project, set the scope, and make a plan
| | 04:50 | that's actually going to work and not
just be something that we are guessing at.
| | 04:54 | Another way that I use the Client
Survey is to screen clients in advance.
| | 04:58 | We just talked about the good
client, the red flagged client.
| | 05:02 | Sometimes people will give me a call
or they will send me an E-mail and they
| | 05:04 | will say, hey, I have this project and I
want to understand if you guys can do it for us.
| | 05:09 | And I think great, I might take a
look at their site, I have no real
| | 05:12 | understanding of what type of project
it is, if they are going to be a good
| | 05:15 | client or not, and if they even understand
why they might hire of somewhat the value is.
| | 05:20 | So I send the Client Survey and I say,
if you could just fill this out and get
| | 05:24 | it back to us, we will have a really good
understanding of what you're trying to do.
| | 05:27 | If that person says, oh, I don't have time
to fill it out, I just want to get started.
| | 05:31 | Then you automatically know this
person doesn't have the time to be a good
| | 05:36 | client, they aren't going to take the
time to properly identify their project
| | 05:39 | and scope, needs, and they're probably
not going to be able to participate in
| | 05:43 | the project as much as they need to.
| | 05:45 | Being a client is also being available
to answer questions, provide content on
| | 05:50 | time, and to be part of the
process not part of the problem.
| | 05:54 | So the Client Survey, let's
take a look at the Client Survey.
| | 05:56 | This is what's available on web-redesign.com,
or again in your Exercise folder.
| | 06:02 | And this is something that you
should and could modify as needed.
| | 06:06 | The general information is what's the
name of your company, who are the primary
| | 06:10 | contacts, what's your intended launch
date, do you have a specific budget range,
| | 06:15 | and whether you are doing a redesign,
are you're starting from scratch.
| | 06:18 | These are questions that you
really want to identify upfront.
| | 06:21 | So we take a look at the current site
if it is a redesign, if there is nothing
| | 06:25 | up or nothing available you
can skip over this section.
| | 06:28 | And you want to ask questions such as
do you feel your current site is working
| | 06:32 | for you, is it promoting a
favorable user experience; why or why not?
| | 06:36 | What areas of your site
do you feel are successful?
| | 06:39 | What shortcomings exist?
| | 06:41 | One of the things that I find valuable
at this stages is also sometimes if you
| | 06:45 | do run into a situation where your
client does not have time to properly fill
| | 06:49 | this out, you might want to use this
and meet with them in person or over the
| | 06:53 | phone and ask them some of these key questions.
| | 06:56 | One of the questions I ask at this time
is if you could change three things on
| | 06:59 | your site today, what would you change and why?
| | 07:02 | And usually they have a very specific
answer, and it gives you a sense of what
| | 07:07 | are the goals of the redesign,
what are they trying to achieve.
| | 07:10 | We take a look also what are
the reasons for the redesign.
| | 07:13 | One of the primary reason is because
you're merging with a new company, is
| | 07:18 | because you haven't updated your site
in several years, is it because you are
| | 07:21 | actually expanding your services
or you're changing your audience.
| | 07:24 | There's a lot of reasons why people
actually redesign a site and there is a lot
| | 07:28 | of reasons why people go
through the redesign process.
| | 07:31 | And you want to understand
exactly what their purpose is.
| | 07:34 | The next section is one of the
most important, talking about audience
| | 07:37 | and desired action.
| | 07:39 | I have sat down with companies and said,
okay, who is the target audience and
| | 07:43 | why are they are coming to their site?
| | 07:45 | And they look at me with a glazed
expression in their eyes, they actually have
| | 07:49 | no idea of who their audience is,
they have a general set of demographics,
| | 07:53 | someone male, age 25-35, someone that
makes about between $40-80,000 a year,
| | 08:01 | they use the internet once a day.
| | 08:02 | They have some general idea but they
don't actually have a clear picture of who
| | 08:05 | their audience is, and I asked them
this key question, what is the main action
| | 08:09 | that you want to somebody to
take when they come to your site?
| | 08:12 | And again, I might get
that glazed expression. Wow!
| | 08:15 | We don't really know.
| | 08:16 | You need to make sure that at this
point your client knows or the stakeholder
| | 08:21 | that part of the redesign is about
setting an intention for the audience when
| | 08:25 | they come to the site because
people actually want to know within a few
| | 08:29 | seconds after entering a site what they're
supposed to do, without reading all of the copy.
| | 08:35 | Moving into the perception.
| | 08:37 | Here is where we ask, if you are a
car, what kind of car would you be?
| | 08:41 | Are you that Volvo which is safety
oriented or that BMW that is fast and furious?
| | 08:45 | You want to ask what are a few attitudes
that would use to describe how the user
| | 08:49 | should perceive this site.
| | 08:50 | You want to make sure you understand
what are the off-line components and how is
| | 08:54 | your company represented.
| | 08:55 | Make sure that the client understands
that somebody needs to be responsible for
| | 08:59 | the creation and delivery of the content,
and they should be pretty well versed
| | 09:02 | in web and also in the industry.
| | 09:05 | This is something we will get into a
little more detail in the movies to follow.
| | 09:09 | Finally, technology, marketing and updating.
| | 09:12 | Some people glaze over at this point
because they don't know exactly what the
| | 09:16 | target platform or browser is.
| | 09:18 | But at this time you may want to go
into a little bit more detail with both
| | 09:22 | your HTML team and the client stats
and get a pretty clear understanding of
| | 09:26 | what browser types, what screen resolution,
you know how do we capture 85% of the audience.
| | 09:33 | We also ask if there is any specific
technologies at this point you may want,
| | 09:36 | someone that wants an Ajax type or rich
client solution, you may even have some
| | 09:41 | database functionality.
| | 09:42 | If we get heavily into technical
specifications, we are going to be branching
| | 09:45 | this off into another work flow, but
this is the point where you would address
| | 09:49 | that and understand that
another project needs to be defined.
| | 09:52 | And finally, marketing and updating.
| | 09:54 | How are people going to find out about your URL?
| | 09:57 | What is the means of getting it out there?
| | 09:59 | A lot of times if you completely
change the look and feel of the site, your
| | 10:02 | audience will freak out.
| | 10:03 | So sometimes we advice people to have a
staging area or a link that says, hey,
| | 10:07 | here is a preview of something that
is about to change, or you send them a
| | 10:10 | notice, to your audience to let them
know that we're going to be completely
| | 10:13 | redesign this experience, we would
like you to participate in the process.
| | 10:16 | That helps alleviate the freak out that
happens when something changes overnight
| | 10:20 | and people aren't prepared.
| | 10:21 | So let's get back some other elements of
the Client Survey and why it's important.
| | 10:25 | The Client Survey is a tool that you
can download today and use in your project
| | 10:30 | starting from screening your client to
actually aligning stakeholder vision.
| | 10:34 | You are going to want to take the
contents from this and actually turn it into
| | 10:38 | the communication brief,
which we cover in the next movie.
| | Collapse this transcript |
| Communication brief| 00:00 | So the question is do we really
need to do a Communication Brief?
| | 00:04 | My art director will come up to me and
say, do we really have to do it this time?
| | 00:07 | And time and time again, we have
realized that when we fail to do this part of
| | 00:12 | the project, it comes
back to kick us in the end.
| | 00:14 | The Communication Brief is the output
of the client survey, any questionnaires
| | 00:19 | that you have out, any
interviews that you actually conduct.
| | 00:23 | It consolidates all the information
into one document that you can refer to.
| | 00:26 | This could take anywhere from four to
eight hours to complete and you should be
| | 00:30 | able to get the information down into
one to three pages without too much fuss.
| | 00:35 | Some organizations have a very
similar document called a marketing brief.
| | 00:39 | We used to call this the Creative Brief.
| | 00:41 | The reason we have actually changed it
to the Communication Brief is because it
| | 00:45 | says a lot more about the
project than just the creative level.
| | 00:48 | It's actually talking about how we
intend to communicate the brand, the strategy
| | 00:54 | and the actual content to our
audience in the most effective way.
| | 00:58 | This is a story about 10 versions of a
Communication Brief with the client and
| | 01:03 | why we feel this is important.
| | 01:04 | When we sat down with our client,
they were a New York client, very heavy
| | 01:09 | headers, they started out with the words,
we want to be established, reliable,
| | 01:14 | we want to be a luxury brand.
| | 01:15 | We are talking Timex, we are talking Cartier.
| | 01:19 | We're really at the top of our field, we
have been around for many, many decades
| | 01:23 | and we want everyone to know who we are.
| | 01:25 | Now as we went through the design
process, asked more questions, realized how
| | 01:30 | many lines of businesses they had and
what their brand actually represented,
| | 01:34 | they said, hey, hold on, we actually
want to add these words, exclusivity,
| | 01:39 | high-end and innovative deal making
into the process. So this helped.
| | 01:43 | As we went through the design
process further, they said, you know what,
| | 01:47 | we actually want to add the fact that we
are an industry leader and we are responsive.
| | 01:51 | We said, hold you, can only have three words.
| | 01:53 | So define your keywords or better yet
a hyphenated one word version, and they
| | 01:58 | added even one more.
| | 01:59 | This is in the tenth version
of the Communication Brief.
| | 02:01 | We actually went into dynamic and powerful.
| | 02:05 | So the reason why a we needed to have
a Communication Brief is because these
| | 02:10 | people did not understand what their
brand was, what they were trying to
| | 02:13 | communicate on the website and it
was apparent in the ten variations of
| | 02:17 | Communication Brief that we actually put forth.
| | 02:20 | So here we have the Communication
Brief or Creative Brief worksheet available
| | 02:24 | for download at www.web-redesign.com
or available in the Online Training
| | 02:28 | Library Exercise Folder.
| | 02:31 | When you take a look at this, it's
fairly straightforward information.
| | 02:34 | This is a worksheet that's going to
take the information that you have gotten
| | 02:37 | again in the client survey and it's
going to ask it in a slightly different way.
| | 02:41 | You are actually going to
use this as a worksheet.
| | 02:44 | Answering the questions by taking a
look at the client survey and interviews
| | 02:48 | and all the information you have
collected upfront, and remember the goal here
| | 02:51 | is to write a brief.
| | 02:53 | It's very short, it's concise and it's
meant to communicate again what people
| | 02:58 | have already told you in a way
that can be documented and signed off.
| | 03:02 | As a matter of fact, we often ask our
clients to literally sign the document,
| | 03:06 | fax it back to us, or sign it when
we present it, because nothing is more
| | 03:10 | effective at making someone take a
look at the document than asking for their
| | 03:14 | signature on a page.
| | 03:15 | So to start, we take a look at Project Summary.
| | 03:17 | You want to in one paragraph summarize
what the goals of the project are, what
| | 03:22 | the goals of the website are, what is
the overview of the project and what's the
| | 03:25 | single purpose of this site,
secondary goals, and longterm goals.
| | 03:29 | One of the things that you're going to
want to do is build a road map out so
| | 03:32 | you can see how the site is going to
launch immediately, what kind of changes
| | 03:35 | you are going to make over the next six
to nine months, how it's going to look
| | 03:38 | in a year or even down the line, so you have a
clear vision of what you're trying to achieve.
| | 03:43 | Next is audience profile.
| | 03:44 | We want to take a look at the
target audience and besides just general
| | 03:48 | demographics, we want to actually break
it down into primary, secondary, and if
| | 03:51 | necessary tertiary audience.
| | 03:54 | You want to provide enough
detail so that people understand.
| | 03:57 | Again, for multiple stakeholders or
for a company that isn't quite clear on
| | 04:01 | their vision, who is their target
audience and what kind of tasks do they
| | 04:04 | perform on the site.
| | 04:05 | So this is where we want to ask, what is
a typical task and goal that the person
| | 04:09 | has when they come to the website?
| | 04:11 | Are they trying to register, are they
trying to download a white paper?Do you
| | 04:15 | want them to browse the
site for more information?
| | 04:17 | Be as clear as you can and make
sure to articulate some of the
| | 04:21 | psychographics, the behaviors, the
desires of the audience in addition to the
| | 04:24 | demographic information.
| | 04:26 | This is not to replace persona
development or further exploration into
| | 04:30 | audience scenarios that we are going
to cover in future movies, but this
| | 04:33 | should be a brief overview of who your target
audience is and why do they care about your site;
| | 04:38 | what are they trying to achieve?
| | 04:39 | Next, we look at Perception/Tone/
Guidelines and again this is if you were a car,
| | 04:43 | what kind of car would you be?
| | 04:45 | As I showed you in the very first
section, if you could pick some keywords to
| | 04:49 | actually identify what type of company
you are and how an audience you perceive
| | 04:54 | you, what would those words be?
| | 04:56 | So what do we want them to think and
feel and how is this website going to help
| | 04:59 | them achieve this goal?
| | 05:01 | So pick some adjectives out and make
sure that the perception and the tone match.
| | 05:06 | Again, the vision for the company's
brand, the strategy, and how the website
| | 05:10 | fits into the larger picture.
| | 05:11 | Next, we look at Communication
Strategy, Competitive Positioning, and that
| | 05:16 | single Targeted Message, that
thing that you're trying to convey.
| | 05:20 | The communications strategy is
about how do we convince them.
| | 05:23 | This is the part that you may want to
think about a little bit more as, what
| | 05:26 | is the purpose of this website
and how does it fit into the overall
| | 05:28 | communication strategy?
| | 05:30 | Whether you have this information or
this is something you need to deep dive
| | 05:33 | into the marketing team and get
a little bit more information.
| | 05:36 | You want to understand that how
your website plays into the whole.
| | 05:39 | This may be only one piece of marketing
campaign that also has outside component
| | 05:44 | such as television, radio,
mass marketing, and more.
| | 05:47 | You want to understand what are the
drivers that are making this particular
| | 05:51 | initiative or website a success and
what are your goals, how does this fit
| | 05:55 | into the big picture.
| | 05:56 | Taking a look at Competitive Positioning,
you have hopefully taken a look at the
| | 06:00 | industry as a whole, taken a look at
some of the websites that are out there
| | 06:04 | with the same type of functionality
offering the same types of services and
| | 06:07 | products and maybe even some innovative,
newer technology based sites that are
| | 06:12 | representative of where you want to go.
| | 06:14 | So think about not how you are the same,
but how you are different from these
| | 06:18 | competitors and in the competitive
landscape, how is this site and the
| | 06:22 | experience that your customer has
coming to the site is going to differentiate
| | 06:26 | your company from all the other players around?
| | 06:29 | Finally, I want you to ask your
client or the stakeholders to state a
| | 06:34 | single-minded word or phrase that
describes the site once it's launched.
| | 06:38 | Usually, people hyphenate and they
think smart-innovative, smart-fun or quality
| | 06:45 | based-reliable, things like that and you
want them to articulate in one to three
| | 06:50 | words what does the site represent?
| | 06:53 | So how does it all come together?
| | 06:54 | Well, here's a sample Communication/
Creative Brief and you want to take a look
| | 06:59 | at it from a high level and make sure
that it's really something you can fit
| | 07:02 | into just a couple pages.
| | 07:04 | So here is an example, here is the
Company, here is the Project Summary, here is
| | 07:09 | the Target Audience.
| | 07:12 | The Perception/Tone/Guidelines
don't have to be a complete paragraph.
| | 07:15 | You can use bullet points and just make
sure that you're articulating what it is
| | 07:18 | that the site should convey in a
condensed and very straightforward manner.
| | 07:23 | Communication Strategy again, short
paragraph along with Competitive Positioning
| | 07:27 | showing how they differentiate
from their competitors, and then the
| | 07:30 | single-minded message.
| | 07:32 | What is it that the site is trying to convey?
| | 07:34 | So at the bottom we have a
line for signature and date.
| | 07:37 | A little bit of CYA, if you
know what I'm talking about.
| | 07:40 | It's great, because once you have a
document like this filed away, you can pull
| | 07:45 | it out especially during that design
phase where everyone says, oooh, we want it
| | 07:49 | to be supercool, we want it to be Flash
oriented, we want it to be bright and a
| | 07:54 | wow factor, when actually you look back
to the Communication Brief and it said
| | 07:59 | that we are reliable or trustworthy, you
want to make sure that you are carrying
| | 08:02 | the accompany vision from the
start of the project to the end.
| | 08:06 | So this document is going to be
something that you can file away and pull out
| | 08:10 | several times during the process and
make sure that the client understands this
| | 08:14 | is what they have said;
| | 08:16 | if it changes, there's going to be
cost overruns and/or delay in the actual
| | 08:20 | launch of the project and
here is where it begins.
| | Collapse this transcript |
| The art of estimation| 00:00 | This is the age old question,
how much is it going to cost?
| | 00:04 | Getting in to the art of estimating
means that you have some years of experience
| | 00:07 | in knowing what to expect, how long things take?
| | 00:11 | All that comes into effect but in the end
there are couple realities we have to deal with.
| | 00:15 | One reality is we charge what we can.
| | 00:18 | Of course, we want to make money on a project;
| | 00:20 | internally you are going to want to put as
many resources as you can into a project.
| | 00:24 | You have to understand that even if
you're working internally in a organization,
| | 00:27 | you have to track your hours
and be accountable for them.
| | 00:30 | So the first reality, we charge what we can.
| | 00:33 | It's really based on your
experience, what you bring to the table.
| | 00:36 | If you're available, if you're dying
for work and you are really needy versus
| | 00:40 | being completely swamped, a lot of the
overhead that you have, and outside cost.
| | 00:45 | If you're a single designer working at
home or in your basement, your overheads
| | 00:49 | are a lot lower than if you have a
beautiful suite in the middle of Manhattan.
| | 00:53 | You have to take a look at some of the
other factors that have to do with cost
| | 00:56 | and associate your end-result with that.
| | 00:59 | Documentation is important,
but not always necessary.
| | 01:02 | Some companies charge a lot of money and a
lot of documentation is expected in return.
| | 01:07 | Just remember that with
documentation comes additional budget.
| | 01:11 | If you have a lot of programming and
technological considerations, of course,
| | 01:14 | you are going to need to take that into
consideration and as always, timing and expectation.
| | 01:19 | Is it due tomorrow, do we have to
pull four all nighters in order to get it
| | 01:23 | done, or do we have the leisure to do it on
time and on budget in a way that we do it best?
| | 01:28 | Taking a look at the estimating
reality number two is, you really do have
| | 01:32 | to think about hours.
| | 01:33 | You get to the point where the client
asks you, well, how much is it going to cost?
| | 01:38 | And you ask, well how much budget do you have?
| | 01:40 | Of course we want to always start with
that but we have to break it down into
| | 01:44 | actual hours that we are accountable
for and that means either giving a fixed
| | 01:48 | price based on the hours, taking a look
at both high and low range of estimates.
| | 01:53 | If all goes well, and we only have two
rounds of design, then we can actually
| | 01:58 | come in at this price.
| | 01:59 | If we have three or four rounds of
design and the decision-making process isn't
| | 02:03 | really smooth, we might have
to get into the higher range.
| | 02:07 | Some companies end up charging time and
materials which works well if a project
| | 02:11 | is not defined from the beginning.
| | 02:13 | And you have your resources available
and you want to just get in there and
| | 02:16 | start the work without
doing a lot of upfront prep.
| | 02:19 | So there's many, many methods of estimating
either hours, task, or just based on your gut.
| | 02:26 | But you are going to need to base your
costs somewhat on hours and make sure
| | 02:30 | that you build a 10-15% cushion in it at all times.
| | 02:34 | Although the art is in the experience,
estimating time is not that hard.
| | 02:39 | We are going to show you some different
ways that you can take a project, break
| | 02:42 | it down and estimate it
based on task, time or resources.
| | 02:47 | Let's see what we are talking about.
| | 02:49 | Taking a look at a project, you might
have a basic eight week project, this lays
| | 02:52 | out pre-project, prep work, the things
you need to do before you get started.
| | 02:56 | Now we get into week one through
eight while you're defining the project,
| | 03:00 | structuring it, going through the
visual design and interface, producing it,
| | 03:04 | and then comes launch.
| | 03:06 | Well, some projects are in a shorter
time-frame, 4-6 weeks, other ones maybe
| | 03:10 | 12-14 weeks and beyond.
| | 03:12 | This is a very good basis to take a
look at, spreading your product out into
| | 03:16 | weeks, and looking on the right side of
how much project management do you need?
| | 03:21 | For a lot of hand-holding, you are
going to want that project manager on almost
| | 03:24 | full time, and you need to allocate the time
and resources for that person to do their job.
| | 03:30 | If it's something that's an internal
project or if it's a client you have worked
| | 03:33 | with before, you may able to pair
that down into 20% or even 30% of that
| | 03:38 | person's time, thus the hours go down.
| | 03:40 | Taking a look further, art direction,
design, HTML and production, you can start
| | 03:45 | to see where they fit into the process,
and once again glancing at the entire
| | 03:49 | core process and seeing
where your resources fit in.
| | 03:52 | If you're one person wearing multiple hats,
you are going to see where your tasks fit in.
| | 03:56 | If you have a team of individuals, you
are going to see where they play into
| | 03:59 | the bigger picture.
| | 04:00 | This is the start of figuring out how
much time a project is going to take?
| | 04:04 | So just to take a crack at my own
theory of breaking down a project by role and
| | 04:11 | then breaking it down by task, I took a
sample project, set up some dummy hours,
| | 04:16 | took a team member approach and thought,
okay, what do I need in terms of days
| | 04:20 | in order to get this job done?
| | 04:22 | You can see how it multiplies out.
| | 04:24 | You take into account
overhead, and then you get a total.
| | 04:28 | In this scenario, with this small
eight week project, I was able to estimate
| | 04:32 | that this project was going to
come in slightly under $30,000.
| | 04:36 | Breaking the project down by role
means you also need to associate your
| | 04:39 | resources with an hourly cost.
| | 04:41 | If you are hiring someone freelance,
they maybe between $50 and $70 per hour.
| | 04:45 | If you're hiring someone with a lot
of experience and expertise, they maybe
| | 04:49 | charging a little bit more.
| | 04:50 | But remember, they usually take less
time because of the experience involved.
| | 04:53 | So remember when you are figuring out
the budget, that you want to pay someone
| | 04:56 | according to the 30-30-30 rule.
| | 04:59 | The simplest way to understand that is
to start off with a billing rate of $150.
| | 05:04 | Take a third of that, and pay that person
the contractor, approximately $50 an hour.
| | 05:09 | Make sure that you have saved about $50
an hour, to take care of your overhead
| | 05:14 | cost, and then hopefully
another $50 for your profit.
| | 05:17 | Now, the 30-30-30 rule is general
and you want to adjust it to meet your
| | 05:21 | individual needs, and remember that
service based businesses actually generate
| | 05:25 | between 18% and 25% profit on a regular basis.
| | 05:29 | If you have a product-based firm or
some other kind of simple production
| | 05:33 | outsourcing, you can generate
a much higher profit margin.
| | 05:35 | So use the 30-30-30 rule as a
starting point, and then adjust it to meet
| | 05:40 | your individual needs.
| | 05:42 | If you have a production resource
that's just out of school, you maybe able to
| | 05:45 | get away charging either intern rates $
15 to $20 an hour or starting up with $20
| | 05:50 | to $30 to $40 an hour depending on
the level of expertise that person has.
| | 05:55 | Whatever the rates, just make sure
that you account not only for what you're
| | 05:58 | paying them, but also you just
want to remember that rule of thumb.
| | 06:02 | You want to pay someone 30% of the
overall budget that you are charging which
| | 06:06 | accounts for 30% for that person's
role, 30% for overhead, and hopefully
| | 06:11 | something around 20-30% profit.
| | 06:15 | Breaking down a project by task.
| | 06:17 | This was also part of my mental
exercise to take a fictitious project, eight
| | 06:21 | week cycle, and break it down into the
phases using the core process for project
| | 06:25 | definition, site architecture,
information design, graphic design, production
| | 06:30 | programming, and even adding a
little bit in there for usability testing,
| | 06:34 | competitive analyses, copywriting and QA.
| | 06:37 | So taking that into consideration,
estimating the hours involved for each task,
| | 06:41 | and multiplying it out by their hourly
rate, I was able to get something that
| | 06:45 | was pretty close to the other estimate.
| | 06:47 | If you remember, it was just slightly
under $30,000 and actually $26,000 in that
| | 06:51 | case, and here it rounds out to about 28,000.
| | 06:55 | If you don't want to be so specific
with hours, you can use days, but remember
| | 06:58 | some days are 8 hours and some days are 12.
| | 07:01 | So it depends on how you're paying your
staff or the contractors you bring in.
| | 07:04 | Also if your client, hiring an outside
team, they maybe charging overtime hours
| | 07:08 | for night, so we can work.
| | 07:10 | So make sure that you take this all into
account as budgets are being established.
| | 07:15 | So breaking down by task.
| | 07:17 | This takes a little bit of experience
but a project definition phase usually can
| | 07:21 | be done in less than a week.
| | 07:22 | Site architecture, if we are
in a good mood, takes five days.
| | 07:25 | Generally, if it's a larger project,
it's going to take at least a couple of
| | 07:28 | weeks worth of time back and forth.
| | 07:30 | Getting into the information design and
the visual design, really depends on the
| | 07:34 | complexity of the site, as
does the HTML production.
| | 07:38 | So really, although these are just
estimates, you may want to take standard
| | 07:42 | projects that you have done before for
this type of client or project and take a
| | 07:46 | guess at seeing how many days
you feel each task will take.
| | Collapse this transcript |
| Sample budgeting and pricing| 00:00 | So here we have a Sample_estimate
Excel spreadsheet.
| | 00:04 | I actually like getting into these.
| | 00:06 | It's a kind of an art to weave around and
determine what you think it's going to cost.
| | 00:11 | Then actually put the hours down that
you think it's going to take, and then
| | 00:15 | balance it and balance it till you
reach that happy medium and get the price
| | 00:18 | down to what the client wants, while
still maintaining your integrity and giving
| | 00:22 | your team the hours that
they need to complete the work.
| | 00:24 | So taking a look at the spreadsheet, we
have the phases that we have outlined in
| | 00:28 | the core process, Definition &
Discovery, Structure & Content, Visual Design,
| | 00:33 | Template Production, and Handoff.
| | 00:35 | In this case what we are doing is not
building and launching the site but we are
| | 00:39 | actually going to be handing it
off for another team to do that work.
| | 00:42 | So we start off with a look at who the
resources are, how many hours do we think
| | 00:48 | that it's going to take for
them to complete the project.
| | 00:50 | So I start off with some
rates over here in the Resources:
| | 00:53 | Project Manager, Art
Director, Designer and Coder.
| | 00:56 | If you are working in an agency, you
want to be charging a $150 an hour.
| | 01:01 | Art Director might be $175.
| | 01:04 | Your Designer, you might
be charging out at $100.
| | 01:07 | Your Coder, you may be charging out at $100
also, and your Programmer $100 an hour.
| | 01:12 | So, your total automatically switches to
a new price, in this case about $55,000.
| | 01:19 | If you're an independent team and your
overheads are a little bit less, you take
| | 01:23 | the same formula and
start putting in the numbers.
| | 01:27 | $80 an hour here, $80 an hour here, $50
an hour here, $50 an hour here, and
| | 01:38 | programming we will leave at $75.
| | 01:39 | So you can see that the numbers over
here changed and your overall goal of
| | 01:45 | hitting that $40,000 mark
is now reduced to $30,000.
| | 01:49 | So if you have less overhead, you can
add a buffer, let's say here of 20%, and
| | 01:56 | automatically you are getting closer.
| | 01:58 | Well, you still have a little ways to go.
| | 01:59 | So you can either add hours over here
for your team to do their job a little
| | 02:03 | bit better, or you can make a little bit
money here and add 30% to your overall budget.
| | 02:08 | Here we have $39,000 and we've gotten
very close to that magical target amount
| | 02:13 | that we know the clients said they had to spend.
| | 02:16 | So this is one way to massage the
numbers, to take a look at the hours again
| | 02:20 | that your team is going to need to do
the work, and also understand what the
| | 02:24 | goal is, what that person is planning
on spending, and how close you can come
| | 02:27 | to meeting that goal.
| | 02:29 | Let's take a look at another example.
| | 02:33 | Okay, here we have the spreadsheet bytask.
| | 02:35 | Now this is great if you're a smaller
team or even an individual having to do a
| | 02:38 | lot of deliverables in a very short time-frame.
| | 02:42 | We're giving you a slightly different
scenario, in this case instead of having a
| | 02:45 | higher budget that you are going to try
and move up to, you have a client that
| | 02:48 | actually says, you know what, we have $15,000.
| | 02:52 | Let's see what we can do for that.
| | 02:53 | Now knowing that you are going to do
an exceptional job, you already can tell
| | 02:57 | that you are going to lose a little bit
of money on this job, but it's important
| | 03:01 | because you want to make a good
impression, you think this is going to be
| | 03:04 | longterm relationship, and/or
you want to do this person a favor.
| | 03:08 | In this case, one of the tasks is
holding stakeholder interviews, completing
| | 03:14 | audience segmentation, and
conducting usability testing.
| | 03:17 | You also have some outside costs that
you have to factor in, and let your client
| | 03:21 | know that although these are estimates,
you are going to basing on actuals and
| | 03:25 | providing them with receipts
at the very end of the process.
| | 03:29 | So here we are starting out with the
discount of 10%, but that doesn't quite get
| | 03:33 | you to that goal of $15,000.
| | 03:34 | So we are going to take off a little bit more.
| | 03:37 | We are going to try a -12% and
see how far we get with that.
| | 03:43 | So now we are getting a bit closer.
| | 03:46 | We may even have to go 15% off.
| | 03:48 | Now you really are doing this person a
favor and they have to understand that.
| | 03:53 | Make sure that they see that in order
to get this job done at the price and the
| | 03:58 | budget that they have on hand, you are
going to be doing be the work that you
| | 04:01 | normally do, but you are going to be
providing them with a 15% discount for
| | 04:05 | this first project only.
| | 04:07 | And then moving forward, you are going
to be able to charge them or you're going
| | 04:10 | to need to charge them at your
regular rates in order to get the job done.
| | 04:13 | So these are some examples of Excel
spreadsheets organized by task and by
| | 04:17 | resources and some little tips and
tricks to make estimating a little bit
| | 04:21 | faster, smoother, and easier.
| | 04:23 | But remember, it's really a massage process.
| | 04:26 | You need to take a look at what the
client has to spend, what your budget is,
| | 04:30 | what your hourly rate is, and how many hours
you think it's going to take to do the job right.
| | 04:34 | And make sure that the team
understands how many hours that they have
| | 04:37 | to complete the work.
| | 04:39 | They don't need to know what you're
charging for their time but they do need
| | 04:42 | to know how many hours they have per
deliverable in order to get the job done
| | 04:46 | right.
| | Collapse this transcript |
| Scope creep| 00:00 | What is Scope Creep?
| | 00:02 | It's this inevitable migration of a
project slowly and slowly outwards until it
| | 00:07 | is completely out of control.
| | 00:09 | We try and avoid Scope Creep at all
times during a process and even before as we
| | 00:14 | are screening, and trying to determine
if a client is going to be a good client,
| | 00:18 | or a little bit of a red flag client.
| | 00:21 | One of the things that I do when
someone sits down at the table and we're
| | 00:24 | talking about how this site is going,
and what the progress is and when we
| | 00:29 | were going to launch.
| | 00:30 | You may have a key stakeholders sit
down and say, you know, I saw this
| | 00:33 | really great thing;
| | 00:34 | it's this pole and I would like to include it.
| | 00:37 | You know do you think we can include
something like that, I think it would be great.
| | 00:41 | You look at that person and very
clearly say that's a great idea.
| | 00:45 | I will get back to you by the end of the
day with a budget and a schedule for that.
| | 00:50 | And, they look at you and they think
okay, that person really understands what
| | 00:54 | we are trying to do here.
| | 00:55 | And he is trying to stay on target.
| | 00:57 | A lot of times people ask for things
because they don't understand how each
| | 01:01 | little thing that they ask for takes
an additional day, additional resource,
| | 01:05 | it's going to quickly take
the product out of control.
| | 01:08 | So, we have something called an
additional charge form, or a A/c charge form.
| | 01:12 | So, just remember they have already
signed off from that communication brief.
| | 01:15 | And you wanted to keep your client
accountable for the changes that they make.
| | 01:19 | This is another form that allows you to
actually track what the client's asking
| | 01:23 | for, put a budget to that and if you're
working in an internal team, you can let
| | 01:28 | them know that, this is something what
you're going to be covering and, you can
| | 01:31 | add in the next phase of development,
because, remember, you're working with an
| | 01:35 | iterative cycle of development.
| | 01:37 | So here it is, the
fabulous additional charge form.
| | 01:41 | There really isn't anything special
about it, it's just enough to have a form
| | 01:45 | that you put some definition to title
ID, client name, e-mail, phone number,
| | 01:50 | and put down what it is they are asking
for, how much do you think it is going
| | 01:54 | to cost, and get them once again to put
their signature and date on the bottom line.
| | 01:59 | This is something you are going to be
adding into the end invoicing of the project.
| | 02:02 | But because you have this tracked and
signed off, you're going to be able to
| | 02:07 | monitor Scope Creep all along the way.
| | Collapse this transcript |
| Centralizing communication| 00:00 | Working on a web project means you are
going to be working with a team of people
| | 00:03 | that are not only disconnected in terms
of the services, the types of job roles
| | 00:08 | what they have and the deliverables
that they are working on but they are often
| | 00:11 | times working from different parts
of the country, the city or the world.
| | 00:15 | So having a centralized form of
communication throughout the life cycle of the
| | 00:19 | project is extremely important and some
companies, that I have been to, I have
| | 00:23 | sat down in actually, interviewed
different teams and found out that they have
| | 00:27 | storage areas, they have
servers, they have a lot of things;
| | 00:30 | what they don't have is one central
point of communication for all of the
| | 00:34 | project deliverables, not only for
their internal team but their stakeholders
| | 00:38 | and if you're working with an outside client,
between the client and the actual vendor.
| | 00:43 | So, Staging Page is one of the things
that we have developed, that we have used
| | 00:46 | over and over again.
| | 00:48 | This is one of the key things that,
when I deliver a presentation to a client,
| | 00:52 | they go back and back till they have
one point of communication, they have all
| | 00:55 | of our contact information and if we
go into it and take a look at how it
| | 00:58 | actually looks live, we can see that.
| | 01:01 | Not only are we able to click through
from section to section and see all the
| | 01:05 | deliverables that are posted during
the process, but we have one point at
| | 01:09 | which to look back on archive and
take all of the project deliverables, the
| | 01:14 | timing involved, when we have client sign off,
everything that's part of that project into play.
| | 01:19 | So having a central storage place
and posting place for all or part of
| | 01:22 | deliverables is extremely important.
| | 01:25 | So as an example of a hosted solution,
37 signals has come up with base-camp
| | 01:29 | which is part of a suite of online-based
apps that are hosted by them.
| | 01:34 | So the beauty of this is that, you as a
small company, don't need to worry about
| | 01:37 | server-based applications, you are able
to get your own your own URL, user name
| | 01:41 | and password up and running
within about 10 minutes time.
| | 01:45 | The nice thing also about this type of
application is, for small-group, small
| | 01:49 | teams and pretty fast-paced
projects, you can centralize all of your
| | 01:53 | communications in one place.
| | 01:56 | Instant message is another tool that we
use in our organization, not only with
| | 01:58 | our team members sometimes working
remotely, but also with our clients.
| | 02:02 | When we have a Fast-Turn project, we
are working late, we sometimes work from
| | 02:05 | home, we have virtual Tuesdays and Fridays.
| | 02:07 | It's really important to make sure
that there's an alternate form of
| | 02:10 | communication besides e-mail or phone.
| | 02:13 | Keep your team on track and your
clients aware of what's next and allow for
| | 02:17 | multiple forms of communication to
help facilitate the project along the way.
| | Collapse this transcript |
| The importance of time tracking| 00:00 | Welcome to a company or a
company owners greatest challenge;
| | 00:03 | getting your staff to track their hours.
| | 00:06 | It's one of the things that I have tried
at every single company, small business
| | 00:10 | or internal organization that I've been at.
| | 00:12 | I've been trying to get people to actually
tell me how long did they take to do that project.
| | 00:16 | Even if they pulled-in all night hour,
they put in each twelve hours in a row.
| | 00:20 | They put in only two hours at time.
| | 00:22 | I need to know exactly how much time it took.
| | 00:26 | How can you get your team involved on
a weekly basis and have them understand
| | 00:30 | why it's important for them to
track their time in some manner.
| | 00:33 | One other things that I have try to
do at nearly every company that I have
| | 00:37 | worked at, is to have a weekly status
meeting and to be able to say, you know
| | 00:40 | what, we have this amount budgeted for
the project, we've used up this amount
| | 00:44 | and we have this amount left.
| | 00:46 | If you dot this at several key places
in the project or on a weekly or biweekly
| | 00:51 | basis, you are going to run a much
greater chance of coming in on time and on
| | 00:55 | schedule, because you are going to be
able to see what's going on during the
| | 00:58 | process, what's been happening
to take that project off scope.
| | 01:02 | Some people like to use their own
personal calendars to track their time.
| | 01:06 | This is an example of an iCal calendar.
| | 01:08 | At one company, we offered a paper
calendar to each member of the staff and let
| | 01:12 | them sit it by their desk and
enter their time on a daily basis.
| | 01:16 | At the end of the week our account
person went around and bugged each person on
| | 01:20 | the staff to make sure they
updated that paper calendar.
| | 01:23 | She picked it up and enter the
time manually over the weekend.
| | 01:26 | Whatever you need to do, be creative.
| | 01:28 | It may be it may be a tricky process,
but you want to get people to enter their
| | 01:33 | time so that you can, not only see if
you are coming in on budget, but you're
| | 01:37 | able to track future projects and also
to check on quarterly basis, what's going
| | 01:41 | on your company, how accountable your
team has been, how productive they've
| | 01:44 | been, who is available, who is not.
| | 01:46 | And that's all for the outside
firms that are billing clients and even
| | 01:49 | internally it's great to take a look at
your resourcing, to see if you're taxing
| | 01:54 | your internal staff too much if you need
to either plug-in outside contractor or
| | 01:58 | maybe even hire an additional resource or two.
| | 02:01 | This is a product called time.onrails.org.
| | 02:04 | It's a Ruby On Rails product.
| | 02:05 | Moving into the 2.0 space.
| | 02:06 | It allows you to track your time on
the fly, start it at the beginning of the
| | 02:11 | day, enter various projects and do a
start and stop in a timing format and then
| | 02:16 | total it up at the end.
| | 02:17 | It actually exports into Excel.
| | 02:19 | It does a few things that are pretty sleek.
| | 02:22 | Now if you're not using something
like this, there is a lot of other online
| | 02:25 | time trackers available.
| | 02:26 | Some of them are free.
| | 02:27 | Some of them work with your internal
networks but whatever you decide to do, do
| | 02:31 | one thing, track your time.
| | Collapse this transcript |
|
|
5. BrandingUser experience and the brand promise| 00:00 | What is your company's brand promise and
how does that fit into the website that
| | 00:04 | you're about to redesign?
| | 00:05 | There is a great book by Karen Donoghue
called Built for Use and it talks about
| | 00:10 | user experience as being able to
convey the brand promise in customers in a
| | 00:15 | very effective way.
| | 00:16 | It's important at this phase of the
redesign process that you think about the
| | 00:19 | brand promise that your company's
making, remembering that the website is one
| | 00:24 | touch point in the overall customer experience.
| | 00:27 | Thinking about the brand promise you can
get into something as simple as coffee.
| | 00:31 | The coffeemaker on the left is more of
a practical experience, the one on the
| | 00:35 | right, a little bit more emotional.
| | 00:38 | We happened to have the coffeemaker on
the right and you can see if you take a
| | 00:41 | careful look at the buttons on the front,
there is absolutely no way to figure
| | 00:45 | out how to work that
machine, but were we dismayed?
| | 00:48 | No, because we liked machine so
much, we thought it was beautiful and
| | 00:51 | aesthetic and pleasing.
| | 00:52 | We took the time and energy to figure it out.
| | 00:56 | The coffeemaker on the left, a
little more straightforward, a little
| | 00:59 | less elegant and the person using that
coffeemaker is going to have far less patience.
| | 01:04 | If doesn't work right away, they are not
going to be having a very good experience.
| | 01:08 | So I want you to think about your
website in very practical or emotional
| | 01:12 | terms and understand that for those
of you who convey a practical promise,
| | 01:16 | which is fine, you want to be able
to allow someone to get into your site
| | 01:20 | quickly and easily to figure out what
they're supposed to be doing and make
| | 01:24 | sure the user experience is practical,
straightforward, and clearly conveys
| | 01:28 | the path from point A to B.
| | 01:30 | For those of you who have more an
emotional brand experience, you can use Flash,
| | 01:35 | images, evocative typography and
messaging to bring that person in emotionally,
| | 01:41 | figure out how the web and your company
fits into their overall expectation and
| | 01:46 | how you can create that perfect
emotional experience for them.
| | 01:50 | Companies like JetBlue, TiVo, Google,
and Apple have figured out what they do
| | 01:54 | best and they do it very well.
| | 01:56 | I want you think about the type of
company you are, again, knowing whether
| | 01:59 | you're practical or emotional based
and do one more thing, figure out if you
| | 02:04 | could do one of these things,
which one of them would you do best.
| | 02:08 | Are you a service company?
| | 02:10 | Are you a product company?
| | 02:12 | Or do you offer content?
| | 02:14 | It's interesting, because most of you
know that you either offer a service, but
| | 02:19 | also you offer content, or
you offer service and product.
| | 02:22 | But what's important is to take one of
these attributes and do it very, very well.
| | 02:27 | This is actually based on Harvard
School of Business chart that says service,
| | 02:32 | product, or process, but I switched it
to content so it relates a little bit
| | 02:36 | more closely to the web.
| | 02:37 | So let's take a look at websites that
convey service products and content in
| | 02:43 | the best way possible.
| | 02:44 | I am not going to get into
detail about the success of the iPod.
| | 02:47 | The point I want to make is that Apple knows
products and they do it in the best way possible.
| | 02:52 | They make it easy for people to have an
emotional tie to what they're about to buy.
| | 02:55 | They make it easy for people to download
information, see what other accessories
| | 02:59 | there are to offer and then ship it 1, 2, 3.
| | 03:03 | Very, very straightforward.
| | 03:05 | FedEx is a great example of a service
based company that's taken their online
| | 03:09 | presence to the next level.
| | 03:10 | Already established as a world class
service offline, www.fedex.com launched and
| | 03:15 | took personalization, customization
and service to the next level by allowing
| | 03:21 | people to actually manage, ship and
track their packages in real time.
| | 03:26 | And they have created an online
presence that surpasses the original
| | 03:29 | expectations that people had for FedEx
as a company, and this is why this is
| | 03:33 | such a great example of
exceeding customer expectations.
| | 03:38 | In one of the best examples of humor
based content the Onion presents its
| | 03:42 | information clearly.
| | 03:44 | It also had a lot of offline
components including emails that it can send
| | 03:47 | everyday and RSS feed and they
distribute their content regular newspaper style.
| | 03:53 | So whether you are product, content,
or service based, just remember that the
| | 03:58 | online medium is one touch point
into your entire user experience.
| | 04:03 | You may have other channels of
reaching your customers such as offline
| | 04:07 | marketing, advertising, phone
surveys, the actual product and customer
| | 04:11 | service site itself.
| | 04:12 | But whatever you're creating
online, just remember that you have an
| | 04:15 | understanding from the highest
conceptual level down to the pixel level of what
| | 04:19 | that brand promise is.
| | Collapse this transcript |
| Aligning brand vision| 00:00 | Several years ago, we had a client
that was particularly difficult because of
| | 00:04 | the large stakeholders each with
their own idea of what the website was
| | 00:07 | supposed to look like.
| | 00:08 | Although, we asked them over and over
again, what was their vision, what words
| | 00:12 | would you use to represent
your company and your site.
| | 00:14 | They made us go through 20 more design rounds.
| | 00:17 | Each one trying to get closer and closer to
the words that they were trying to convey.
| | 00:22 | So, we had a do something to shortcut
that and in the end came up with a concept
| | 00:26 | of a brand spectrum and brand boards to
get stakeholders on the same page before
| | 00:31 | we start the visual design process.
| | 00:34 | Taking a look at some of the words that
we've asked our clients to convey to us
| | 00:37 | via the communication brief, we
look at one client in particular.
| | 00:41 | This client came to us very clear in
what their vision was, having a solid idea
| | 00:45 | of what their brand attributes were,
and understanding there were several
| | 00:49 | different ways they could
represent that on the website.
| | 00:50 | So, we wanted to help them get
there in the easiest way impossible.
| | 00:53 | We listened to them as they said
they were leaders in the industry.
| | 00:56 | They were businesslike.
| | 00:57 | They were committed, innovative, and activist.
| | 01:00 | And we put together three brand boards
that communicated one or two of these
| | 01:04 | words in a very clear visual manner.
| | 01:07 | We also put together a brand
spectrum chart taking words like innovative,
| | 01:12 | activist, and putting not only their
competitors, but other industry logos on
| | 01:17 | the chart and allowing them to see where
their logo or their brand fit into the whole.
| | 01:22 | Once we had alignment on where this
logo should be presented and which axis, it
| | 01:26 | should be the closest to,
we were able to move forward.
| | 01:30 | This is the site before just to give
you a sense that this company portfolio
| | 01:34 | 21 although representing Green had not
quite taken their website to the next
| | 01:39 | level and were really looking forward
to creating a new presence that matched
| | 01:43 | their brand vision.
| | 01:44 | Before the start of the visual design
process, we create what we call brand
| | 01:48 | boards or mood boards.
| | 01:50 | The goal of this stage is to align
stakeholder vision into a look and feel
| | 01:53 | that matches their brand goals without going
through rounds and rounds of visual design.
| | 01:58 | We start of by taking the key attribute
that the client has articulated in the
| | 02:01 | communication brief.
| | 02:02 | In this case, Activist, Innovative, and
Simple and we translate them into a visual format.
| | 02:08 | We use imagery and color, typography
and layout to evoke these brand attributes
| | 02:13 | and intentionally avoid any
layout or actual content at this stage.
| | 02:17 | The brand boards often allow for the
fun part of design to start earlier in the
| | 02:21 | process which both client and designers enjoy.
| | 02:24 | The end goal is to gain clarity upfront,
so we can match the brand vision with
| | 02:30 | the visual direction early in the process.
| | 02:34 | The next board, we presented had a
slightly different take, softer, it's a
| | 02:38 | little more elegant and clean.
| | 02:40 | We used the words Reliable, Mature and
Sophisticated to represent the look and
| | 02:43 | feel of this using sepia
tones and softer colors.
| | 02:47 | The I was able to review this and
determine is this the look that they would
| | 02:50 | like to move forward with, not only
in their website, but in the rest of
| | 02:53 | their collateral overall.
| | 02:56 | Our last board, and we usually
present three takes a completely
| | 02:59 | different approach.
| | 03:00 | We looked at Authentic, Activist, and
Brilliant and took images cutting them
| | 03:05 | out, putting them on the page,
letting them pop out from behind using bold
| | 03:09 | colors to represent a really bold look and
feel the client might want to move forward.
| | 03:14 | The client was able to take a look at
these three boards and make a decision
| | 03:17 | that they were to move forward
with a certain color palette.
| | 03:21 | We pulled this out from the one that
they selected, which eventually migrated
| | 03:24 | into the final layout look and feel
which in the end has an innovative, fresh,
| | 03:30 | simple, and clean look.
| | 03:31 | We didn't go as bold as the
activist look, nor as sophisticated as the
| | 03:34 | sepia tone version.
| | 03:36 | We were able to keep the
site fresh and CSS oriented.
| | 03:39 | As the site launched, migrate this
look and feel into the rest of their
| | 03:41 | collateral materials, print materials,
case studies, white papers, and more, the
| | 03:46 | client was extremely pleased with this process.
| | 03:48 | In the end, we went through two rounds
of designs with one set of provisions
| | 03:52 | saving our team and the client weeks of
unnecessary time spent spinning around
| | 03:57 | with different looks and feels.
| | 03:59 | Doing brand boards and putting together
a brand spectrum chart are simple tools
| | 04:03 | that you can use to align stakeholders
to make sure that your team has a solid
| | 04:07 | understanding of look and feel
they're going for, and also give your design
| | 04:10 | team something fun to work with and the
client something to see early on in the process.
| | Collapse this transcript |
|
|
6. Understanding Your AudienceThree ways of understanding your audience| 00:00 | So over a decade ago there was a computer
company that didn't really know their audience.
| | 00:05 | They thought their audience were
techies who wanted to configure their
| | 00:07 | computers, add RAM, memory, put
together whatever monitor size they thought
| | 00:11 | was the most appropriate, and
basically build their own computer that fit
| | 00:15 | their individual needs.
| | 00:17 | Now, what they didn't realize was that
their true audience were parents getting
| | 00:21 | their kids off to college, starting up
their own home office, and they had no
| | 00:25 | idea what type of computer
they were really looking for.
| | 00:28 | The user experience consultancy,
Creative Good, came in and at the time
| | 00:33 | reidentified their audience as people
that weren't techie, people that wanted to
| | 00:37 | get a first time computer, and they
encouraged this computer company to package
| | 00:42 | their computers into small,
medium, and large boxes.
| | 00:46 | The large one of course had the most
memory, the larger screen size, and was the
| | 00:49 | most expensive, on down to medium and
small, the one that you would send off
| | 00:53 | with your kid to college for the first time.
| | 00:56 | So because of their reframing of the
audience and getting a little bit more
| | 01:00 | information about what their needs were,
what level of expertise they had, they
| | 01:04 | were able to rebuild and relaunch
their website, targeting their audience
| | 01:08 | correctly, and I believe that the
story goes that the sales went up something
| | 01:12 | like 400% in the first quarter.
| | 01:14 | So why is it important that you
understand who your audience is, understand what
| | 01:19 | their behaviors are, their lifestyle,
preferences, and needs, and even more than
| | 01:23 | usability, do they like your site, are
they using it, how are they using it?
| | 01:28 | Getting to know your audience is one
component of website design that we often
| | 01:33 | miss, because we lack the time and
the methodology to get out and find out
| | 01:37 | what their needs are.
| | 01:39 | So who are you and why are
you coming to the website?
| | 01:42 | Understanding from a demographic
standpoint, that is age, gender, income,
| | 01:47 | what type of computer they are using,
what type of job they have, that's
| | 01:51 | really the first step.
| | 01:53 | Moving into the next level, we take a
look at why are you coming to the site?
| | 01:58 | What are some of what we call psychographics?
| | 02:00 | What is the personality of that person?
| | 02:02 | What values or interest?
| | 02:03 | What kind of attitude does he/she have?
| | 02:05 | By understanding the psychology behind
this person we get a clear picture of why
| | 02:11 | they are coming to the site, what
value it has to offer, and as you redesign
| | 02:15 | what can you do to improve their experience.
| | 02:17 | So now we ask the question, how does
this site fit into your everyday life?
| | 02:22 | And we start thinking of behavioral
aspects of your customer and how the web
| | 02:26 | content that you are creating, the
products or services that you are offering,
| | 02:29 | fit into their actual lives and workflow.
| | 02:31 | We call this contextual inquiry, which
is a fancy name for field research or
| | 02:35 | what we call Deep Hanging Out.
| | 02:37 | This type of research stems from the
field of social research or ethnography
| | 02:42 | and anthropology, but we are not taking
it to that academic level, we are just
| | 02:46 | asking that you shortcut the process and spend
time with your customer in their everyday lives.
| | 02:52 | The important word here is context.
| | 02:54 | We want to take a snapshot
of their work or home life.
| | 02:57 | Whether you spend an hour or two hanging
out and observing, or even several days
| | 03:01 | at a time, this type of research will
allow you and your team to get past the
| | 03:05 | demographics and psychographics and
give you a true snapshot of how your
| | 03:09 | audience really lives.
| | 03:11 | One of our government clients who
served the financial industry had absolutely
| | 03:15 | no idea who is coming to their site
and what they were actually doing online.
| | 03:19 | So we segmented and prioritized the
audience according to the basic demographics
| | 03:23 | that we started with, but then we went
out and talked to the CEOs, CFOs, and
| | 03:28 | compliance officers, along with
lawyers who were the site's main targets.
| | 03:32 | We found out that instead of using
the site daily or weekly, as our client
| | 03:35 | had surmised, that many of these
people were only using the site quarterly to
| | 03:39 | generate mandatory reports, and only
because they had to, not because they wanted to.
| | 03:44 | Additional observation in context
allowed us to see how their workplaces were
| | 03:48 | set up, what their workflow was like,
what kind of bookmarks they had set up and
| | 03:53 | used on a regular basis, and also what
kind of offline materials they utilized.
| | 03:58 | We found out that there were several
alternative ways of getting to some of the
| | 04:01 | content that our client was already
providing, including CD-ROMs and paper
| | 04:05 | formats created by other entities.
| | 04:07 | Our interviews and observations helped
us to determine what changes we could
| | 04:11 | make to make the site more effective for
this audience and to make their lives easier.
| | 04:16 | So getting as much information as
possible about your audience, with the budget
| | 04:20 | and time that you have, is a necessary
part of the redesign workflow process.
| | 04:24 | It helps you to prioritize what should
be done in upcoming redesign and also
| | 04:28 | what can be planned for the future.
| | 04:30 | Move past demographics into
psychographics and finally into contextual inquiry
| | 04:36 | and observation to understand the
behavior and the attitudes of your customer
| | 04:41 | and truly create an effective user experience.
| | 04:44 | Sometimes I ask my designers to
create user personas, and they can be brief
| | 04:48 | and they can be funny.
| | 04:49 | What's great about this is to have the
design team and the client understand who
| | 04:53 | they are actually targeting.
| | 04:55 | So in this case you have Paul Pezalla,
and he owns a store called Wacker Baits.
| | 05:01 | Now, this was for a client where we
were building templates so they could build
| | 05:04 | their own sites, get them up on the fly.
| | 05:06 | And in this case Paul wanted to build
a site specializing in carp fishing.
| | 05:11 | So the ironic truth is that, Paul is
the actual uncle of one of our designers.
| | 05:15 | So he is quite a character.
| | 05:19 | This is actually a true story.
| | 05:21 | He does own a fishing
and bait, and tackle store.
| | 05:24 | So in thinking about Paul, we had
built these very simple, but a little CSS
| | 05:29 | oriented, some fancy things, like
rollover navigation, and we came to the
| | 05:33 | conclusion that Paul wasn't going to
be able to update the site on his own,
| | 05:36 | because the code was just slightly confusing,
and we realized that he could mess it up.
| | 05:41 | So we had to take out the rollovers,
we had to simplify the site and the
| | 05:45 | experience and make updating super
clean, because we were designing for Paul.
| | 05:49 | We were making sure that we as
designers understood what we were doing and why.
| | 05:53 | Even though we wanted to use some
fancy things, we realized that even at the
| | 05:56 | simplest level Paul would not be able to get it.
| | 05:59 | So we had to build
something that he couldn't break.
| | 06:01 | So it was a great exercise
internally for designers, externally for the
| | 06:05 | clients, and we kind of aligned
ourselves into what we were trying to create
| | 06:09 | and who we are creating for.
| | 06:11 | The user persona is really about
thinking like your audience and understanding
| | 06:15 | why they use the Internet,
what they are using the web for.
| | 06:18 | So if you start thinking about it in
that way, you can take a look at some other
| | 06:22 | examples of profiles.
| | 06:23 | Here is one I will click on.
| | 06:25 | This is Paige, and Paige has a dog.
| | 06:28 | One of the differences between a
regular persona, we start looking at
| | 06:32 | demographics, age, job, some stats about
online usage frequency, things like that.
| | 06:37 | But the more you begin to build a
story in a real life scenario, the more you
| | 06:41 | believe that you are
actually defining for that person.
| | 06:44 | Audience Segmentation is another way
to identify who your audience is and all
| | 06:48 | the different reasons why
they may be coming to the site.
| | 06:51 | Some companies we work with have what
they call portals or their meeting the
| | 06:55 | needs of several different types of audiences.
| | 06:56 | So they are not just having one type of person.
| | 06:59 | They are dealing with a multitude of
different personalities, technical levels,
| | 07:03 | interest, and different
ways that people use the site.
| | 07:07 | So an Audience Segmentation chart
takes a look at the demographics and the
| | 07:10 | psychographics that we mentioned, along
with some of the behavioral aspects, and
| | 07:15 | we start to divide our audience into
very understandable and clear concepts or
| | 07:20 | pictures of who these people are
and why they are coming to the site.
| | 07:24 | Now, this does a few things.
| | 07:26 | One, it allows the client and their
company to see all the different people
| | 07:29 | that are coming to the site, and from
a marketing perspective, they can run a
| | 07:32 | campaign or work on specific areas of the
site they want to improve for that individual.
| | 07:37 | From a broader perspective, you may
want to not use just demographics, but
| | 07:41 | you might want to use an entirely different
subset of information to divide your audience.
| | 07:45 | You might want to start with, who has
never been to the site before and they are
| | 07:48 | seeing it for the first time?
| | 07:50 | Who is a frequent visitor?
| | 07:52 | They have a username and login and they
use the site on a daily or weekly basis.
| | 07:56 | Who are people that are coming to the
site only from one piece of the site, a
| | 08:01 | portal or separate login, and
they may never even see the homepage?
| | 08:05 | So thinking about how your audience is
divided up, the different ways people are
| | 08:08 | using the site, allows you to build
user stories in a way that can improve the
| | 08:13 | experience from homepage to subpage
or a specific user path, and you are
| | 08:19 | thinking about that individual and
making sure that every question that he/she
| | 08:23 | has on each page of the site is being answered.
| | 08:25 | One of the other exercises that we
do is create a user grid based on both
| | 08:30 | demographics and psychographics.
| | 08:32 | Now, this is a little bit more
complicated, and you definitely don't have to do
| | 08:36 | this for every single project, but one
of the nice things about this is taking a
| | 08:40 | look at a grid showing characteristics,
percentages, and you may even have some
| | 08:44 | stats from your client.
| | 08:46 | Or if you are internal, you may have
a lot of this information, and you can
| | 08:49 | start thinking, what are the
characteristics of these people?
| | 08:52 | Why are they coming to the site?
| | 08:54 | What pieces of information do we want to have?
| | 08:57 | How are we going to utilize this to
create a better experience for them?
| | 09:02 | Finally, we have a more detailed user persona.
| | 09:05 | This is the type of layout we are
using at our company, gotomedia, right now.
| | 09:08 | We want to identify real people.
| | 09:10 | We want to take a look at some of their
goals, motivations, and tasks, and then
| | 09:15 | outline a very clear, real world
scenarios, so that we understand how they are
| | 09:20 | utilizing the technology in their daily lives.
| | 09:22 | So the one leave behind for this
movie is, get out and meet your audience.
| | 09:27 | Understand where they live,
where they go everyday.
| | 09:30 | Meet with them at a caf?, at
their workplace, and understand how they
| | 09:33 | utilize the technology, content,
service, or product that you are providing
| | 09:38 | in a contextual manner.
| | 09:40 | We call this field research,
sometimes called Deep Hanging Out.
| | 09:43 | You can spend a couple of hours, or
even a full day with this person, taking
| | 09:47 | pictures, listening to stories,
and observing their real lives.
| | 09:51 | It's going to help you be a better designer,
developer project manager, or a company.
| | 09:56 | I really encourage you to understand
your audience and be able to take their
| | 10:00 | experience to the next level.
| | Collapse this transcript |
|
|
7. Usability TestingUsability 101| 00:00 | I've been a fan of usability
testing for years and years.
| | 00:04 | I've been advocating it,
being an evangelist for it.
| | 00:07 | And in this movie we're going to take
you through why usability testing is so
| | 00:11 | important, why you should
incorporate it into your workflow;
| | 00:14 | and although it is part of the core
process, you can expand upon it with any
| | 00:19 | organization, either informally or formally.
| | 00:21 | We're going to take you through this
movie and show you a little bit more detail.
| | 00:26 | So, why usability testing why is it important?
| | 00:29 | This is pretty funny because when I
was a young designer, I started off doing
| | 00:33 | print, making some beautiful
brochures and one of them in particular sealed
| | 00:37 | with a piece of velcro, it had some cards in
it, a piece of vellum, paper made from Japan;
| | 00:42 | and I went around and showed everybody
how it worked, including the printer.
| | 00:46 | It wasn't until I saw the final piece
in the showroom of the car dealership,
| | 00:49 | where people actually
couldn't figure out how to open it.
| | 00:52 | I watched as they turned it upside down,
they finally figured out there was a
| | 00:56 | piece of velcro and once they undid it,
all the contents fell on the floor.
| | 01:00 | I realized at that point that I had been
showing everybody how this thing worked
| | 01:05 | that I had designed, instead of
letting people work it out themselves.
| | 01:09 | If I had understood the value of
usability testing, even back then, it would
| | 01:13 | have saved so much time and trouble.
| | 01:15 | So, what are the
differences between these methods?
| | 01:18 | I believe unlike some usability
purists that you can utilize a number of
| | 01:22 | methodologies in the process of
getting feedback from your customers.
| | 01:25 | I still believe that focus groups can
be valuable although we don't use them
| | 01:29 | very often, because they are giving you
opinions and feedback from outside own organization.
| | 01:34 | Interviews are also helpful!
| | 01:35 | Usability testing is what we're going to
be going over today and if you get into
| | 01:40 | other methods of field research,
ethnography and other kinds of social science,
| | 01:45 | there is so much that you can learn
by continuing to watch and observe, how
| | 01:50 | people use your content, services and
products in their actual lifestyles.
| | 01:53 | But let's go on with a little
bit more on usability testing.
| | 01:57 | So what is usability testing?
| | 01:59 | It's really all about ease of use and
it's a method that has been around far
| | 02:03 | longer than the web.
| | 02:04 | It started in the field of Human
Factors Engineering and really got into
| | 02:08 | products and services like tractors and
toothbrushes and some of the things that
| | 02:12 | people used at the turn of the century.
| | 02:14 | People wanted to determine how easy
it was something to use and how can we
| | 02:19 | streamline the process to make it
better, to continue to iterate and improve
| | 02:24 | that experience for that individual.
| | 02:26 | In relation to the web, it's an
understanding of how someone navigates,
| | 02:30 | finds content and information and
understands how to get from point A to
| | 02:34 | point B on your website.
| | 02:36 | It's really one-on-one watching and learning.
| | 02:39 | So you are taking a look at how
someone is using your website, you're not
| | 02:43 | actually showing them.
| | 02:44 | How many of you have designed a website
and sat with someone down in front of it
| | 02:47 | and asked them what they thought?
| | 02:49 | And they start to point around you
and say no, no, no, don't go there! Oh!
| | 02:52 | No, no, that's not active and you
eventually take the mouse over and show them
| | 02:57 | the cool stuff yourself.
| | 02:58 | That is the antithesis of usability testing.
| | 03:01 | What you want to do is sit back, zip
your mouth shut, put your hands behind your
| | 03:05 | back and watch someone unassisted
as they go through your website.
| | 03:11 | It's very hard and it is
also extremely interesting.
| | 03:15 | What is usability testing and how does
it differ from other methods of research?
| | 03:19 | It's a one or two day process with
at least 4-8 participants per day.
| | 03:23 | You want to take an hour per session
and you have already gone through your
| | 03:27 | site, remember you can't
test everything on your site.
| | 03:30 | You are going to have some
predetermined tasks that you are going to lay out in
| | 03:32 | advance and you have a test facilitator,
hopefully someone that has experience
| | 03:37 | in moderating, understanding how
people are using the site and they're taking
| | 03:41 | notes and sometimes it's videotaped,
but not always, sometimes you have other
| | 03:45 | people that are observing in the room.
| | 03:47 | And what you are going to show is, what's
working and what's not working on the site.
| | 03:52 | There are a couple of advantages to
formal testing and we're going to talk about
| | 03:56 | the differences between formal and
informal testing in a movie that's to follow.
| | 04:00 | We've seen the beauty of usability testing.
| | 04:03 | We've seen engineers have that aha
moment as people navigate through their
| | 04:06 | site and have specific issues with
navigation, labeling or maybe they go
| | 04:10 | through it smoothly.
| | 04:11 | It's a chance for us to see the
outcome of everything that we've been putting
| | 04:15 | together following the core process
step by step and then seeing if our target
| | 04:19 | audience can understand it,
navigate through it and in the end, have an
| | 04:24 | experience that they consider to be
not only likable and not only usable but
| | 04:28 | something that they are going
to integrate into their lives.
| | 04:31 | So, why don't we test?
| | 04:33 | Well, I don't know if any of you have
read that book Stephen Covey's Secrets
| | 04:36 | of Highly Successful People, but one thing
really caught my attention, it's Quadrant II.
| | 04:41 | Quadrant II is everything that's in
the important category that's non-urgent.
| | 04:45 | Most of our days are spent dealing
with emergencies, urgent e-mails, phone
| | 04:49 | calls, everything else and at the end
of the day we go to our couch, sit and
| | 04:54 | watch TV and deal with everything
that's not urgent and not important.
| | 04:58 | That's Quadrant IV here.
| | 05:00 | And what ends up being missed on a
daily basis is Quadrant II, things that are
| | 05:05 | important but because they're not
urgent, they often fall by the wayside.
| | 05:10 | Things like Usability testing and QA
testing usually fall into this category.
| | 05:14 | So, usability testing also has a
number of different aspects to it.
| | 05:19 | Just because you say great, we're
going to engage in a usability test.
| | 05:22 | Internally in your organization, you
might not realize that it also includes
| | 05:27 | things like expert or heuristic analyses,
concept testing, customer interviews,
| | 05:32 | card sorting contextual inquiry, all
kinds of bits and pieces of methods that
| | 05:38 | come out in the usability testing category.
| | 05:40 | So, what I encourage you to do is
take a lot of these methods and pick ones
| | 05:45 | that are going to work for your
organization, understand the value of them,
| | 05:49 | educate your team and develop a
toolkit so that you can get to the end result
| | 05:53 | which is actually test.
| | 05:55 | So, the goal is to develop a toolkit of
usability techniques that you can use in
| | 05:59 | your organization within your own team
and of course, if you need to hire an
| | 06:04 | outside expert to come in and complete
some of the testing, whatever methods you
| | 06:08 | use and whatever type of testing that you do;
| | 06:11 | just remember the goal is to start testing.
| | 06:15 | Informal testing is better than no
testing at all and definitely the results
| | 06:19 | are worth it.
| | Collapse this transcript |
| Usability planning and recruiting| 00:00 | So, we just gave you an overview of
why usability testing is important.
| | 00:03 | Now, let's show you how to do it.
| | 00:05 | It's funny but we recently had a client
that came in from Japan and we said, Why
| | 00:09 | are you testing in the US, you have
clients and products all over the world?
| | 00:13 | And they said, You are the
lowest common denominator.
| | 00:16 | If we can get a product that works
in the US, it will work anywhere.
| | 00:20 | And scarily and sadly, it's a little bit true.
| | 00:23 | In America, we can take
back anything at anytime.
| | 00:27 | We don't read directions.
| | 00:28 | We are the perfect test audience, to
take a look at a new product or service and
| | 00:33 | see if it works from the get go.
| | 00:34 | So, usability testing is more than just usable.
| | 00:40 | I want to make sure that you
understand that we're not just testing if
| | 00:43 | someone can get through point A to
point Z, we want to see if they're
| | 00:47 | emotionally attached to it?
| | 00:48 | Do they think it is useful?
| | 00:50 | Does it meet their needs?
| | 00:51 | Can they integrate it into their life?
| | 00:52 | Are they going to recommend it
to a friend when they're done?
| | 00:55 | Would they go home and use it on their own time?
| | 00:57 | So, just because something is usable,
doesn't mean that it's necessarily meeting
| | 01:02 | your audience's needs.
| | 01:03 | The usability testing
process is fairly straightforward.
| | 01:06 | You want to start with the test plan
at the same time defining your audience
| | 01:09 | and your overall goals and move into
recruiting the participants, getting them set up.
| | 01:13 | At the same time you're going to
be developing either a prototype or
| | 01:16 | understanding clearly what you are
going to be testing, setting up the test
| | 01:20 | plan, the task list etcetera.
| | 01:21 | And we move into the second tier,
which is conducting the testing, analyzing
| | 01:25 | and creating the report and most
importantly, implementing the results into the
| | 01:30 | web redesign process.
| | 01:33 | The first part is about developing a
test plan and I am not going to get into
| | 01:36 | huge amount of detail.
| | 01:37 | You want to have enough information so
that you have a goal, you understand what
| | 01:42 | type of methodology you are using,
whether it's informal or formal.
| | 01:45 | You want to have an overview of the
demographics and/or the psychographics
| | 01:49 | of your test audience.
| | 01:50 | You want to make sure that you have an outline.
| | 01:52 | Not only you have the tasks that you
want to test, which we call a task list,
| | 01:56 | but also what is it that you
are going to be evaluating?
| | 01:58 | How are you can be reporting it?
| | 02:00 | And again, implementing it
into the overall process.
| | 02:03 | The task list is probably one of the
most important things you need to do when
| | 02:06 | you're going through a usability test.
| | 02:08 | Now, you are going to want to figure
out in your site or your product or your
| | 02:13 | application, what are the main problem areas;
| | 02:16 | and make sure that you're focusing on a
subset of your site because you are not
| | 02:19 | going to be able to test your
whole site in this one hour test.
| | 02:23 | It's just the beginning of a
larger initiative, a larger process.
| | 02:26 | Sometimes I have designers that will
come to me as we're working on a prototype,
| | 02:28 | we're going through wire framing.
| | 02:30 | One will say, I want to do it
this way, the other will say, no!
| | 02:32 | I really think we should do it this way.
| | 02:34 | And I say, you know what you guys, go out,
find someone down the hall and test them.
| | 02:39 | And just because they have a general
understanding of how usability testing
| | 02:43 | works, they take that person through a
task and they come back, no questions asked.
| | 02:47 | The testing itself has resolved that question.
| | 02:50 | So, with the task list you are going to
want to make sure that they're not too
| | 02:53 | simple or too difficult and once you
come up with a list, pre-test it with your
| | 02:57 | friends, neighbors before you actually
get into the usability testing itself.
| | 03:01 | Recruiting audience, this is the fun part.
| | 03:04 | It depends on what type of audience you
want to recruit and we get into three tiers.
| | 03:09 | We have our tier 1 which is Joe Shmoe,
anyone that uses amazon.com, people
| | 03:14 | down the street, people that are
really easy to find and you can pay them
| | 03:18 | $50-$75, they love it.
| | 03:20 | Tier two is slightly more difficult to
recruit, people that have specific jobs,
| | 03:25 | maybe some technical savviness.
| | 03:27 | They're a little bit harder to
recruit and they demand more money.
| | 03:30 | You want to pay them $75-$
100 for a usability test.
| | 03:35 | Tier 3, we consider that our very
difficult tier, its doctors, lawyers.
| | 03:38 | People that not only are difficult to
find, but they don't need the money and
| | 03:42 | they probably won't come in for the testing.
| | 03:45 | If you have a tier 3 audience most
likely you are going to have to recruit them
| | 03:48 | separately through friends and family.
| | 03:50 | Go ahead and go to their workplace and
pay them a pretty penny for their time.
| | 03:54 | They will appreciate it in the end.
| | 03:57 | Defining your audience and
understanding who your target is the first part.
| | 04:01 | These are some general personas that
outline a narrative of who these people
| | 04:04 | are, what type of jobs they have, what type
of goals they have when they come to your site.
| | 04:08 | Getting into a little bit more of a
specific demographic, we actually conduct
| | 04:12 | online user surveys either through
friends and family, through newspaper ads or
| | 04:16 | online services such as Craigslist.
| | 04:19 | Sometimes your organization or your
client may have an existing list of e-mail
| | 04:22 | addresses that they can use
that are their target audience.
| | 04:26 | You want to be careful that you're not spamming.
| | 04:28 | You want to gather as
much information as possible.
| | 04:30 | We usually start off with a general e-mail
or posting that says, user testing,
| | 04:35 | we may even see Focus groups because
people don't generally understand what
| | 04:38 | usability testing is, even
in the mainstream public.
| | 04:41 | And we offer $75-$100 for an hour of their time.
| | 04:44 | We direct them to link and ask them to
fill out this information online using
| | 04:49 | either a custom-made survey or
something like survey monkey.
| | 04:53 | We then gather this data and
import it into an Excel spreadsheet.
| | 04:57 | We take a look at the range of
criteria that we have outlined and recruit the
| | 05:01 | right people, because we now have
the information that we're looking for.
| | 05:04 | We follow up with an e-mail that says, hey!
| | 05:06 | We would love to have you in,
here is the contact information.
| | 05:09 | We make sure to follow up with a phone
call and the secret here is to follow up
| | 05:14 | right before the actual test, 24
hours in advance, just like your doctor's
| | 05:18 | office does, and call them and remind them.
| | 05:20 | Not only do they have to be there
on time, but we are expecting them.
| | 05:24 | Some people think it's a focus group
and they think, if I don't make, there is
| | 05:26 | going to be 8 or 10 other people there.
| | 05:28 | You want to make sure that they
know that you're counting on them.
| | Collapse this transcript |
| Conducting a usability test| 00:00 | So getting into the testing itself,
this is the fun part, this is where you sit
| | 00:04 | down with your audience and you are
either in their workplace, grab the FedEx
| | 00:08 | guy as he comes in the door,
you maybe in a formal environment.
| | 00:12 | Whatever it is, you are actually sitting
down with someone and figuring out, how
| | 00:15 | they go about using the site.
| | 00:17 | What's interesting about this is we
don't start off with tasks, we actually
| | 00:21 | sit people down first, we give them a
pretest survey to fill out, we warm them
| | 00:26 | up, interview them for about 5-10 minutes,
then we actually get into the testing process.
| | 00:31 | So, during this orientation, you
want to remember these few things.
| | 00:37 | Once again, I'm not saying that just
anyone can start doing usability testing,
| | 00:41 | you want to hire experts whenever
possible, because not only are they
| | 00:45 | well-versed and trained in this type
of behavior, but they also know how to
| | 00:48 | analyze the results.
| | 00:49 | But my goal here is to get you and
your team into the mode of being able
| | 00:54 | to conduct usability testing on the
fly on your own, informally, and also
| | 00:58 | understand how formal testing works and how
you can incorporate into your overall process.
| | 01:02 | So first of all, with the script, you want to
make sure to greet them, give them an overview.
| | 01:07 | The most important thing is here
that you want to encourage them to think
| | 01:10 | aloud during the process.
| | 01:11 | For instance, if they're clicking around
and they say, I wonder if that's a link.
| | 01:15 | I guess, I'll try it out, oh!
| | 01:16 | That's not what I expected.
| | 01:18 | You actually want to record that behavior,
take notes, and understand what their
| | 01:22 | thought process is all along the way.
| | 01:24 | You want to let them know that they are
not being tested, the site is being tested.
| | 01:28 | They shouldn't be concerned with the results.
| | 01:30 | And also that you're going to
be sitting there taking notes.
| | 01:32 | But you're not going to be able
to answer or give them any kind of
| | 01:35 | feedback during the process.
| | 01:37 | If it's true or if you want to
fabricate slightly, you can say, Hey!
| | 01:41 | I had nothing to do with this website
or this application, feel free to say,
| | 01:46 | whatever you want without
feeling like you're going to offend me.
| | 01:49 | And afterwards, let them know
that you're going to debrief them.
| | 01:52 | Do a short summary of the test itself,
and then you're going to ask them to fill
| | 01:56 | out a post-test survey
before you actually pay them.
| | 01:59 | So to summarize, introduce yourself,
let them know that you're going to be
| | 02:02 | silent, let them know they're not being tested.
| | 02:05 | Make sure they think aloud.
| | 02:07 | Most of all keep the session relaxed.
| | 02:09 | This is what you shouldn't do.
| | 02:11 | In some formal processes, people put a
list down in front of a participant and
| | 02:15 | actually step out of the room and
do this voice of God sort of thing.
| | 02:19 | I actually feel that it's a little
bit impersonal, it's a little bit scary.
| | 02:24 | So what I like to do is introduce
that participant to the test, and say,
| | 02:29 | here's the first task.
| | 02:30 | If you outline ten tasks in one hour,
they're going to start thinking, it's
| | 02:33 | going to take me six minutes to
complete each task, and you're going to throw
| | 02:36 | them off all along the way if the
first test takes longer than that.
| | 02:39 | Make sure you don't say, this is so
easy, even a 6-year-old could do it.
| | 02:43 | Because, there's some pretty savvy 6-year-olds
out there, and you don't want to
| | 02:46 | set them up for a failure, in case
they aren't able to get through it.
| | 02:51 | We did have a test one time in
Austin, where one of the participants
| | 02:55 | actually broke down to the point of tears,
because they weren't able to complete the task.
| | 03:00 | At that point, you rescue them.
| | 03:02 | Here I'm saying, don't rescue them
until they are really struggling.
| | 03:06 | If they're at the point of tears, you
can stop them and say, you know what, we
| | 03:09 | certainly have some work to do
on our product. So let's move on.
| | 03:13 | And the biggest thing is,
don't answer questions.
| | 03:15 | You want to respond impartially and keep that
person motivated to continue in the task flow.
| | 03:21 | So during this process,
you're collecting basic data.
| | 03:24 | You're trying to find out, could they
complete the task? Do they need help?
| | 03:27 | What are some stumbling blocks and obstacles?
| | 03:29 | Sometimes you might want to have a
printout of some of the key pages that you
| | 03:32 | can take notes directly on it.
| | 03:33 | Other times, you have a second person
in the room that's helping you type and
| | 03:37 | take notes during the process.
| | 03:39 | Either way, you're getting
your overall observations.
| | 03:42 | You're finding out where
the stumbling blocks are.
| | 03:44 | You're mentally taking note, even
figuring out timestamp wise, when something
| | 03:49 | happened during the process, of what
you may already know that you need to
| | 03:52 | change on that website to
make it a better experience.
| | 03:55 | Let's take a look at a sample data chart.
| | 03:57 | So this is an example of some notes
that we took informally in our own office.
| | 04:01 | I asked one of my coworkers to
order lunch from this one website.
| | 04:05 | And she started at 11:30, begin task,
important that you actually timestamp it as you begin.
| | 04:10 | So we moderate her as she's going
through the site, and take a look at what
| | 04:15 | types of things she's clicking on,
what types of things she's saying.
| | 04:18 | She returns to the homepage after her
first attempt, it doesn't really work.
| | 04:22 | She's trying to figure out, how to know
her options, what restaurants are open?
| | 04:26 | She is extremely confused.
| | 04:28 | Finally, somewhere down here she's
ordering California Rolls, searching for drinks.
| | 04:33 | She gives up, can't order drinks, and
here, cannot submit order, painful, agony.
| | 04:39 | She can't order drinks.
| | 04:40 | She starts to swear.
| | 04:42 | She has this order that comes
back and the minimum is not clear.
| | 04:46 | She goes back, her credit
card information is gone.
| | 04:49 | Time 12:12, it's been 40 minutes so far.
| | 04:52 | We're just trying to order food, remember.
| | 04:54 | So she goes through, has to
reenter her credit card information.
| | 04:57 | She says, I don't want to become
a regular, do I have to do that?
| | 05:00 | At one point, I think, I gave her a
banana, let's see where that is, oh,
| | 05:04 | receives banana from office mate,
just as fainting from hunger.
| | 05:07 | Now obviously, this is a
very, very informal test.
| | 05:10 | But the point is so relevant that it
took more than an hour to order lunch for
| | 05:17 | three people to be delivered to the office.
| | 05:19 | Now, not only did it take over an hour
to do that, but the food didn't arrive
| | 05:24 | until an hour after that, and two-and-a-half
hours later, they didn't even have
| | 05:28 | the credit card information, we
actually had to reenter and give them all that
| | 05:32 | information at the end.
| | 05:33 | So we weren't just doing a
usability test, we were testing the entire
| | 05:37 | customer experience.
| | 05:38 | It failed miserably.
| | 05:40 | We sent this back to our client, and
he started to hit his head against the
| | 05:45 | table, literally, because the
experience of the site was so difficult.
| | 05:50 | He knew that, most likely, it
was going to crash, and it did.
| | 05:54 | So now you've collected some simple
data, watching someone as they go through
| | 05:59 | the site, completing tasks,
having difficulty stumbling blocks.
| | 06:03 | One of the key questions that we
asked at this time is, was there any point
| | 06:07 | where you would have quit out of this
experience if I wasn't sitting here?
| | 06:10 | How much time do you think you
would have taken to finish that task?
| | 06:14 | Would you recommend it to a friend?
| | 06:16 | These things are very telling.
| | 06:17 | We sit them down at the end, and we
let them complete a post-session survey:
| | 06:22 | are you able to complete the task as
requested, are you able to navigate through
| | 06:26 | site, what is the overall look and feel,
what's the relevance, things like that.
| | 06:30 | And we find that when we give people a
piece of paper like this to fill out, or
| | 06:33 | they're filling out an online form,
they are a little more real with their
| | 06:37 | answers, because they still might feel
that they need to please you and tell you
| | 06:41 | that what you've created is actually
good, when, in fact, they feel that it was
| | 06:45 | difficult, a very challenging experience.
| | 06:47 | So now you've completed the testing process.
| | 06:50 | In one or two days, you've
tested at least 5 to 8 people.
| | 06:54 | We've gotten a lot of data.
| | 06:56 | We start to see what patterns exist.
| | 06:58 | We've gotten pretest
surveys, post-session surveys.
| | 07:01 | And we have an understanding of how
someone would use this site in their daily
| | 07:05 | lives, whether they think
it's interesting and important.
| | 07:07 | We move into the next phase,
which is, analyzing the results.
| | Collapse this transcript |
| Analysis and implementation| 00:00 | So now you're done with your
testing process, what do you do next?
| | 00:04 | One of the things that we've realized is
as we've incorporated usability testing
| | 00:07 | into our processes and our client's
workflow is that, we get into rapid
| | 00:13 | usability tests one day turns sometimes
just testing a part of a site and then
| | 00:19 | implementing the results that week.
| | 00:20 | This is an example of WebEx,
right before it launched in 2005.
| | 00:25 | What happened was, we were concerned
with some of the naming and labeling.
| | 00:28 | We were just about to launch the site, we
had spent about four months working on it.
| | 00:32 | We had some questions.
| | 00:33 | So what we did was we set up a rapid
test in San Fransisco and Boston, got five
| | 00:39 | people in each city and in one day, boom!
| | 00:41 | We got through the testing process and
we realized that we needed to change a
| | 00:45 | few things, super easy to change
because it was a CMS driven site.
| | 00:48 | And by the time, the site launched that
following week, we had already started
| | 00:53 | to work out some of the major
usability issues because we did a rapid test
| | 00:57 | during that process.
| | 00:58 | So while it's really great to create a
formal report, we encourage you to get
| | 01:04 | the results out, take your raw notes,
make sure that if your development team is
| | 01:07 | present or your client is present,
that you spent some time at the end of the
| | 01:10 | day, downloading what you've seen, take
the high level notes, create a summary.
| | 01:15 | What you are trying to get out of here is
something that you can implement, not a book.
| | 01:20 | So a final report might contain
some of the following elements.
| | 01:23 | Executive Summary overview.
| | 01:25 | This is that brief overview that you
sat down at the end of the day and said,
| | 01:29 | these are the five things that
we should change immediately.
| | 01:32 | You want to restate what your
Methodology was just so that they know how you
| | 01:35 | obtained the data, making
sure that it's relevant.
| | 01:38 | You want to put the Results of this survey;
| | 01:40 | sometimes very interesting.
| | 01:41 | Things that people say on paper,
they won't say to your face.
| | 01:44 | And we get into Findings & Recommendations.
| | 01:46 | This is can be as simple as printing
out a page of your website and scribbling
| | 01:50 | notes on it, turning it into your team
or your boss or it can be as formal and
| | 01:54 | fancy as taking screen shots,
laying them into InDesign;
| | 01:58 | making sure that you have arrows
pointing all the different areas that you
| | 02:00 | want to fix on the site.
| | 02:02 | So in addition to the raw notes, if
you did video tape or conduct any kind of
| | 02:06 | screen capture, you want to include
that so that people who didn't attend the
| | 02:09 | test have a chance to see first hand what
that person did as they went through the site.
| | 02:15 | Implementing results also means that you
have incorporated some iterative cycles
| | 02:20 | of usability testing all along the way.
| | 02:21 | This is a visual showing that in
October, November, December, January, each
| | 02:26 | month we are going to conduct
some kind of usability test.
| | 02:29 | There was a company we worked with the
few years ago, and one of things we did
| | 02:32 | was set up monthly test, we pre-booked
the room, we pre-screened participants
| | 02:37 | according to the criteria
that we are trying to get.
| | 02:39 | And we set everything up in advance and
all we need to do was come in with the
| | 02:43 | task list, because we had
everything else ready to go.
| | 02:47 | The beauty of that was that the ramp
up time was at zero and all you needed
| | 02:50 | to do was show up in the conference
room, on that Friday of each month, and
| | 02:55 | any questions that came up in your
work environment during that month could
| | 02:58 | be put into the task list.
| | 03:01 | The pre-test questions, the post-test
questions with the interview, and you
| | 03:04 | can have a chance to see first hand what
your customers say instead of your team members.
| | 03:09 | I encourage you to at least
incorporate, quarterly testing cycles into your
| | 03:13 | development process.
| | 03:14 | It's important that you work out why
usability testing is important in your
| | 03:18 | organization, but more than
that actually start doing it.
| | 03:23 | Sometimes you just want quick
insights so you don't have to go through the
| | 03:26 | entire informal or formal process.
| | 03:28 | You can go to a cafe or in this case a
restaurant and ask if people want free
| | 03:33 | beer or a free cup coffee for five
minutes of their time, and you are just
| | 03:37 | trying to get some quick insights.
| | 03:39 | Or you can pay them a little bit of
money if you have half an hours worth
| | 03:42 | of testing.
| | Collapse this transcript |
|
|
8. Information DesignInformation design intensive| 00:00 | When you get into the structuring
phase of the Core Process, one of the more
| | 00:03 | time intensive and sometimes fraught
with difficulty in decision making is this
| | 00:08 | Information Design phase.
| | 00:10 | So information design is
taking a look at the content from a
| | 00:13 | non-design-oriented manner.
| | 00:15 | One of the tricky things about this,
is that people don't like to look at
| | 00:19 | wireframes or site maps or information flows.
| | 00:22 | They are extremely boring, they are
detailed and people want to look at the
| | 00:25 | pretty stuff and they want
to get to the design phase.
| | 00:27 | So how do we move forward and through
this information design process in the
| | 00:32 | most effective, efficient
and streamlined way possible?
| | 00:35 | So we came up with this idea called the
Information Design Intensive and it was
| | 00:39 | inspired from my going way to a yoga
intensive where I learned how to do various
| | 00:44 | poses and Ashtanga yoga in a very
condensed but yet intensive time frame.
| | 00:49 | So we thought, let's see if we can
make this process a little bit easier.
| | 00:53 | We start off by telling the client,
they need to be as prepared as possible.
| | 00:56 | Now this process is great at the
beginning, when we want to brainstorm and make
| | 01:00 | sure all the decision makers are in
the room so that we can all agree or
| | 01:03 | disagree with various technical
implementations of marketing goals.
| | 01:06 | It also works great if you are at the
detailed stage and you need to make some
| | 01:10 | key decisions again;
| | 01:11 | making sure your technical resources, your
marketing team, your stakeholders are all present.
| | 01:16 | So the way you make this a success by
having the right people in the room that
| | 01:19 | are prepared to go through several
intense 3-4 hours meetings during a one to
| | 01:24 | two week time frame.
| | 01:26 | Decisions will need to be made.
| | 01:27 | Some long working sessions will be necessary.
| | 01:29 | But by corralling all key decision
makers, you can shortcut the time frame
| | 01:34 | for the information architecture and the
functional specifications phase by a healthy duration.
| | 01:39 | Now first of all, scheduling this and
letting your client or team know upfront
| | 01:43 | that there is going to be a few days
where you are going to all need to meet in
| | 01:46 | the same room, work very hard, bring lunch in.
| | 01:49 | It's going to be one of
those kinds of working sessions.
| | 01:51 | And yeah, you may want to
take a break in the afternoon.
| | 01:53 | So the format is, pick a Tuesday,
usually not a Monday, but pickup Tuesday so
| | 01:57 | you have enough time to prepare the
materials and get everyone on the same
| | 02:00 | page before you start.
| | 02:01 | Call a meeting, start it at 9 o'clock
sharp, run it until noon and the goal at
| | 02:06 | this stage is to go through
your ultimate user experience.
| | 02:09 | If you are working through a path-flow
of your website that has any technical
| | 02:12 | ramifications, again, you want to think
about your experience from the highest
| | 02:16 | level and make sure that you are
thinking, what is that best case scenario we
| | 02:19 | can come up with from beginning to end?
| | 02:21 | The goal is as you go through the
process to brainstorm, draw things up on a
| | 02:24 | white board and document using photos to
think about, okay, for an individual or
| | 02:29 | small business, what are we going to try and do?
| | 02:31 | For a corporation, what
are we going to try and do?
| | 02:33 | Who is our target audience, what are our goals?
| | 02:36 | What are the main points that
we are trying to communicate?
| | 02:39 | You may want to go into a little bit
more detail, card sorting is one exercise
| | 02:42 | that's great either for outside
customers or internally you can take a look
| | 02:46 | your own content and flow and start to
ask how would they organize it and what
| | 02:50 | makes sense to them.
| | 02:51 | Another thing that's fun, is to take
everything into sticky mode and start to
| | 02:55 | outline the side architecture and some
of the bigger picture pieces of content,
| | 02:58 | using stickies and labels and pasting.
| | 03:01 | It's great to get outside your computer,
because so often when we are making
| | 03:04 | wire frames, or dealing with site maps,
we end up trying to figure out how to
| | 03:08 | align something perfectly or how to
make sure that that line weight is matching
| | 03:12 | up with the rest of the site;
| | 03:14 | instead of thinking about what we
need to be concentrating on, which is the
| | 03:17 | actual content, the
architecture, the flow and structure.
| | 03:20 | So we start off by getting people in the
same room, letting them make decisions,
| | 03:25 | white boarding it and taking pictures.
| | 03:28 | Besides working on the white board, you might
want to work on the paper. Have fun with it.
| | 03:31 | Cut out color images, print out
stuff, use stickies, color markers.
| | 03:36 | Work together as a group, and put
together information in a way that makes sense
| | 03:39 | and in this case this is
organized by audience, and priority.
| | 03:42 | The first audience is the pink, number one,
80% of the people are going to come here.
| | 03:46 | Number two, the green, 15% of
the people are going to come here.
| | 03:50 | So think about different ways
to organize the information.
| | 03:52 | And again, have fun with it.
| | 03:53 | This is a time where you are actually
going to get all the stakeholders in the
| | 03:56 | room to figure out what you are doing next.
| | 03:59 | Make sure to document things
with a digital camera and post it.
| | 04:01 | You may forget to post some of these
things but it's great to have a record of
| | 04:05 | the thinking process all in one area.
| | 04:09 | In the end, you come up with the
spreadsheet that actually goes into, in this
| | 04:12 | case, requirements, functional areas
and weighs customer need, business need,
| | 04:17 | and technical feasibility.
| | 04:19 | The ones that score the highest or the areas
that you are going to want to focus on first.
| | 04:22 | Taking a look at that combined score,
again, making sure that your customer need
| | 04:26 | is weighing very high in the whole picture.
| | 04:28 | Finally, we get into documentation.
| | 04:30 | Now, in this case I am using a Mac
Only application called OmniGraffle, which
| | 04:35 | is a lot like Visio.
| | 04:36 | If you are a Mac Only Shop, you
should definitely download it and try it.
| | 04:40 | And one of the other benefits is it
opens easily in Visio once you hand it over
| | 04:43 | to your PC based development team.
| | 04:46 | The great thing about OmniGraffle is
that it executes PDF in one flow and you
| | 04:49 | can click through all your pages.
| | 04:50 | And it also translates
seamlessly into Visio documents.
| | 04:53 | And I documented it on the fly,
taking a look at these different areas of
| | 04:58 | assumptions and then putting it down.
| | 05:00 | And in the end, handing this off to our
information designer and allowing them
| | 05:04 | to put together either the necessary
wire frames or certain path flows that we
| | 05:08 | can then hand off to the
team for implementation.
| | 05:10 | The goal here is to again, think about
your ultimate user experience, not taking
| | 05:15 | anything else into consideration and
then taking it to that other level or
| | 05:19 | understanding the business needs
and then weighing in the technical
| | 05:22 | ramifications or feasibility.
| | 05:24 | What you end up with is a
series of white board sketches.
| | 05:27 | In Information Design Intensive, in
this case we have the notes outlined in
| | 05:31 | PDF format that were just exports of the
OmniGraffle documents I was making during the day.
| | 05:36 | In the end, make sure that you document
everything in your staging area, posting
| | 05:39 | all your white board screen shots and
notes that you take during the meeting.
| | 05:43 | You are going to use this information
to inform the rest of the information
| | 05:46 | design process and the goal is to
get as much information out of the
| | 05:50 | stakeholder, out of the development team,
out of the marketing team as possible,
| | 05:54 | so that you have what you need in
order to make the final decisions and move
| | 05:58 | forward without going through
rounds and rounds and rounds of very time
| | 06:01 | consuming wire frames and site maps.
| | 06:03 | So if you do your job right, you
consolidate the information at the beginning.
| | 06:07 | You start the meeting on a Tuesday;
| | 06:09 | make sure that you go at least 3 or 4
hours if you can keep key people for that
| | 06:12 | afternoon you can finish
up some stuff that's great.
| | 06:15 | Give yourself a couple of days
with your team to go through the
| | 06:17 | information design process.
| | 06:19 | Come up with the second round and then
meet again on a Thursday or a Friday to
| | 06:23 | finalize some key pieces of
information you might be missing, or to make
| | 06:26 | decisions if you've come up with two or
three different variations on one idea.
| | 06:30 | If you do your job right, you are able
to skip through what could be three to
| | 06:33 | four or even six weeks of this process and
you can condense it into one to two weeks.
| | 06:38 | And you can think about how great it's
going to be to get through that process
| | 06:41 | in the seamless manner as well
as save some time and budget.
| | Collapse this transcript |
|
|
9. Managing ContentIdentifying the role of content development| 00:00 | So for those of you, who have
gotten your content on time and launched
| | 00:04 | your site, no problem.
| | 00:06 | This little movie is not for you but
for the rest of us, the 99% of people,
| | 00:10 | who are constantly fighting this
battle of getting content on time, this is
| | 00:15 | just to look at how we can start
dealing with this problem, understanding that
| | 00:19 | we need to find a resource for this
role, and what type of person we are
| | 00:22 | actually looking for.
| | 00:24 | So, this came about because I realized
that time and time again, our clients
| | 00:28 | realized that they needed someone to
fill this role of the Content Manager, but
| | 00:31 | in the end they didn't have a clear
idea of what the role was or what type of
| | 00:36 | qualifications that this person should have.
| | 00:38 | So in this chapter, we are going to
break down this content into two parts.
| | 00:43 | The first is defining the role of a
Content Manager and the second part is how
| | 00:47 | this role fits into the overall process.
| | 00:50 | So, first let's take a look at this
article which is published in the Goto
| | 00:53 | Report at the URL that we can
see on the screen right now.
| | 00:57 | So thinking about Content
Management, whose job is it.
| | 01:00 | We want to first define the role.
| | 01:02 | So thinking about who this person is,
it's not just saying, oh, hi, we actually
| | 01:07 | want to get a Content Manager in place.
| | 01:09 | Clients often think, okay, they are
going to magically produce the content using
| | 01:15 | this pile of materials and these
brochures that they already have.
| | 01:18 | You can even ask them, well, do you
have that in digital format and they say,
| | 01:21 | "Oh no, these are from years ago."
| | 01:23 | So what are we supposed to do, type it all in?
| | 01:25 | So then, next they think, okay, we have a
copywriter, someone that's written all of
| | 01:29 | our white papers and our marketing
materials, and they can work on the website.
| | 01:34 | Well, usually this person has no
understanding of how the web works.
| | 01:37 | They don't understand how do
utilize online linking or to present the
| | 01:41 | information in short concise
paragraphs, bullet pointing, and calling out
| | 01:45 | actions on every page.
| | 01:46 | So the third scenario and I'm sure
there's many more is that the client
| | 01:51 | expects you as this Guru in the web world to
understand what it takes and to play that role.
| | 01:58 | It is really difficult to
find the right resource.
| | 02:01 | I have put together a list of what I
feel are some of the things that are
| | 02:04 | necessary to bring this person.
| | 02:05 | Now these are some of the
characteristics I feel are important.
| | 02:09 | If you can get four or five of
these, you are doing very well.
| | 02:12 | The first characteristic is that
that person is self running and smart.
| | 02:17 | You want to make sure that this person
understands it what their role is and
| | 02:20 | what you're expecting from them,
especially with the outline for the site map,
| | 02:24 | the content for the wireframes of the pages
and the final content as the site's going live.
| | 02:30 | You want to make sure that this person
is organized and that they have some kind
| | 02:33 | of writing or editing background.
| | 02:35 | This person should be web-savvy, not
necessarily understanding how to build
| | 02:39 | out a site on their own, but they
should know a little bit about markup and be
| | 02:42 | able to deliver their copy in HTML, calling out
their own links and bolding copy as necessary.
| | 02:49 | It would be great if this person
understood information design, and how their
| | 02:52 | content is going to fit in seamlessly
with the structure phase you go through
| | 02:56 | again, site mapping and the wireframing.
| | 02:58 | And knowing the client's industry is
preferred but definitely not required.
| | 03:03 | It's far more important that this
person understand not only the technical but
| | 03:07 | the user experience that they are
trying to create with a copy and have an
| | 03:10 | understanding that writing on the web is
more friendly, a little more casual and
| | 03:16 | definitely needs to be action-oriented.
| | 03:17 | So, now that you have this list, you
can see some of the characteristics or
| | 03:22 | traits of that person that you should
or could bring into this project flow.
| | 03:26 | It's very important that this role of
Content Management be filled in some capacity.
| | 03:32 | If it's your role as the developer then
understand that you need to charge for this time.
| | 03:37 | If the client says, "Oh you know what,
I am going to write the copy", make sure
| | 03:41 | they understand, the time involved
and each deadline that they have because
| | 03:45 | they may think that they have right until the
project goes live to give you that final copy.
| | 03:50 | So, this is the list of characteristics.
| | 03:53 | Again, things that you should be looking
for when bringing in this right person.
| | 03:56 | And if you have a client that's
providing the copy, make sure that they
| | 03:58 | understand what your expectations are
during this process and that they're
| | 04:02 | a team member in this case and not
the client, as they provide you rounds
| | 04:06 | and rounds of copy.
| | 04:08 | If the client expects you to do
this work or asks you to educate their
| | 04:12 | copywriter on their team into all these
areas, make sure that you charge for that time.
| | 04:16 | So now that you understand who this magic
person is and why you need to get them on-board.
| | 04:21 | Now in Part II, let's take a
look at the overall process and how
| | 04:24 | Content Management fits in.
| | Collapse this transcript |
| Content development: Workflow overview| 00:00 | So, now we are at part II of the process.
| | 00:03 | Now, I am not going to go over
this in a huge amount of detail.
| | 00:06 | I encourage you to go ahead and copy the
URL above and take a look at the full article.
| | 00:10 | What I hope to accomplish here is give
you an understanding of the phases of
| | 00:14 | development that the Content Manager
needs to go through and how it merges with
| | 00:18 | through your website redesign workflow,
the core process, as we have outlined
| | 00:21 | in the earlier movies.
| | 00:23 | So let's take a look at what that workflow
is and how you integrate the two together.
| | 00:27 | So the first part is discovery and definition.
| | 00:30 | It's gathering as much information
again as necessary for that person to wrap
| | 00:34 | their head around the project,
understand the tone and the voice and in this
| | 00:38 | case the audience, what type of
information are they looking for.
| | 00:42 | What are the key calls to action?
| | 00:44 | How is the audience when reading the site
supposed to proceed, who is speaking to them?
| | 00:49 | What their voice sounds like?
| | 00:50 | What is it they are being told?
| | 00:52 | So phase 1 is about gathering
as much information as possible.
| | 00:56 | The one difference between the
workflows here is that the content developer
| | 01:00 | needs to understand what is the
voice of the company and how is that
| | 01:03 | represented on these pages?
| | 01:05 | What calls to action are you asking
your customers to take and how friendly or
| | 01:10 | how technical, how detailed or
how light should the content be?
| | 01:15 | Moving into phase 2 is establishing framework.
| | 01:18 | Again, from a site architecture
standpoint, you're making your blueprint and
| | 01:21 | setting everything down.
| | 01:23 | From a content perspective, you're
putting together that regular Roman
| | 01:26 | numeral outline of what are all the areas of
this site that you are going to be going through.
| | 01:31 | Now sometimes a Content Manager needs
to sit down first and take a look at the
| | 01:35 | homepage of the site or the portal into
the site that they are working on, and
| | 01:39 | understand from a customer's point of view,
what are all the areas that they are interested in.
| | 01:43 | How can I flash out this experience?
| | 01:45 | So whoever is putting the content
together, they can either be a straight linear
| | 01:49 | fashion using existing site structure
or they may want to think about it in a
| | 01:53 | slightly more fluid manner.
| | 01:54 | What is it that you are trying to tell
someone and how can we make that path as
| | 01:57 | easy as possible through
different areas of the site?
| | 02:01 | We might want to at this point perform
a content audit on your outgoing site
| | 02:04 | to see what works and what doesn't work,
what content is existing that you want to keep.
| | 02:08 | Look at all the marketing materials
and see if there's some really good
| | 02:12 | brochures that you might want to translate
headlines or little bits and pieces of copy.
| | 02:17 | You also want to call and get rid
all of the pages that are extraneous in
| | 02:21 | information, too much content and
copy -- remember people don't read.
| | 02:26 | And rather than going into a completely
new title on how to write for the web,
| | 02:31 | just remember how you
like to go through websites.
| | 02:33 | When you see too many links or when
there is not clear call to action and how
| | 02:37 | frustrating that is.
| | 02:38 | So think about this experience from a
content standpoint, I think you are going
| | 02:42 | to be in pretty good shape.
| | 02:44 | Phase 3 is writing a copy deck.
| | 02:46 | Now remember that content isn't just copy.
| | 02:49 | Sometimes we will sit down with
clients and say, "Okay, well how are you
| | 02:52 | visualizing this page?"
| | 02:54 | And they have a pretty clear
idea, they want a short paragraph.
| | 02:56 | I ask them how short, they say three lines.
| | 02:59 | I say, well what's next?
| | 03:00 | And they say, well, we need to show an
animation and I go, oh, an animation, all
| | 03:03 | of a sudden there's something
else to illustrate and animate.
| | 03:06 | And slightly creeping up again on
that scope there, I say what else?
| | 03:09 | And they say, well you want to allow
them to call customer service and make sure
| | 03:13 | that there is a call to action on every page.
| | 03:16 | Okay so, in talking through how the
page should feel, how someone is going to
| | 03:21 | interact with that page, you have
already identified that you need a short
| | 03:24 | paragraph, you need an animation that's
going to be part of the content process
| | 03:28 | and you have some calls to action
including calling your customer service.
| | 03:32 | So at some point the Content Manager
needs to walk through that experience, not
| | 03:37 | on every single page of this site,
but on enough key pages that you can
| | 03:40 | understand from an architectural
standpoint, how you should design these pages
| | 03:44 | and what type of content it needs to carry.
| | 03:48 | So phase 4, is publishing and posting
and reviewing and editing the content.
| | 03:51 | At this point most of the
copy is finished of course.
| | 03:54 | It's going to be poured into the last minute.
| | 03:57 | Some content writers that are web-savvy
like to have a dummy site that they can
| | 04:01 | pour the content and read it and flow
through it even clicking through different
| | 04:04 | browsers to see how it appears.
| | 04:07 | So, the Copy Deck is
going to contain a few things.
| | 04:09 | If your Content Manager is working in
a dummy version of the site, filling in
| | 04:14 | copy, testing it, making sure it's fluid
along the way, if they are web savvy or
| | 04:19 | you have what's called a Copy Deck,
make sure that you have an agreed-upon
| | 04:23 | deliverable such as a certain way that
the text is formatted or tagged at the
| | 04:27 | beginning and ends, so that you
can track and manage version control.
| | 04:30 | Remember that not all content is text.
| | 04:32 | You want to create a list of things
like media such as photos, sound and video
| | 04:37 | and also remember that you might have
illustrations or icons or Flash tours that
| | 04:41 | need to be scheduled.
| | 04:42 | For the coding team, you want to know
when the title tags are due for key pages
| | 04:45 | of the site, along with keywords and
metadata which helps in the quest for
| | 04:49 | accessibility compliance.
| | 04:51 | In the end, you also want to check for
short, readable copy and links and make
| | 04:55 | sure that there is a system in
place for publishing and version control
| | 04:59 | because the last thing you want to do
is overwrite your copy, once you have
| | 05:01 | spent so much time on it.
| | 05:03 | There is a lot to think about, which is
why you need someone to manage this process.
| | 05:08 | So just to summarize, we talked a
little bit about invisible copy, you want to
| | 05:12 | think about Search Engine
Optimization to make sure that at least the title
| | 05:16 | tag is as descriptive as possible,
utilizing as many keywords as is relevant
| | 05:22 | in the title tag itself.
| | 05:24 | This is going to help from search
engine perspectives and it's going to help
| | 05:26 | people identify where they are in your site.
| | 05:29 | So while I'm not going into the ins
and outs of search engine optimization,
| | 05:34 | you can find out more information about
SEO strategy in the lynda.com online library.
| | 05:39 | Someone needs to hire a Content
Manager and work closely with him that that
| | 05:43 | person isn't necessarily
part of a web development team.
| | 05:46 | They should work alongside
that team in a parallel process.
| | 05:49 | And that this person that they bring
on board need to understand the web
| | 05:53 | redesign process but work on the
marketing side or work directly with that
| | 05:57 | client or the internal stakeholders
because that's where the information is
| | 06:01 | coming from and that's where
they need to be on a daily basis.
| | 06:04 | And to be honest Content Managers and
good copywriters charge so much that they
| | 06:09 | should be working directly
with that client or stakeholder.
| | Collapse this transcript |
|
|
ConclusionConclusion| 00:00 | Thank you so much for watching.
| | 00:03 | I do hope that you can take some of the
things you've learned and incorporate it
| | 00:06 | into your workflow process today.
| | 00:08 | And if you find some things that you
find valuable that you want to share with
| | 00:11 | your team or your client, either
internal or external, I encourage you to sit
| | 00:15 | down and watch these videos together.
| | 00:18 | So more than anything, think about
the core process and how you can have a
| | 00:22 | process that you can refine, mold and
shape into something that you're going to
| | 00:26 | make your lives easier by following.
| | 00:28 | So in the summary, I encourage you to
take what we've laid out as the core
| | 00:33 | process and the core process plus and
begin to think about a methodology or
| | 00:38 | workflow that works not only with the
project that you're working on but within
| | 00:42 | your team environment, within your
corporation or company, and making sure that
| | 00:46 | everyone's on the same page
during the process, is really key.
| | 00:50 | Establishing clear communications,
thinking about how to merge aspects of
| | 00:54 | usability testing and strategic approach
along with the design of your web pages
| | 00:59 | is going to make you not only a better
designer or developer or client but it's
| | 01:04 | going to make sure that your site is
meeting the expectations of your customer
| | 01:08 | and that is the most important part.
| | Collapse this transcript |
|
|
