Steps to Creating Lean Websites

Creating New
Websites
Steps to Success
Thursday, June 6, 13

#sunycuad
@Zablocki

Fran Zablocki
Strategist
Hello!
mStoner

Big Project
vs
Small Project

Big Project:
Institutional
Redesign

a.k.a.
“The 500 lb.
Gorilla”

Characteristics:
• Takes 10 - 14 months
• All consuming for 3 months
• Owns your world entirely
• But then leaves for like 3 to 5 years so
you can...

Hm.. Not quite.

Small Projects

a.k.a.
“Hordes of 10
lb. monkeys”

Small Projects:
• Alumni community site
• Capital campaign microsite
• Campus anniversary site
• Those “Hey I need a website” sites
• Those “Oh you didn’t know about that
site?” sites

What to do?
a. Wrestle them all at the same time
b. Toss the lightest ones first
c. Shock them with an electrified t-shirt
d. Tackle them with lean, mean processes,
tools and communication

Why?
Because you don’t have unlimited:
Time You need it as quickly as possible.
Budget You aren’t minting money.
People Maybe it is just you! #higheredsolo

How?
By taking the project lifecycle and trimming
the fat.

Approach
Lean processes
tools
communication
platform

Lean means:
Having the right tools
Collaborating as much as possible
Centralizing documentation
Being smart with time

Break down the process:
Strategize Plan Create Implement Evaluate

Tools
Communication
Process

• Portfolio management - does this Project need to happen?
• Does this meet a need?
• Do we have the time/budget/resources to make this
happen?
• Do we have those resources right now?
Strategy

• Be realistic - if the answer is no, you won’t do yourself
favors later on by saying yes
• Make more time for the right projects by never starting
the wrong ones
• Ultimate goal is to become more proactive, less reactive
Strategy

• Don’t skip it just because “oh my gosh can’t we just get
this project done already?!”
• Give yourself time to think by scheduling meetings
outside the office.
• Yes, I am suggesting you meet with yourself. Make it
sound important.
Strategy

Need / Want / Wish Grid
• Identify what must be included and what can wait
• Helps to define scope
• Helps channel creative but distracting ideas to
somewhere useful

• Set measurable goals
• Don’t get paralyzed by the details
• Don’t worry if there aren’t already metrics
• Pick a number, shoot for it
• Adjust later when you evaluate
Measurable Goals

Examples of measurable goals
• Reach ___ people on Facebook.
• Increase engagement ___ percent.
• Drive ___ people to the website.
• Prompt ___ people to inquire.
• Get ___ people to apply.
• Attract ___ views of a YouTube video.
Measurable Goals

SWOT
Analysis
Strengths Weaknesses
ThreatsOpportunities

Strategy
Brief
• Pull it all together in one lean document
• 2-5 pages
• Business Case
• Goals
• Need / Want / Wish Requirements
• SWOT

• Planning is hard, particularly if you don’t have history
on how long things take
• Be conservative and take your best guess.
Planning

• Begin at the end.
• When do you need it done?
• Back it up from there.
• Be realistic.
Planning

• Identify resources, roles, responsibilities up front
• Use collaborative tools to help save time
• Track time (even if it is a really rough estimate)
Planning

• Browser - based project and resource planning
• Collaborative - allows sharing, commenting,
discussions
• Current - dates adjust automatically
• Compatible with MS excel, project
• $160 / year

• Free, Collaborative cloud scheduling
• Integration with Google Drive and Business
• Features similar to Smartsheet

• Outlines roles and responsibilities for project teams
• Map to position or individual
• Helps set expectations from the start
Responsibilites
List

• If you are having trouble estimating, this can help
• Keep it simple and use tools to keep it lean
Time Tracking

• If you are having trouble estimating, this can help
• Keep it simple and use tools to keep it lean

• Go back to the basics (paper prototyping, back of
napkin).
• Online tools can save an enormous amount of time
here on collaboration
Creative
Production

• Help quickly organize and weight information visually
without needing heavy design work
• Allow focus on important elements such as
information architecture, content organization,
feature space
Wireframes &
Prototypes

• Don’t be fancy
• Sketch it out - you don’t
need to be an artist
• 5 minutes, 5 people
• Quick, cheap way to test
visual ideas
Back of Napkin

• One sheet (or napkin)
for each page element
• Good for quickly
rearranging page
elements and testing
different layouts
Paper Prototypes

• Collaborative wireframing
• Allows commenting, sharing, versioning
• Let you discuss functionality in the context of the
design instead of separately
• $14 / month for small teams
Hotgloo

• 10 minutes of silence
• Cut the chatter and get everyone’s input at the same
time
• Simply look at what is in front of you and write your
thoughts.
• Use group chat to share ideas
• Open to discussion afterward
Creative Review
Meetings

• Usability / IA / Wireframes / Designs
• Beyond your core team
• As efficiently as possible
• Gives you real results to justify your decisions
Testing

• Efficient - use your existing student/faculty/staff/
alumni email lists
Surveys
• Free basic service, $17 / month for unlimited
questions responses

• OptimalSort: Online card sorting
• TreeJack: IA pathing
• Chalkmark: Wireframe / Design Heat Mapping
• $109 / month for each
Optimal
Workshop

• www.responsinator.com
• Lets you see what your site looks like on muliple
devices quickly
• Free!
Responsive
Design

Responsive
Design

