anatomy of a large website project

81
23 March 2016 Jeff Bowman, The Mountaineers Sally Kleinfeldt & David Glick, Jazkarta Karen Uffelman, Percolator Consulting #16NTCwebanatomy Anatomy of a Major Website Redesign Project

Upload: jazkarta-inc

Post on 22-Feb-2017

801 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Anatomy of a Large Website Project

23 March 2016

Jeff Bowman, The Mountaineers Sally Kleinfeldt & David Glick, Jazkarta Karen Uffelman, Percolator Consulting

#16NTCwebanatomy

Anatomy of a Major Website Redesign Project

Page 2: Anatomy of a Large Website Project

Housekeeping

Collaborative Notes: http://po.st/webanatomy-16NTC

Page 3: Anatomy of a Large Website Project

Presenters

Jeff Bowman IT Manager The Mountaineers [email protected]

Sally Kleinfeldt Director of Consulting Services Jazkarta [email protected]

Karen Uffelman Principal Percolator Consulting [email protected]

David Glick Architect/Developer Jazkarta [email protected]

Page 4: Anatomy of a Large Website Project

Anatomy of this Session

1. A gorgeous, hard-working site

2. Keys to Success

3. The strategy & vision

4. What does technical discovery look like?

5. UX & visual design

6. The build: timeline, process & shifting priorities

7. Bumps in the road

8. The project doesn’t end at launch...

Page 5: Anatomy of a Large Website Project

The Mountaineers

Page 6: Anatomy of a Large Website Project

Where We Were

Page 7: Anatomy of a Large Website Project

Where We Are Now: A Gorgeous, Hardworking Website

Page 8: Anatomy of a Large Website Project
Page 9: Anatomy of a Large Website Project

Blog

Page 10: Anatomy of a Large Website Project

Member Profiles

Page 11: Anatomy of a Large Website Project

Badges

Page 12: Anatomy of a Large Website Project

Member Profiles: Badges

Page 13: Anatomy of a Large Website Project

Course and Activity Search

Page 14: Anatomy of a Large Website Project

Course Registration

Page 15: Anatomy of a Large Website Project

Shopping Cart

Page 16: Anatomy of a Large Website Project

Rosters

Page 17: Anatomy of a Large Website Project

Rosters Continued

Page 18: Anatomy of a Large Website Project

Dashboards

Page 19: Anatomy of a Large Website Project

Keys to Success

Page 20: Anatomy of a Large Website Project

Keys To Success

Solid Strategy Agile Process

Trusted Partners

Page 21: Anatomy of a Large Website Project

Okay… Let’s go!

Page 22: Anatomy of a Large Website Project

The Strategy & Vision

Page 23: Anatomy of a Large Website Project

Engagement Strategy

1. Theory of Change 2. Audiences 3. Roles & Value Propositions 4. Superpowers 5. Engagement Pyramid 6. Secret Shopping

Page 24: Anatomy of a Large Website Project

Theory of Change

Page 25: Anatomy of a Large Website Project

Theory of Change

Page 26: Anatomy of a Large Website Project

Audiences

Page 27: Anatomy of a Large Website Project

Superpowers

Page 28: Anatomy of a Large Website Project

How could the new website facilitate ENGAGEMENT?

Page 29: Anatomy of a Large Website Project

Secret Shopping

Page 30: Anatomy of a Large Website Project

What Does Technical Discovery Look Like?

Page 31: Anatomy of a Large Website Project

Agile

Page 32: Anatomy of a Large Website Project

Things Change

Priorities Requirements

Personnel

?!?

Page 33: Anatomy of a Large Website Project

Graceful Change

Page 34: Anatomy of a Large Website Project

Agile Essentials

User stories Iterations Communication

Page 35: Anatomy of a Large Website Project

User Stories

As a <role> I want <goal>

so that <benefit>

Page 36: Anatomy of a Large Website Project
Page 37: Anatomy of a Large Website Project

Requirements Gathering

Page 38: Anatomy of a Large Website Project

The Business Requirements Document

Page 39: Anatomy of a Large Website Project

Requirements List

(screenshot of Ryan’s list)

Page 40: Anatomy of a Large Website Project

Turn Requirements into User Stories

Page 41: Anatomy of a Large Website Project

User Stories

