The document provides guidance on planning and executing a website project. It discusses key steps such as discovery, definition, design, development, and QA testing. During the discovery phase, functional and technical requirements are identified through asking questions. The define phase involves creating deliverables like a site map, user flows, and wireframes. Design focuses on staying aligned to strategy and wireframes while creating final site designs. Throughout the process, ensuring requirements defined earlier are met and teams collaborate on their respective phases.

1. DISSECTING A PROJECT
BUILDING A WEBSITE

2. PITFALLS ARE
EVERYWHERE
BUT NOT HIDDEN

3. DON’T FORGET
EVERYTHING THAT
HAPPENS BELOW
THE WATER.
PROJECTS NEED
PLANNING
Thanks Chris Berger

4. THERE IS NO
SILVER BULLET
EVERY PROJECT IS DIFFERENT
Although no project is the same, there are key steps that are standard that you need to keep in mind to move

5. LET’S GET GOING
The client likes it. The paperwork is signed. Let’s go.
SOME THINGS TO THINK ABOUT:
The concept calls for what kind of technology?
What are the target devices? Just desktop? Mobile?
Where will this live (hosted) and for how long?
What does it do and how is measured?
Does the content need to be updated after launch?
This is what I would do. Not the right-way because
guess what, there is no right or wrong way. Is there
management post-launch?

6. BREAKING IT DOWN
THE ELEMENTS

7. KEY STEPS
Discovery
Define
Design
Development / Build / QA
- Bring up the sabra site now

8. KEY REQUIREMENTS FOR THE SITE
Need to build a product site:
- Create a simple, visual appealing, innovative,
universally accessible resource for consumers to get all
of the sabra-related info in one place.
- Give users an ability to embrace sabra with content.
- Stay Relevant. offer information on how to integrate
Sabra into their diet with product and nutritional
information

13. Project Plan
Discovery
Define
Design
Build
Discovery Phase QA Testing

14. DISCOVERY
Functional Questions:
What Questions should we ask, what is the needs we need to call-out?
Ex. For example, a functional requirement is that an author needs to
create a content article easily. It is not that a content management
system needs to be purchased. So you don’t say what needs to be
done, you say what “functionality” needs to exist in the new application
or site. Other examples of functional requirements:
An article cannot be published until it is reviewed and approved by an
editor
•
A product cannot be purchased until an email address is given

17. DISCOVERY
Functional Questions:
- What functions do we need on the site (do users need to login? what would
the flow be?)
- Is there a need for a DB, are we collecting information?
- Is the user being launched out of the site?
- We want a promotional area
- Users the ability to print the recipes
- Ability to search for a store in their area
Ex. For example, a functional requirement is that an author needs to
create a content article easily. It is not that a content management
system needs to be purchased. So you don’t say what needs to be
done, you say what “functionality” needs to exist in the new application
or site. Other examples of functional requirements:
An article cannot be published until it is reviewed and approved by an
editor
•
A product cannot be purchased until an email address is given

18. DISCOVERY
Technical Questions:
What Questions should we ask, what is the needs we need to call-out?
Ex. For example, a functional requirement is that an author needs to
create a content article easily. It is not that a content management
system needs to be purchased. So you don’t say what needs to be
done, you say what “functionality” needs to exist in the new application
or site. Other examples of functional requirements:
An article cannot be published until it is reviewed and approved by an
editor
•
A product cannot be purchased until an email address is given

21. DISCOVERY
Technical Questions:
-
Server Needs – What type of server will it be hosted (existing or does this
need to be determine
- DB Needs?
- Where will the Website be hosted? Will site be on a dedicated or shared
server?
- Does the site need to have a CMS built behind it
- Are there already metrics platform being used, or can we set up tracking?
- Metrics - What are we tracking?
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

22. TECHNICAL SPECS EX.
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

23. TECHNICAL SPECS EX.
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

24. PROJECT CALENDAR
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

25. DISCOVERY
Final Deliverables:
- Timeline
- Technical / Functional Requirements
- Technical / Functional Specs
- Metrics Defined
Teams Included in this Phase:
- Producer
- Tech Lead
- Information Architect
- Creative
- Analytics (strategy)
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

26. Project Plan
Discovery
Define
Design
Build
Define Phase QA Testing

27. DEFINE
- Are we creating templates? How Many?
- Did we include all functionality that was included
in the specs
- Does the User Flow make sense?

30. DEFINE
Final Deliverables:
- Site Map
- User Flow/Test flow
- Wireframes (Templates - HP, Product/Recipe Carousel, Product/Recipe
detail, Store Locator, Article Page)
- Copydeck
Teams Included in this Phase:
- Producer
- Tech Lead
- Information Architect
- Creative
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

31. Project Plan
Discovery
Define
Design
Build
Design Phase QA Testing

32. DESIGN
Not some many questions for this phase, but more
staying on top of the creative.
- Are we staying true to the wireframes?
- is creative staying on strategy and brand?
- are there any assets that also need to be created?
- do we need to provide a style guide?

33. Final site designs

34. DESIGN
Final Deliverables for this phase:
- Site Map
- PSDs
- Asset Created
- PDF StoryBoards
Teams Included in this Phase:
- Producer
- Creative
- UX Designer
- Potential Developer
- Tech Lead
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

35. Project Plan
Discovery
Define
Design
Build
Build Phase QA Testing

36. DEVELOPMENT / BUILD / QA
- Continually checking in to verify development is
moving
- Is the development matching up to the
Functional specs defined
- Is the creative true to psds handed over
- Does the site match the defined User Flow?
- Manage QA verification (Quality Assurance Plan)

37. SITE CMS

38. DEVELOPMENT
Final Deliverables for this phase:
- Live Site
Teams Included in this Phase:
- Producer
- UX Designer
- Potential Developer
- Tech Lead
-­‐
Technology
should
be
determined
based
on
your
audience,
not
based
(ex.
Don’t
do
;lash
for
the
want
of
;lash)
If
a
site
needs
to
be
addressing
search
needs,
you
cannot
build
in
;lash

39. When you want to make a
change to something already
built it is like untangled
spaghetti.
It looks like a big mess of spaghetti?

40. BUILD IT
RIGHT THE
FIRST TIME
OR BUILD IT TWICE

41. EXTRAS

42. HELPFUL RESOURCES
PSD2HTML DESIGNERS TOOLBOX A LIST APART
Turns your PSD into a functioning A variety of templates including For people who make websites.
HTML page. They can add web browser frames and web-safe
JavaScript and even do WordPress areas. Articles covering topics such as
templates. Founded in 2005, they code, content and culture.
claim to now have 50,000 clients. Helpful when you need to mock
something up inside of a browser Though targeted towards
Great for rapid-prototypes and window to simulate the actual user developers the articles are written
getting a proof-of-concept in front experience. in a friendly manner to the non
of the client fast. technical and could provide some
www.designerstoolbox.com solid educational reading.
Excellent customer service.
www.alistpart.com
Inexpensive with a quick
turnaround.
www.psd2html.com
PSD2HTML does strict compliant clean code including WAI 2.0, Section 508, print style-sheets

43. THE END

44. QUESTIONS?