Presentation is loading. Please wait.

Presentation is loading. Please wait.

Erin DeVries IMD 123 User-Centered Information Design Dr. Hruska.

Similar presentations


Presentation on theme: "Erin DeVries IMD 123 User-Centered Information Design Dr. Hruska."— Presentation transcript:

1 Erin DeVries IMD 123 User-Centered Information Design Dr. Hruska

2 Title1 Table of Contents2 Stakeholder3 Users6 Meeting the Objectives13 Functional/ Content Specifications16 Meeting the Objectives Table23 Features Tables24 Content Assets Tables27 Summary30 Site Architecture and Mock Up31 Architectural Map32 Wire Frames33 Mock Up37 Style Guide39 Works Cited40 Contact Information41 2

3 Daniels Custom Woodwork 3

4 The website Daniels Custom Woodwork has been commissioned by owner Daniel Cliff in order to better advertise and promote his personal business. Daniel makes custom woodwork projects including cabinets, window treatments, and occasionally furniture. He would like to promote the work by providing a website that will showcase the work done previously, inform perspective clients of his abilities, and increase the amount of business done overall. This project is only to be considered a local one as though it is online and available all over the world, Daniel only wants to increase his business locally as he will have to travel to each location for a project. 4

5 Encourage users to expand from store-bought products Entice them to have their own custom made. Showcase the work hes done Offer insight and reviews from previous customers. Increase the stakeholders renown Enable him to be commissioned for more projects Be able to keep his pricing competitive and viable as a source of living, instead of a side job. Allow users to contact stakeholder directly for discussion of pricing or future projects. 5

6 Daniels Custom Woodwork 6

7 Demographics Homeowner with the means to customize their home in some way. Males and females between the ages of 25 and 70. Attract younger and new homeowners to shaping their home to their wants. Attract older homeowners to customizing their home into something they can use, and something they can show off. Users have money to spend on luxury items like this, and will be generally cultured and well-educated. Also attract those who want the luxury items and simply dont know it is within their price range. 7

8 User Needs and Goals Functionality and an ease of navigation. Easy to locate Easy to find a specific type of project they are looking for. Array of images and information on project specifications to better highlight what can be done. Able to quickly form an opinion about the stakeholders abilities and personality. 8

9 9

10 10

11 11

12 John has just bought his first home, and he is looking to make a statement with it. He wants cabinets in his den that make his bar stand out as something different, new cabinets in his kitchen that make it functional and stylish, and he hates the window treatments already in the home. John lives in suburban Wisconsin just outside of Madison and he wants to be able to entertain some of the business owners he meets at the bars. He does well for himself, but is looking to impress. He searches in the internet for custom cabinets, woodwork and window treatments, looking for something local that he can get appraised and started soon. John finds several sites that promise the work hes looking for but they are in Connecticut or California, all business firms with no personality, and its too far away for him. He finds Daniels Custom Woodwork, sees it is local, and after browsing through the categories he can see that everything he wants done can be done by one person. The types of projects done before look like exactly what he is looking for, and the contact information is readily available. John shoots off an , quickly explaining what he wants, and is on his way to a custom home. 12

13 Daniels Custom Woodwork 13

14 Interactive menus that will allow the user to select what type of woodworking they want to view. Small gallery of each section to showcase the stakeholders prior work and customized expression. Main page text to explain who the stakeholder is and what he does, but there will also be some writing on the gallery pages to describe what is being viewed and perhaps even the process of getting it designed. Local business featured - repeated over and over as well as the stakeholders name and contact information which will be available on every page. 14

15 Stakeholders goal of showing off his work and keeping his business local User goals of knowing exactly who they are hiring and what he is capable of while constantly giving access to the how do I get started? question. Menus interactive and responsive to the users mouse it keeps the pages simple, yet easily expands into what a user wants to find, making the page easy to navigate. Viewing specific projects or reviews of the stakeholders work easily accessed User access to information on the abilities and personality of the stakeholder. 15

16 Daniels Custom Woodwork 16

17 Main Home page will serve as mostly information and a stepping stone to the rest of the site, and Give the users a good impression and general idea of the stakeholder. Provide central text explaining who the stakeholder is and his background, along with contact information such as name, phone number, address, and physical location. Contact information will be available in a smaller section on every page of the site, such as a gallery section of any of the subcategories. Global Navigation: Home / Cabinets / Windows / Furniture / Other / Reviews / Requests Cabinets, Windows, Furniture and Other expand on mouse-over 17

