INFO 330 Forward Engineering Project From Info to Site

Logical Design 1.User studies 2.Info model 3.Site Design 1.Funnel design 2.User Journey 3.Site Flow 4.Wireframes 1.Pages 2.Areas

User + Info  Display

Michelle What’s the coolest car for me? Info need: -What kinds of cars are there? -How do you buy a car? -What do my friends think? -What car suits my personality? -What can I afford ? Info behavior: -Ask my friends & family -Look at a lot of cars and think -Google for certain cars -Look at lots of pictures/videos Info type: Cool Car -Only most basic car facts -Lots of info on styling -Lots of media -Stories and anecdotes -Make it easy to share -Logistics not statistics -Chatty and friendly style

Info Type Logical Model Info type: Cool Car Content -Only most basic car facts -Lots of info on styling -Lots of media -Stories and anecdotes -Logistics not statistics Controlled vocab Cool Car name street1 street2 (o) city state zip phone facebookURL (o) rating (0) shortDescription (basic rt) longDescription (full rt) Dealer Info need: -What kinds of cars are there? -How do you buy a car? -What do my friends think? -What car suits my personality? -What can I afford ? name shortDescription (basic rt) longDescription (full rt) features extras (o) personalityTraits bestUses whoOwnsOne (o) media stories (o) price Basic Rich Text p b i u Basic Rich Text p b i u Full Rich Text p ul ol media b, i, u, Inline link (e or i) in p, li Full Rich Text p ul ol media b, i, u, Inline link (e or i) in p, li

Info need: -What kinds of cars are there? -How do you buy a car? -What do my friends think? -What car suits my personality? -What can I afford ? Info behavior: -Ask my friends & family -Look at a lot of cars and think -Google for certain cars -Look at lots of pictures/videos Hierarchy Index Association Sequence Index Sequence Index Association Hierarchy Index (car) Sequence Association Cars by type Cars like this one Other dealers with this car Features Personality trait Uses Owners Price Car name Steps to buying a car Cars we want you to see Top Dealers Index search results Index (dealer) Zip City Name Full text Index Car.longDesc Dealer.longDesc Access Structure Logical Model

What happens when the user meets an info need The org gets what it wantsAnd Users get what they want

THE SITE FUNNEL THE ORG GETS WHAT IT WANTS

The site funnel User lands – Where, why, how? User flows – Follows the suggested next action User succeeds – Get’s what she wants – Converts (does what the org wants)

Site funnels (org perspective) Know Do Know Do Know Do 1- landing 2- flow 3- success! Conversion!!

Dealer Funnel car Google, FB posts, Ads on other sites car Car at dealer car Car at dealer Drive one Buy one Flow Conversion Success!! Landing

Deliverable: Site Funnel World (where does the user come from) Landing Flow (what are the stages the user goes through) Conversion/Success (what the org wants the user to do) Create a diagram – Create your own style if you can – Use mine if you need to

THE USER JOURNEY THE USER GETS WHAT SHE WANTS

The User Journey in general 1.I need some info 2.I figure out where to look 3.I follow the trail (flow) 1.I abandon a site when it does not seem right 2.I go further when I am getting closer 3.I chang my mind about what I want as I learn 4.I find it (success) 1.I know it now 2.I experience it 3.I can do it

Michelle’s Journey I’m unsure of what car I want I am on the trail of the car I want I found one I want You made me even more confused I lost the scent I can’t decide I don’t trust the dealer I can’t decide I don’t trust the dealer What I see helps me I found some good cars

Deliverable: User Journey Stages (at least 3) Drop-offs for each stage Why the user moves forward Last stage is success Create a diagram – Create your own style if you can – Use mine if you need to

THE SITE FLOW THE USER JOURNEY MEETS THE FUNNEL

The Car For You Site Landing Page (Car full view) World Google Page Rank Partial View Ad Facebook Post Faceted Search Result Sequence Associations by car attributes Faceted Search Result Sequence Associations by car attributes Drive one What I see helps me Price sort Location sort Other cars at dealer Price sort Location sort Other cars at dealer I found good car models Car-Dealer Page My type of cars is for sale around here I want this car I trust this dealer I want this car I trust this dealer My Cars Page I found some good cars and dealers I want this car I trust this dealer I want this car I trust this dealer Likes Viewed Saved Search Associations by car attributes Likes Viewed Saved Search Associations by car attributes

Deliverable: Site flow Name your pages Organize them in the way you want users to pass through them Superimpose the funnel Superimpose your user journey Create a diagram – Create your own style if you can – Use mine if you need to

WIREFRAMES INFO TYPES AND ACCESS ALL ACCOUNTED FOR

Sample Wireframes linked to the course web site I will record a separate drill-down through the sample

Deliverable: Wireframes Use any tool you want – Must save in a format readable by us (pdf, html) – Must be low to med fidelity – Can use pencil but will have to scan At least three page wireframes – Probably your two info types and one more – Must show areas and general layout Separate mockups for each area of each page – Separate for each tab (if any) – Two pages can (should) use the same area Mockup – Actual content as needed for clarity – Field names and descriptions otherwise – Popups and reveals where used – Lists and dropdowns with realistic terms and phrases

CONTROLLED VOCABULARIES

Controlled Vocabularies and Hierarchies They will be due in the next cycle (in the coding spec) But will be very good to figure out now – To include content in the mockups – To see the scope of what you are doing In the controlled vocabs – Include the list of terms – Indentation if it is a hierarchy – At least two sources (web sites) you consulted to construct the CV

CHANGES AND LEARNING

What did I learn/Change The central entity is the car-dealer not the car – Media is connected to the car-dealer Cars are new or used Dealers – Have images What types hierarchy = now out of scope Features – Type=standard are a short list of very high level features – Type = extra Hierarchical Have weights

Deliverable: Changes and learning No special format Keep track of what changed Should modify the db schema as you change so it always reflects the most recent ideas Can change other deliverables before the final submission