Portfolio. Site design, wireframes and other diagrams. Abigail Plumb-Larrick. Plumb Information Strategy

Transcription

1 Portfolio Site design, wireframes and other diagrams Plumb Information Strategy (917) NOTES and CALLOUTS Contents 1. Portfolio of design/ux work A. Shipping flow C. Register.com hosting panel D. TheLadders Advisory Council page E. Plumbdsgnmktng.com F. Plumbinformation.com 2. IA deliverables for Michifdictionary.com (in progress) A. Sitemap B. Home page C. Contributor page D. Dictionary search interface and results pages (various stages of progress) Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 1 Cover

2 Proof of Concept Pageflow Includes both return and recipient addresses Shipping address flow Custom e-retail products 2009 Choose product Full Integration Pageflow Choose product Customize product Customize product Choose new shipping Choose new shipping Import addresses from external source. Import from existing address book or external source Enter addresses Enter addresses manually Preview and Select Preview and review page Confirm Confirm Checkout Checkout I produced these flows for an organization which was considering a new shipping option for some of the custom products it sold through its Web site. This diagram presents two options of varying levels of technical complication; the proof of concent imported shipping addresses from an external source; the full integration added the option of using an existing address book. Legend: Page Types Separate App Content Overlay Form Endeca System / Error Shipping flow Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 2

3 Hosting Administration Panel (as designed) Register.com, Inc When we introduced a new hosting product at Register.com, we designed a new interface for management of each hosting account. This user interface was developed as a skin for Cpanel X, a proprietary administration utility for Web hosting. As the hosting product manager, I performed the user testing/surveys, incorporating the indicated changes into the specification documents (including wireframes), then worked with the Director of User Experience to incorporate the indicated changes into the design. Changes included additions and subtractions to the content of the Account Overview section, changes to icons, titles of features and the order in which they appear. Register.com Hosting Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 3

4 RecruitLadder Advisory Council Page TheLadders, Inc I worked with the marketing department to develop requirements, and then produced flows and wireframes for this public page describing the Ladders recruiter Advisory Council. Look and feel were determined by the existing About Us section in which this page lives ; final comps were created by the associate creative director. TheLadders is the best-known and highestvolume job search site for jobs paying $100K and up. Theladders Advisory Council Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 4

5 Home Matrix image News content About Partners Projects Contact Plumb(dsgn/mktng)inc. Sitemap/wireframe hybrid, As part of the 2009 update of Plumb(dsgn/mktng), I pitched an unobtrusive top navigation bar in order to make the internal pages more internally navigable. This diagram is (maybe) a hybrid of a sitemap and a wireframe, intended to convey the revised look and feel and the revised navigation at a glance. v WLP Biography Company history What s Plumb Design, Inc? (evil twin) List of partners 3-6 projects (image + brief descriptions) Contact information Plumbdsgnmktng_rdsgn Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 5

6 Plumb(dsgn/mktng)inc. Site designed and executed for Plumb(dsgn/mktng), Inc., One particular challenge was presenting 40+ years of relevant design in an accessible, attractive front page graphic. Plumbdsgnmktng.com Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 6

7 Plumb Information Strategy Designed and executed, Plumbinformation.com is the Web home of my freelance business. Its purpose is to describe my career and to showcase my skills as a user interface designer. The look and feel are intended to be clean and clear, and to omit extraneous navigation or other features appropriate only to a larger site. All XHTML and CSS validates (XHTML Transitional 1.0 and CSS 2.1). Plumbinformation.com is perpetually a work in progress; I m constantly trying to iteratively improve design details and add relevant content. Plumbinformation.com Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 7

8 NOTES and CALLOUTS Dictionary error Yes 1.2 dictionary Error? No Browse/ Lexicon PDF Lexicon Scholarly works error Yes 1 Home 1.1 Contributors 1.3 scholarly works Error? No Browse Add l resources error Yes 1.4 Error? No Browse/ Lexicon PDF Lexicon This diagram presents a high-level sitemap of Michifdictionary.org, which will be a dictionary and resource hub for the First Nations language Michif. The site will have three levels of navigation. The top level will consist of the homepage, which will have basic information about MichifDictionary.org on it and a link to a Contributor pages as well as links to the second level areas: Dictionary, Scholarly Work, and the User Login. All sections will be internavigable via first- and second-level navigation. The User Login section will open in a separate window results Audio and video files results On-site PDFs results Audio and video files User login User login Assorted forms Sitemap Abigail Leah Plumb-Larrick unless otherwise noted. plumb_11_8.vsd, p. 8

