Ann Marion Portfolio – Wireframes/ Flow Diagrams ...Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 13 Screen Design Mock-ups - Dynamic Diagrams / Student Advantage

Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 1

Wireframe – Dartmouth Polytrauma Conference – Dec 3-6, 2006 – HOME PAGEhttp://engineering.dartmouth.edu/polytrauma/

HOME CONFERENCE RESEARCH SPONSORS CONTACT

Banner Graphic

Dartmouth Polytrauma Conference 2006HomeAbout

CommitteesBackground

AssumptionsProgram

PreparationTraveling to Hanover

Local AccommodationsContact Us

Appendix

Content

Download Brochure

Download Registration

Footer –Dartmouth Home About Thayer School Home Koop InstituteDartmouth MedicalSchool

Dartmouth-HitchcockMedical Center

White River Junction VAMC Dartmouth College

Copyright 2006 Trustees of Dartmouth College


Wireframe – Dartmouth C.Everett Koop Timeline – Nov, 2006 – Second Page Designshttp://www.dartmouth.edu/~engs13/koop_timeline/

C. Everett Koop ~ Timeline ~ Prototype ~ HOME ABOUT

Growing Up

Brooklyn

Education

Years

Pediatric

Surgeon

Surgeon

General

Koop

Institute

1916-1933 1937-1941 1941-1981 1981-1989 1989>>FUTURE

PAGE TITLE: Koop Insitute -- << Past << Present >> FutureArchival Photo Box

LABEL

LINKS TO SOURCES for Photos

Archival Photo Box

LABEL

LINKS TO SOURCES for Photos

Content

Link to Visit the Koop Insitute

Footer –Dartmouth Home About ENGS13 Home Koop Timeline Home Koop Institute contactDartmouth Med School Dartmouth-Hitchcock

Medical CenterWhite River Junction VAMC Dartmouth College

Copyright © 2006 Trustees of Dartmouth CollegeNovember 2, 2006 - First Draft


Wireframe – Dartmouth Engs Coursehttp://www.dartmouth.edu/~engs13/

ENGS 13 HOME PAGE Banner Graphic Professor Rosen- Robbie

06F, 07F: 2A

Faculty & TA’s CONTENTLecture Schedule Course Theme PosterReadings/Slides/Videos Course Theme Poster Label & Photo Credit

Papers TITLE of CourseExams SUBTITLE of CourseLink to BlackboardPrerequisite: None.Distributive: TAS.Offered: 06F: 2AInstructors: Rosen, RobbieFilene Auditorium (Moore)

COURSE DESCRIPTION

Spring 2006 Course: http://www.dartmouth.edu/~engs05/Special Interest: Medical Disaster Conference Report (Dartmouth: June 13-15, 2001)RETURN TO ENGINEERING SCHOOL COURSE LISTINGS:http://www.thayer.dartmouth.edu/thayer/academicsadmissions/undergrad-courses.html

updated 9-20-06


Flow Diagram – simple flow diagram for Brandeis Peer to Peer Application prototypehttp://www.demo.cs.brandeis.edu/pr/edutech.html

Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 5Flow Diagram – final Dynamic Diagrams/ Student Advantage Information ArchitectureCurrent version: http://navisite.collegeclub.com/channels/academics/?hhcid=140&d=media

Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 6Storyboards – BeingMeta http://www.beingmeta.com/

Original BabelVision Demo page: minimal formatting/ no instructions

Phase 1: Reviewed & Tested Every page on existing site and demo, making screen shot of each step. Compiled Report ofScreen Shot Storyboard Sequence with discussion, analysis, recommendations and questions for proprietor computer scientistand advisory team. Review Competitors and List Features Pros and Cons.

Wireframe Recommendation for Home Page:Logo/Link Image? Announcement Image? Logo/Link

Description? Instruction? New SearchActive area

Includes: Expert Button, other modes,Typing Field, HTML instructions or Links to Other Versions of Interface

Bottom of page: About Links, copyright

