Website Planning & Strategy

Jen Kramer, 4Web, Inc.Cory Webb, Cory Webb Media

Joomla!Day AustinSeptember 15, 2011

•Introduce Jesse James Garrett and the Five Planes of User Experience

•Strategy, Scope, Structure, Skeleton, Surface

•Introduce Minis & Friends

•Get Jesse and the Minis together and see what happens!

Agenda

“I need a site and I want it blue. How

much will that cost?”“I need a house, and I’d like blue paint and

beige carpet. How much will that cost?”

•What do you need?

•How many pages?

•What is your budget?

•Timeline?

•Do you want to edit your own site?

•What features do you want to include?

•Do you want fries with that?

What are your next questions?

Ever forget to ask something?

Oops. Now you’re in trouble.

Especially if you bid a fixed-rate contract.

What questions should I be asking?And does Joomla really make this process

different?

•The basic questions are always the same and in the same order.

•You can make the questions more specific or more general as needed.

•Follow the plan and your site will turn out great with less bumps.

Nope.

•Developed by Jesse James Garrett, www.jjg.net

The Elements of User Experience

Everyone wants to start with making it

pretty.That’s planning your interior decorating without

developing the floor plans first.

What’s more, some clients might feel like you’re wasting their

time.You’re not. You’re actually saving them time and a bundle

of money. But that’s often hard to understand.

•Visit and interact with people of all ages who may be suffering mentally, physically or emotionally.

•Children with disabilities

•At-risk youth

•Individuals in transition

•Elder adults

Introducing Minis & Friends!

•Benefits to participants:

•Improve their motor skills

•Ability to connect

•Tactile response

•Use of senses and spirits

•Benefits to volunteers: “life-changing” experience

Introducing Minis & Friends!

Questions:

•What do we want to get out of the site?

•Who are our users?

•What do our users want?

•What experience are we trying to provide?

•How will we measure success?

Strategy Plan

•More people coming to the site through search engines

•Better search placement

•Easy updates for the website

•Inform community about the service

•Get new members and affiliates

What do we want to get out of the site?

•Coordinators from groups servicing challenged individuals

•Prospective mini horse owners who want to become members

•Prospective donors

•Prospective affiliates

Who are our users?

•Get in touch with Minis & Friends to coordinate a visit to their group

•How to donate

•How to volunteer

What do our users want?

•Warm

•Caring

•Inviting

•“I can make a difference”

•“Gosh, that would be good for me too!”

What experience are we trying to

provide?

•The site should be easily updated by Minis & Friends.

•The site should score better in search engines than it currently does for keywords:

•Mini horses Austin

•Miniature horses

How will we measure success?

•Questions so far?

Strategy Plane

Questions:

•What features will the site need to include?

•What kind of detail will those features have?

•What tools, skills and personnel will we need to build the site?

•What is the timeline for building the site?

Scope Plane

•Contact form/scheduling application

•Easy method of displaying minis/bios (Meet the Minis page)

•Calendar/event feed

What features will the site need to

include?

•It Depends.

•You’ll need to evaluate them on:

•Desired features from client

•Joomla version

•Pre-alpha/alpha/beta/full version?

•Subscription? Support? Upgrade path?

Which Joomla extensions are right

for the job?

•Alex and Jeremy will discuss these in their talk.

Which Joomla extensions are right

for the job?

• Do I need some help?

•Graphic designer to create a custom design vs. canned template

•Joomla extension vs. custom engineered extension

•Client-provided content, or am I writing the content, or do I need a pro?

•SEO assistance?

•HTML/CSS assistance? Custom template construction?

•Something else?

What tools, skills and personnel will we need to build the site?

• Do I need some help?

•Graphic designers: Andy Miller, Kyle Ledbetter

•Joomla extensions: Alex Andreae, Jeremy Wilken

•Site deployment: Brian Edgerton, Joe LeBlanc

•Client-provided content

What tools, skills and personnel will we need to build the site?

•Today.

•Actually, like a cooking show, the site was built in advance, starting in early August.

What is the timeline for

building the site?

•Questions?

Scope plane

Questions:

• How should the content be organized?

• What are the navigation button names?

Structure Plane

•In Joomla, there are two considerations:

•What does the site map look like?

•How are categories organized?

How should the content be organized?

•Think of this as an org chart.

•This is the hierarchy of your pages in your website.

•It can be displayed as an org chart, or as a bulleted list.

What is a site map?

Home

About

Location & Directions

Photos

Physician Directory

Physician Profiles

Testimonials

Primary Care

Surgery

Area Resources

Cultural Attractions

Schools

Recreation

Real Estate

Newspapers

Links

C of C

Visitors Bureau

FAQ Career Opportunities

What is a site map?

• Home

• FAQ

• About

• Location & Directions

• Photos

• Area Resources

• Recreation

• Links

• Chamber of Commerce

• Visitor’s Bureau

What is a site map?

•Card sorting

How to develop a site map?

•See site, www.minisandfriends.com

The Site Map

•Everyone has their own theory and philosophy.

Categories in Joomla

Positives

• Set all articles to “uncategorized” – no thought required

• Client doesn’t need to worry about assigning correct category

Negatives

• Can the client find an article to edit in the article manager?

• Can’t use category blogs/lists or other features

“Categories Don’t Matter”

Positives

•Easier to find content in the manager

•Savvy clients find categories more intuitive

Negatives• Client may get confused

with too many categories• Potentially too much

slicing and dicing

“Categories Follow the Site Map”

•Organize them so you can find what you need, and so can your client.

•Thoughtfully make use of category blogs, and other category-based organization.

Categories Work for Your Content

•Log into back end and show

Our Categories

•Any Questions?

Structure Plane

Questions

•How should forms and other interactive screens look?

•Where should important information be located?

Skeleton Plane

Questions:

•What will the finished product look like?

•What colors, fonts, and logo will we use?

•Sanity checks on layout, user understanding of the site, etc.

Surface Plane

•Complete site map, outlining category structure

•Identification of the types of additional modules/components used on the website

•Identification of a custom component required for the site

•Design brief for designers, based on goals

Our Deliverables

Questions?

Joomla Template Design

Andy Miller, Rocket ThemeKyle Ledbetter, eBayJoomla!Day Austin

September 15, 2011

Preferred Tools

Kyle: MacRabbit Espresso, Firebug for Firefox, Chrome

Web Developer

Andy: Fireworks, Sublime Text, Chrome Web Developer

Why Adobe Fireworks?

- Vector + Bitmap- More Powerful

Compression- Web Slices & Layers

- Much Faster Than Ps or Ai- Smaller Learning Curve

Kyle’s Design Process

Get Inspired!- cssgallery.com

- line25.com- cssimpress.com

- smashingmagazine.com- vandelaydesign.com- bestwebgallery.com- designshack.co.uk

- webdesignledger.com

Grid System - Design Templates- 1 to 1 Pixel Width- Standard Layouts- Rapid Deployment

Andy’s Design Process

Andy MillerCEO / Founder RocketThemehttp://www.rockettheme.com

Logo Design

Design Concept

Andy’s Design Process

Initial Design Concept

Colors and FontsKuler for Colors

GoogleWeb Fonts

Flesh out Design

Finished Comp

HomepageHomepage

Inner PageInner Page