9 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Image 1 This block of text represents the about us or other text you decide to feature on the front page. Home Dictionary Scholarly Works Additional Resources Home Contributors About MichifDictionary.org Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lacus. Curabitur accumsan justo vitae massa. Sed eu nisi. Ut pellentesque. Maecenas vitae lacus vitae est tincidunt viverra. Integer ultrices ligula vitae arcu. Fusce euismod fermentum justo. Vivamus accumsan dui sit amet risus. Nam semper. Nunc hendrerit. Nulla convallis odio eget neque. Phasellus a lorem. Duis lorem nulla, varius ac, fringilla in, vehicula in, turpis. Vivamus at nibh. Contributors 2 The CONTRIBUTORS section includes an image of a key contributor, some initial description, and a More link leading to the Contributors page. Praesent gravida vulputate ligula. Vestibulum vel dui. Vivamus nibh lectus, ornare vitae, tempor id, rutrum a, justo. Nunc neque. Nulla sem neque, eleifend eu, accumsan sodales, feugiat quis, sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vel quam. Nullam ut est a augue sollicitudin ornare. Vivamus cursus arcu sit amet arcu. Mauris neque. Additional Header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lacus. Curabitur accumsan justo vitae massa. Sed eu nisi. More Morbi luctus erat eget velit. Integer leo justo, sagittis non, varius non, suscipit eget, quam. Mauris laoreet tellus nec mi. Praesent pellentesque, ante vel tincidunt posuere, nulla mi vestibulum arcu, eu consectetur elit ante vitae lacus. Phasellus nibh. Donec in quam ut turpis molestie lobortis. Nunc malesuada. Nulla elit orci, laoreet eu, ornare sit amet, vulputate quis, elit. Ut neque lacus, varius sit amet, commodo ut, eleifend eu, leo. Ut interdum bibendum purus. Integer quis est. Fold Michif Dictionary Index.html plumb_11_8.vsd

10 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Image 1 If contributor provides an image, the image appears to the left of the name and bio. Home Dictionary Scholarly Works Additional Resources Home Contributors Contributors to MichifDictionary.org Second Person Lorem Ipsum, PhD Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lacus. Curabitur accumsan justo vitae massa. Sed eu nisi. Ut pellentesque. Maecenas vitae lacus vitae est tincidunt viverra. Integer ultrices ligula vitae arcu. Fusce euismod fermentum justo. Vivamus accumsan dui sit amet risus. Nam semper. Nunc hendrerit. Nulla convallis odio eget neque. Phasellus a lorem. Duis lorem nulla, varius ac, fringilla in, vehicula in, turpis. Vivamus at nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lacus. Curabitur accumsan justo vitae massa. Sed eu nisi. Ut pellentesque. Maecenas vitae lacus vitae est tincidunt viverra. Integer ultrices ligula vitae arcu. Fusce euismod fermentum justo. Vivamus accumsan dui sit amet risus. Nam semper. Nunc hendrerit. Nulla convallis odio eget neque. Phasellus a lorem. Duis lorem nulla, varius ac, fringilla in, vehicula in, turpis. Vivamus at nibh. Third Person 2 3 If contributor chooses not to provide an image, the bio takes up the full usable width of the page. Page can extend to be significantly longer than wireframe, depending on number of contributors Michif Dictionary Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis lacus. Curabitur accumsan justo vitae massa. Sed eu nisi. Ut pellentesque. Maecenas vitae lacus vitae est tincidunt viverra. Integer ultrices ligula vitae arcu. Fusce euismod fermentum justo. Vivamus accumsan dui sit amet risus. Nam semper. Nunc hendrerit. Nulla convallis odio eget neque. Phasellus a lorem. Duis lorem nulla, varius ac, fringilla in, vehicula in, turpis. Vivamus at nibh. Fold Contrib.html plumb_11_8.vsd