18 Cabinets category includes Kitchen / Workshop / Office expanding on mouse-over. Kitchen Cabinets page opens to display a few examples of the cabinets the stockholder has made Small images Technical specs available on mouse-over of the image and a comment or review from the client next to the piece. Images selectable to view a bigger size of it for better viewing. Shows user what work can be done, and also what the customer thought of it during or after the process. Contact information for the stockholder off to the side Same Global Navigation available as the Home page. User can easily navigate the page, and intuitively gives all the information desired. 18

19 Reviews page Set up for mostly text, with a sampling of the work from the various pages. Reviews overlay the images Linked to the content page that piece of work was from such as Windows or Furniture. Interactive User Review Review of the work (which would be requested by the stockholder at every job), Form that includes Name, Work Done, and then the Review ed directly to the stockholder and web designer for review, overlaying onto a photo of the product, and choosing if and where it would be uploaded to for display. 19

20 Home Page Mostly text Menus available and contact information highlighted. Photo of the stockholder. Interactions in the menus and the forms for Reviews or Requests Give users a sense of control Involvement in the creation of their project Provide the stockholder with ultimate control over the projects he chooses to take and eventually to highlight. Gives every user a good sense of the stockholder and his abilities. 20

21 Work Pages (Cabinets, Furniture, etc.) Gives users an overall and detailed description of the projects previously done Has the project been done before? Can the project the user wants be done? Images of Prior Projects Textual information on projects Dimensions and what type of wood was used Reviews if given Feature Global Navigation and Contact information. 21

22 Reviews Page Allows stockholder and users to interact Stockholder can: Highlight the best reviews available for every type of project at a glance Get valuable feedback on projects already completed Users can: See what has been done Read reviews from previous clients Review their project from anywhere, even if not at their home computer Page includes Global Navigation Current featured reviews Text of the reviewed product Overlaying the image of that product Reviews Form Filled out with text Can be cleared Can be submitted and sent off. 22

23 Objective Project Feature How will the feature be implemented What concerns do we haveabout this feature What concerns do we have about this featureContent User – quickly assess Stakeholder abilities and personality Homepage The user will have immediate access to information about the stakeholder and his abilities and projects SWF of stakeholders projects made load slowly Text, HTML, CSS,.jpg, SWF User – Functionality and Ease of Navigation Top Navigation The user will have easy access to site contents in blocks, answering the how do I get started question. CSS, HTML,.jpg User – Ease of NavigationExpanding Menus Top menus will expand for projects like cabinets or window treatments CSS, HTML,.jpg Stakeholder – Allow users to contact directly Contact Information Box The user will have immediate and constant access to contact information for the stakeholder Text, CSS, HTML Stakeholder – Showcase work done User – Array of images Review FormUser will type in their information and what project it is for, ing it to the stakeholder for review and possible implementation The users may not want to do this at all, or it may get used to spam the stakeholder Text, CSS, HTML, PHP 23

24 Project Feature How will the feature beimplemented How will the feature be implemented What concerns do wehave about thisfeature What concerns do we have about this featureContent Top Navigation Menu – Home / Cabinets / Windows / Furniture / Other / Reviews / Requests CSS, HTML,.jpg Dropdown expansion upon rollover or mouse click for Cabinets, Windows, Furniture and Other will not function Text, CSS,.jpg, HTML Stakeholder Image.jpgImage may be ignored.jpg Stakeholder projectsSWF or Flash Flash may not load, or load slowly Text, CSS,.jpg, HTML, SWF or Flash Stakeholder information Text Users may not read it if it is overly wordy Text, CSS, HTML Contact InformationText or.jpg Text, CSS, HTML 24

25 Project Feature How will the feature beimplemented How will the feature be implemented What concerns do wehave about this feature What concerns do we have about this featureContent Top Navigation Menu – Home / Cabinets / Windows / Furniture / Other / Reviews / Requests CSS, HTML,.jpg Dropdown expansion upon rollover or mouse click for Cabinets, Windows, Furniture and Other will not function Text, CSS,.jpg, HTML Stakeholder Contact Information Text or.jpg It might distract from the rest of the page Text, CSS, HTML,.jpg Project Images – General from all categories Text and.jpg Information stored in Img viewable upon rollover may not function in different Browsers Text, CSS, HTML,.jpg Left Navigation Bar – Kitchen Cabinets / Workshop / Office CSS, HTML,.jpg Text, CSS, HTML,.jpg 25

