1 / 27

INFO 330

INFO 330. Forward Engineering Project From Info to Site. Logical Design. User studies Info model Site Design Funnel design User Journey Site Flow Wireframes Pages Areas. User + Info  Display. Michelle What’s the coolest car for me?. Info need: What kinds of cars are there?

remedy
Download Presentation

INFO 330

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INFO 330 Forward Engineering Project From Info to Site

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

  3. User + Info  Display

  4. MichelleWhat’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

  5. Info Type Logical Model Cool Car Controlled vocab name shortDescription (basic rt) longDescription (full rt) features extras (o) personalityTraits bestUses whoOwnsOne (o) media stories (o) price • 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 ? Dealer name street1 street2 (o) city state zip phone email facebookURL (o) rating (0) shortDescription (basic rt) longDescription (full rt) • Info type: Cool Car • Content • Only most basic car facts • Lots of info on styling • Lots of media • Stories and anecdotes • Logistics not statistics • 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

  6. Access Structure Logical Model Hierarchy • 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 ? • Cars by type Hierarchy Association Sequence Index (car) Index Association • Features • Personality trait • Uses • Owners • Price • Car name Index • Info behavior: • Ask my friends & family • Look at a lot of cars and think • Google for certain cars • Look at lots of pictures/videos Association Sequence Index Index (dealer) Association • Zip • City • Name Sequence Association • Cars like this one • Other dealers with this car • Steps to buying a car • Cars we want you to see • Top Dealers • Index search results Full text Index • Car.longDesc • Dealer.longDesc

  7. What happens when the user meets an info need The org gets what it wants And Users get what they want

  8. The Site funnel The org gets what it wants

  9. 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)

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

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

  12. 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

  13. The user journey the User gets what she wants

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

  15. Michelle’s Journey I’m unsure of what car I want What I see helps me I am on the trail of the car I want I found some good cars 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

  16. 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

  17. The Site Flow the User Journey meets the Funnel

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

  19. 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

  20. WireframesInfo types and Access all accounted for

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

  22. 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

  23. Controlled vocabularies

  24. 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

  25. Changes and learning

  26. 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

  27. 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

More Related