11 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Home Dictionary Scholarly Works Additional Resources Image 1 This one is the only required field in the form. Its limit is TBD characters. Valid characters are letters, apostrophes, and hyphens. See following pages for error messages generated by submission of an empty form. Browse the dictionary This step is required. Type the word you re looking for into the box. Look for: 2 This dropdown menu limits the results returned by language. For example, if the user enters Mountain in the search box, and then specifies a dialect, the search will only return the word that means mountain in that dialect. The menu options include: English Michif dialects TBD This step is optional. Choose from the following to limit your search results. Language/ Dialect: Part of speech: 3 This dropdown menu allows the user to limit results to a particular part of speech. For example, if the user enters climb in the search box, and then selects noun, all results would be for nouns whose English meaning is climb. Only records with: Audio files Video files Audio AND video files Fold 4 These checkboxes restrict the search results to records with other files linked. For example, if a user searches for all words that mean Climb and checks the Audio files button, the search results will be limited to words that mean Climb and have an audio file attached to them. Checking Audio and Video files will result in an OR search, returning all records with audio files and all records with video files, including any with both. Dict.html Michif Dictionary plumb_11_8.vsd

12 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Image This message appears if the user tries to submit the form without any content in the first search box. Home Dictionary Scholarly Works Additional Resources Browse Browse the dictionary Please make sure to complete the required step! This step is required. Type the word you re looking for into the box. Look for: This step is optional. Choose from the following to limit your search results. Language/ Dialect: Part of speech: Only records with: Audio files Video files Fold Michif Dictionary Dict.html error A plumb_11_8.vsd

13 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Image The look for box input follows you searched for here. Home Dictionary Scholarly Works Additional Resources Browse Browse Results The sorted by column is identified because its header is not hyperlinked; to re-sort by another column, the user selects a hyperlinked header. You searched for so. again. Records 1-5 out of 24. Next 5 Records First 5 Records Last 4 Records All Records Word Part of speech Dialect Subject Definition Video Audio Soda Noun English Food Lorem ipsum dolor sit amet Watch Hear Sofa Noun English Furniture Lorem ipsum dolor sit amet Hear Soft Adjective English - Lorem ipsum dolor sit amet Watch Softie Noun English Slang Lorem ipsum dolor sit amet Software Noun English Technology Lorem ipsum dolor sit amet Watch Hear Records 1-5 out of 24. Next 5 Records First 5 Records Last 4 Records All Records Fold Michif Dictionary Results.html plumb_11_8.vsd

14 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Home Dictionary Scholarly Works Additional Resources Image 1 This diagram depicts the list of search results if the user selects Show All. (See Results.html). The page will lengthen to accommodate all the records. The Fewer Records link will return the user to the list of five records at a time. Results You searched for book. again. 1 Records 1-11 out of 11 Fewer Records Word Part of speech Dialect Subject Definition Video Audio Book Noun English Object Lorem ipsum dolor sit amet Watch Hear Bookbinder Adjective English Professions Lorem ipsum dolor sit amet Watch Bookcase Noun English Furniture Lorem ipsum dolor sit amet Bookie Noun English Professions Lorem ipsum dolor sit amet Bookings Noun English Money Lorem ipsum dolor sit amet Watch Bookish Adjective English Adjective Lorem ipsum dolor sit amet Watch Hear Bookkeeper Noun English Professions Lorem ipsum dolor sit amet Hear Booklight Noun English Furniture Lorem ipsum dolor sit amet Bookmobile Noun English Vehicles Lorem ipsum dolor sit amet Watch Hear Bookstore Noun English Professions Lorem ipsum dolor sit amet Watch Hear Bookxxxx Noun Michif Adjective Lorem ipsum dolor sit amet Watch Hear Records 1-11 out of 11 Fewer Records Fold Michif Dictionary Results.html-show-all plumb_11_8.vsd

15 MichifDictionary.org 740 px wide CALLOUTS MichifDictionary.org Image If the user places limits on the search results, the limits are reflected here. Home Dictionary Scholarly Works Additional Resources Browse Results If the number of records returned is fewer than 5, all records are displayed and additional display options are not shown. You searched for sh. You limited your search to: Michif words Records with audio or video again. Records 1-2 out of 2. Word Part of speech Dialect Subject Definition Video Audio Sh'yaen Noun Michif Animal Dog Watch Hear Shipwaytay Verb Michif Action To leave Watch Hear again. Records 1-2 out of 2. Fold Michif Dictionary Results.html-limited plumb_11_8.vsd