26 Project Feature How will the feature beimplemented How will the feature be implemented What concerns do wehave about this feature What concerns do we have about this featureContent Top Navigation Menu – Home / Cabinets / Windows / Furniture / Other / Reviews / Requests CSS, HTML,.jpg Dropdown expansion upon rollover or mouse click for Cabinets, Windows, Furniture and Other will not function Text, CSS,.jpg, HTML Stakeholder Contact Information Text or.jpg It might distract from the rest of the page Text, CSS, HTML,.jpg ReviewsText and.jpg User might not care to search through all available reviews for their particular category of project Text, CSS, HTML,.jpg Review FormText, Hyperlink at top of page will go directly to form at bottom, Text Boxes User might not find review form Text, PHP, HTML 26

27 AssetFormatDescription AssociatedAssets /Media (if any) Associated Assets / Media (if any) OtherInformation Other Information Background Image.jpg Background image for the page, not too distracting HTML, CSS Stakeholders Photo.jpg Photograph of the stakeholder..jpg Stakeholder IntroText Background on Stakeholder, including name, location, work history Stakeholder ProjectsSWF Rotating images of Stakeholder working on projects CSS,.jpg, HTML Contact Info Text,.jpg Standard contact information including name, address, , contact number CSS,.jpg, HTML Global Navigation buttons for Home / Cabinets / Windows / Furniture / Other / Reviews / Requests.jpg, Text Located below the heading name of Website.jpg, CSS, HMTL Navigation Menu and Title of Website will appear on every page 27

28 AssetFormatDescription Associated Assets / Media(if any) Associated Assets / Media (if any) Other Information Global Navigation buttons for Home / Cabinets / Windows / Furniture / Other / Reviews / Requests.jpg, TextLocated below the heading name of Website.jpg, CSS, HMTL Navigation Menu and Title of Website will appear on every page Contact InfoText,.jpg Standard contact information including name, address, , contact number CSS,.jpg, HTML Background Image.jpgBackground image for the page, not too distractingHTML, CSS Left Navigation buttons for Kitchen / Workshop / Office.jpg, Text Located to the left of the page, will allow narrowing of subject.jpg, CSS, HTML Project Images.jpgImage of type of projects done.jpg, CSS, HTML General Overview Selection of all projects in Cabinets Project InformationText Information on project such as dimensions, wood type available on mouse-over of image.jpg, CSS, HTML General Overview Selection of all projects in Cabinets Project ReviewsTextLocated next to image of project, review by clients.jpg, CSS, HTMLGeneral Overview Selection of all projects in Cabinets 28

29 AssetFormatDescription Associated Assets / Media(if any) Associated Assets / Media (if any) Other Information Global Navigation buttons for Home / Cabinets / Windows / Furniture / Other / Reviews / Requests.jpg, TextLocated below the heading name of Website.jpg, CSS, HMTL Navigation Menu and Title of Website will appear on every page Contact InfoText,.jpg Standard contact information including name, address, , contact number CSS,.jpg, HTML Background Image.jpgBackground image for the page, not too distractingHTML, CSS Link to Review FormText HyperlinkLinks to PHP form with text boxes at bottom of pageHTML, CSS Allows skipping by Reviews already posted Reviews.jpg and Text Text will overlay the image of the project, and image will link to content the project is from (Windows, Furniture, Cabinets, etc.) HTML, CSS Allows direct link to the type of projects it reviews Review FormPHP, Text Boxes Text boxes for Users Name, Work they had Done, and Review HTML, CSS Submit / Clear Form ButtonsPHP,.jpg, textAllows for submitting the Form which will the Stakeholder and Web Designer, or clearing the form of information to start again. HTML, CSSUpon Submitting, Stockholder and Designer will review and if chosen be able to implement into Reviews Page 29

30 Pages Meet Stockholder goals Getting more customers advertisement of his work Pages Meet User goals easily finding a page easy to navigate quick to load good overall idea of what kinds of projects could be done. Give users the ability to request a project and give their locations and job specifications while making it easy to simply contact the stockholder directly and discussing a project with him once they had determined he was able to complete the work they desire. Easy navigation with images and details to wow and inform users Users want to have this site as a reference. Stockholder goal of allowing prior customers to encourage others to view the site in order to see their project from around the world. Users can have the custom work they had done displayed for distant friends and family to view in a professional setting. 30

31 Daniels Custom Woodwork 31

32 32

33 33

34 34

35 35

36 36

37 37

38 38

39 39

40 DeVries, Erin Photograph. n.p. DeVries, Erin Photograph. n.p. 40

41 Erin DeVries User-Centered Information Design | IMD123 Thursday, 25 April


Download ppt "Erin DeVries IMD 123 User-Centered Information Design Dr. Hruska."

Similar presentations


Ads by Google