Specifications for Working Draft Duplicate Version of BeingMeta site with applications was set up both at BeingMeta using CVS

Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 7Storyboards – BeingMeta – Menubar/InstructionsPhase 2: Create First Level Navigation Menu Bar on top of every page

1. If you click on MORE you get the DEMO.The DEMO starts without hintsPROPOSE: Insert an Information Page before the DEMO.2. need a password?2.B Include information how to get signed up for demo [email K.Haase?]3. Long Wait for some searches as is not optimized yet as a final product such as Google that has been pre-computed over a

week (how does Google work, double check).

Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 8Storyboards – BeingMeta – SubMenubar/Instructions

Phase 3: Add Submenu Navigation Bar every page with added instructions

Paste-up in Photoshop with recommendations for inserting new Sub Menu plus new set of Instructions.Recommendations for improved function of BabelVision software and integration with BRICO software.


Storyboards – BeingMeta – Develop Consistent Demos & ExamplesRefine feedback for Scoring Success of Search

Create Demo Sequences around interestingsearches such as Urban, Busy, Cities, AerialViews, Milan

Prepared Report and Canned On-Line Sequencefor Live Demos to Potential Clients


Storyboards – BeingMeta – Chart of selected pages

BeingMeta Home

Index.html

Team

Team.fdxml

Technology

Technology.fdxml

About Babelvision

BabelVision.fdxml

Login

Login.fdxml

Demo page 1

Index.fdxml

Demo page 2

Refine.fdxml

Demo page 3

findimage.fdxml

Demo page 4

image.fdxml

Demo page 5

similar.fdxml

Demo page 6Utilizes BRICO

editmetadata.fdxml

Demo page 7Utilizes BRICO

concept.fdxml

New Application Examples: September 2004 to January 2005

Sept-Nov 2004Create NewMetaDataConceptnewconcept.fdxml

Create NewWord

newname.fdxml

Add New Picture

Addimages.fdxml

BBC News Example

Addimages.fdxmlJanuary 28, 2005

Create Google Demo

News and Publications

Home Page

Add - news link- Google Demo link

News Page

News.fdxml

Demo BabelVision onGoogle data

Googleplus.fdxml

Storyboards – BeingMeta – Develop Consistent Demos & ExamplesAdd New Navigation for Create-New-Concept/more Clean-up of Fonts/Integrate BRICO


Refine page showing final state New completed findsimilar page

Final step involved creating demos for potential clients

On-line news publication using BBC News

Google example – using BabelVision instead of Google for a Google Search• Add Demo Button on first page of BabelVision demo page


Screen Design - Dynamic Diagrams / Student Advantage – Original Sitehttp://www.studentadvantage.com/discountcard/

Screen from Original Student Advantage site shows existing Branding and available screen real estate


Screen Design Mock-ups - Dynamic Diagrams / Student Advantage - First Design -Good example sources shown to client for discussion and approval of different concepts.

First Design drew on “AmericanMemory” website at the Library of

Congress.

This design took up too much screen realestate.

Example of on-going emailcommunication over specificationsfor screen real estate, held with StudentAdvantage Marketing, IT, ISP.

Low-end black & white screen shot marked up inPhotoshop with errors. Text reads:“FirstResearch.com could appear belowFirstResearch.com as shown or other cornersecond pages” “Banner Ad on Second Pagepushes content over on pageAlternative Location of Ad takes up less space.”


Screen Design- Dynamic Diagrams / Student Advantage - Final Design – Home Page


Screen Design- Dynamic Diagrams / Student Advantage - Final Design – Second Page

Dynamic Diagrams /Student Advantage

Design, InformationArchitecture, andImplementation of Phase1 took place within 9months,

Project Manager/LeadDesigner/InformationArchitect

Documents

Ann Marion Portfolio – Wireframes/ Flow Diagrams ...Ann Marion Portfolio – Wireframes/ Flow Diagrams/Storyboards page 13 Screen Design Mock-ups - Dynamic Diagrams / Student Advantage