Page 42: Anatomy of a Large Website Project

Technical Architecture

Page 43: Anatomy of a Large Website Project

Product vs. Platform

Page 44: Anatomy of a Large Website Project

The Mountaineers Platform

Page 45: Anatomy of a Large Website Project

How big is it?

Page 46: Anatomy of a Large Website Project

Bad Estimation

http://xkcd.com/1658/

Page 47: Anatomy of a Large Website Project

Bottom Up

Page 48: Anatomy of a Large Website Project

Planning Poker

Page 49: Anatomy of a Large Website Project

Planning Poker

Page 50: Anatomy of a Large Website Project

Top Down

Page 51: Anatomy of a Large Website Project

Hard Choices

Page 52: Anatomy of a Large Website Project

UX & Visual Design

Page 53: Anatomy of a Large Website Project

Developers & Designers: Coordination is Key

Page 54: Anatomy of a Large Website Project

What good UX process looks like

Page 55: Anatomy of a Large Website Project

One million wireframes

Page 56: Anatomy of a Large Website Project

The Value of Visual Design

Page 57: Anatomy of a Large Website Project

Visual Design: Creative Brief

Page 58: Anatomy of a Large Website Project
Page 59: Anatomy of a Large Website Project

The Build: Timeline, Process

& Shifting Priorities

Page 60: Anatomy of a Large Website Project

Timeline

May June July Aug Sept Oct Nov Dec Jan Feb Mar Apr

May 6, 2013

May 5, 2014

Launch!

20 Development iterations

UX Design Visual Design & Theming

Data Migration

TestingDiscovery

Page 61: Anatomy of a Large Website Project

● Jeff Bowman, Project Owner ● Sally Kleinfeldt, Project Manager ● David Glick, Carlos de la Guardia, Cris Ewing, Plone

Developers ● Chris McCullough, Karen Uffelman, Strategy Consultants ● Matthew Scholtz, Nicolas Campbell, John Fine,

Salesforce Developers ● Kevin Brooks, HTML/CSS developer ● Darrell Houle, UX Designer ● Neal Maher, Graphic Designer

Page 62: Anatomy of a Large Website Project

Iterations

Timeboxed Highest priorities Testable product

Page 63: Anatomy of a Large Website Project

How it Works

from: extremeprogramming.org

Page 64: Anatomy of a Large Website Project

What happens in an iteration?

S M T W Th F S

Iteration planning

Standup Standup Standup Standup

Demo

work in progress

testing & bugfixing

Page 65: Anatomy of a Large Website Project

Special Snowflakes

Page 66: Anatomy of a Large Website Project

Data Migration

Run migration

TestFix

Page 67: Anatomy of a Large Website Project

Testing

Page 68: Anatomy of a Large Website Project

Bumps in the Road

Page 69: Anatomy of a Large Website Project

Executive Commitment

Page 70: Anatomy of a Large Website Project

Choosing Your Project Partners

Page 71: Anatomy of a Large Website Project

Contingency Planning

Page 72: Anatomy of a Large Website Project

What Happened in this Project?

Page 73: Anatomy of a Large Website Project

The project doesn’t end at launch...

Page 74: Anatomy of a Large Website Project

Dealing with bugs, etc.

Page 75: Anatomy of a Large Website Project

Collecting User Feedback

Page 76: Anatomy of a Large Website Project

Does the launched website ACTUALLY work?

Page 77: Anatomy of a Large Website Project

Does it continue to work over time?

Page 78: Anatomy of a Large Website Project

Long-term Budget

Page 79: Anatomy of a Large Website Project

In Conclusion

Engagement strategy + robust technical discovery + agile

development + strong UX and visual design + the right

project partners + executive buy-in and internal leadership +

contingency planning + commitment to ongoing development

= GORGEOUS, HARDWORKING SITE

Page 80: Anatomy of a Large Website Project

Please Complete the Feedback Survey!

Evaluation Link: http://po.st/mxsS9Q

Page 81: Anatomy of a Large Website Project

Questions?

Jeff Bowman IT Manager The Mountaineers [email protected]

Sally Kleinfeldt Director of Consulting Services Jazkarta [email protected]

Karen Uffelman Principal Percolator Consulting [email protected]

David Glick Architect/Developer Jazkarta [email protected]