Date post: | 05-Dec-2014 |
Category: |
Technology |
Upload: | shesays-us |
View: | 205 times |
Download: | 0 times |
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?