• Accessibility: cynthiasays.com
• W3C compliance: validator.w3.org
• Page performance: tools.pingdom.com/fpt
• Page performance: www.webpagetest.org
Test, Test, Test

• Can be one of the most time-consuming tasks in any
project
• Centralizing your effort on the cloud can reduce
coordination time considerably
Content Creation
& Migration

• Use bookmarks to allow users to quickly jump to
different pages
• Eliminate tons of emails / attachments
• Use your information architecture as the foundation
• Track what copy is in, what is missing, when it’s due
Google Docs w/
Bookmarks

• You want your code to be
• in one place
• shared with everyone who needs it
• always current
Implementation

• When more than one developer is working on the
code, having version control is a must
• Subversion allows code segments to be ‘checked
out’ so that no one else can alter them
• Allows collaboration and saves on code re-writes
• git-scm.com
Version Control:
Git

• Keeps the bug list up to date
• Automatically tracks changes and allows reversions
• Allows comments and live chat while viewing
• Invaluable during crunch time when heads are down
and meetings can’t happen
Bug tracking:

• So easy to skip because “Oh my gosh we just
finished the project! Time for cake!”
• Crucially important to all the prior steps on the
NEXT project you do.
Evaluation

• Scheduled right after launch
• Honest assessment:
• Did we meet our goals?
• How close were our estimates?
• What did we do right?
• What did we do wrong?
• What did we not see coming?
• Make it the first thing you look at the next time you
do a project like this
Project Debrief

• Free, powerful. Get it.
• Allow you to measure against past pages
• Tons of options for goal setting
• Pathing and funnel reports
• Visitor behavior
• Device usage (ie mobile)
• If you have a brand new site, be sure this is
installed!
Google Analytics

Strategize
Plan Create
ImplementEvaluate
Communicate &
Collaborate

• Lean - cut out everything that is unnecessary, but
don’t skip anything that is necessary
• Get away from email as much as possible
• Reduce the time wasted on feedback loops (ie: the
endless reply all email thread from hell)
Communication
& Collaboration

• Don’t meet to discuss, meet to decide
• Don’t have one if you don’t need one
• Everyone reviews/comments before the meeting
starts
Meetings

• Save time by getting the basics done right
• Agendas
• Note-taking
• Minutes
Meetings

Golden Rule: never have a meeting without one.
Template:
• Date, time, connection method
• Agenda items
• Review deliverables from last meeting
• Discuss open items
• Add new items
• Upcoming deliverables and responsibility
• Upcoming milestones (next 3-5)
• Next meeting (if known)
Agendas

Golden Rule: always take notes. No, you won’t remember.
• Designate a meeting leader and note-taker
• Have a note-taking buddy system (ie: Fran always
takes notes when Susan leads the meeting).
Meeting Notes

Golden Rule: Copy and paste the agenda and you are
halfway there!
• Date, time
• Attendance
• Agenda items
• Review deliverables from last meeting (notes in italics)
• Discuss open items (notes in italics)
• Add new items
• Repeat upcoming deliverables & milestones (next 3-5)
• Schedule next meeting date while you have everyone’s
attention
Minutes

Sometimes you need to pull your head up and see where
you are in relation to where you should be.
• Can be monthly, quarterly. Less frequent than regular
meetings
• Compare estimated timeline to actual
• Let you flag slippage and discuss causes of and
solutions for issues
Periodic Status
Reports

Collaboration
Tools

• Shared calendars allow different levels of detail,
including showing anyone (the public) when you are
busy
• Can share with those who don’t have Google accounts.
• ‘Find a time’ allows you to quickly see what is open for
a group of people
• Free.
Google Calendar

When in-person meetings aren’t possible
• Hangouts are a great way to see people who might be
remotely located.
• Lots of tools
• Chat room
• Screen sharing
• Document collaboration with Google Drive
• Still free.
Google Hangouts

Central location for all
• project correspondence
• files
• agendas
• notes
• conversations
• project calendar
• www.basecamp.com
• $20 / month for 10 active projects
Basecamp

Bringing it all Together:
Lean Platform
for Small Projects

Lean Platform
• We’ve heard many times from clients about the need
for an approach that is the right fit for small projects
and small teams
• We’ve created new approaches tailored to provide
focused, nimble web solutions

Lean CMS
Platform
Wordpress

Why Wordpress?
• Powerful platform
• Easy to use: industry standard for interface usability
• Quick to implement
• Saves time with parallel production of design and
content

Why Wordpress?
• Strong base functionality
• Strong development community with variety of plugins
and frameworks to meet different needs
• Good fit for departments and schools with small web
teams that need a CMS sized for them

Lean Platform,
Process & Tools
• Using many of the tools, techniques and strategies
you’ve seen here today
• 5-6 month time to complete
• Parallel tracking of phases
• Tailored for smaller projects and smaller teams

Lean Timeline

We’re flexible.
This is only one approach. We can:
• Customize this one
• Customize an approach just for you

Interested?
Let us know!
We’d love to work with you.

Thanks!
Questions?

Fran Zablocki
Strategist
@Zablocki
fran.zablocki@mstoner.com
585.300.4559
Mallory Wood
Director of Marketing
@mallorywood
mallory.wood@mstoner.com
802.457.9234
Contacts

Steps to Creating Lean Websites

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (20)

Similar to Steps to Creating Lean Websites

Similar to Steps to Creating Lean Websites (20)

Recently uploaded

Recently uploaded (20)

Steps to Creating Lean Websites