DISSECTING A PROJECTBUILDING A WEBSITE

PITFALLS ARE EVERYWHEREBUT NOT HIDDEN

DON’T FORGET EVERYTHING THAT HAPPENS BELOW THE WATER. PROJECTS NEED PLANNING

Thanks Chris Berger

THERE IS NO SILVER BULLETEVERY 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

LET’S GET GOING

The client likes it. The paperwork is signed. Let’s go.

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?

SOME THINGS TO THINK ABOUT:

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?

BREAKING IT DOWNTHE ELEMENTS

KEY STEPS

Discovery

Define

Design

Development / Build / QA

- Bring up the sabra site now

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

Project Plan

Discovery

Define

Design

Build

QA TestingDiscovery Phase

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

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

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

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

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

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

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

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

Project Plan

Discovery

Define

Design

Build

QA TestingDefine Phase

DEFINE

-Are we creating templates? How Many?- Did we include all functionality that was included in the specs

- Does the User Flow make sense?

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

Project Plan

Discovery

Define

Design

Build

QA TestingDesign Phase

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?

Final site designs

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

Project Plan

Discovery

Define

Design

Build

QA TestingBuild Phase

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)

SITE CMS

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

When you want to make a change to something already built it is like untangled spaghetti.

It looks like a big mess of spaghetti?

BUILD IT RIGHT THE FIRST TIMEOR BUILD IT TWICE

EXTRAS

PSD2HTML

Turns your PSD into a functioning HTML page. They can add JavaScript and even do WordPress templates. Founded in 2005, they claim to now have 50,000 clients.

Great for rapid-prototypes and getting a proof-of-concept in front of the client fast.

Excellent customer service.

Inexpensive with a quick turnaround.

www.psd2html.com

DESIGNERS TOOLBOX

A variety of templates including web browser frames and web-safe areas.

Helpful when you need to mock something up inside of a browser window to simulate the actual user experience.

www.designerstoolbox.com

A LIST APART

For people who make websites.

Articles covering topics such as code, content and culture.

Though targeted towards developers the articles are written in a friendly manner to the non technical and could provide some solid educational reading.

www.alistpart.com

HELPFUL RESOURCES

PSD2HTML does strict compliant clean code including WAI 2.0, Section 508, print style-sheets

THE END

QUESTIONS?