erin devries imd 123 user-centered information design dr. hruska
TRANSCRIPT
DANIEL’S CUSTOM WOODWORK - WEBSITE PLAN
Erin DeVriesIMD 123 User-Centered Information DesignDr. Hruska
TABLE OF CONTENTS
Title 1
Table of Contents 2
Stakeholder 3
Users 6
Meeting the Objectives 13
Functional/ Content Specifications
16
Meeting the Objectives Table
23
Features Tables 24
Content Assets Tables 27
Summary 30
Site Architecture and Mock Up
31
Architectural Map 32
Wire Frames 33
Mock Up 37
Style Guide 39
Works Cited 40
Contact Information 41
2
Daniel’s Custom Woodwork
MEET THE STAKEHOLDER
3
STAKEHOLDER OVERVIEW
The website “Daniel’s 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
STAKEHOLDER GOALS AND OBJECTIVES Encourage users to expand from store-bought
products Entice them to have their own custom made.
Showcase the work he’s done Offer insight and reviews from previous customers.
Increase the stakeholder’s 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
Daniel’s Custom Woodwork
6
USERS
USER DEMOGRAPHICS AND GOALS
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 don’t know it is within their price range.
7
USER DEMOGRAPHICS AND GOALS (CONT’D)
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 stakeholder’s abilities and personality.
8
USER 1
9
USER 2
10
USER 3
11
USER SCENARIOJohn 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 he’s looking for but they are in Connecticut or California, all business firms with no personality, and it’s too far away for him. He finds Daniel’s 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 email, quickly explaining what he wants, and is on his way to a custom home.
12
Daniel’s Custom Woodwork
13
MEETING THE OBJECTIVES
MEETING STAKEHOLDER / USER GOALS
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 stakeholder’s 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 stakeholder’s name and contact information which will be available on every page.
14
MEETING STAKEHOLDER / USER GOALS (CONT’D)
Stakeholder’s 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 user’s 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 stakeholder’s work easily accessed
User access to information on the abilities and personality of the stakeholder.
15
Daniel’s Custom Woodwork
16
FUNCTIONAL AND CONTENT SPECIFICATIONS
FEATURES AND FUNCTIONALITY
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, email 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
FEATURES AND FUNCTIONALITY (CONT’D) 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
FEATURES AND FUNCTIONALITY (CONT’D) 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 Emailed 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
CONTENT REQUIREMENTS 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
CONTENT REQUIREMENTS (CONT’D) 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
CONTENT REQUIREMENTS (CONT’D) 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
MEETING THE OBJECTIVES TABLEObjective Project Feature How will the feature be
implemented What concerns do we have about this feature
Content
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 stakeholder’s 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 Navigation
Expanding 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 Form User will type in their information and what project it is for, emailing 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
FEATURES TABLE – HOME PAGE
Project Feature How will the feature be implemented
What concerns do we have about this feature
Content
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
.jpg Image may be ignored
.jpg
Stakeholder projects
SWF 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 Information
Text or .jpg Text, CSS, HTML 24
FEATURES TABLE - CABINETS
Project Feature How will the feature be implemented
What concerns do we have about this feature
Content
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
FEATURES TABLE – REVIEWS
Project Feature How will the feature be implemented
What concerns do we have about this feature
Content
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
Reviews Text and .jpg User might not care to search through all available reviews for their particular category of project
Text, CSS, HTML, .jpg
Review Form Text, Hyperlink at top of page will go directly to form at bottom, Text Boxes
User might not find review form
Text, PHP, HTML
26
CONTENT ASSETS TABLE – HOME PAGE
Asset Format
Description Associated Assets / Media (if any)
Other Information
Background Image
.jpg Background image for the page, not too distracting
HTML, CSS
Stakeholder’s Photo
.jpg Photograph of the stakeholder.
.jpg
Stakeholder Intro
Text Background on Stakeholder, including name, location, work history
Stakeholder Projects
SWF Rotating images of Stakeholder working on projects
CSS, .jpg, HTML
Contact Info Text, .jpg
Standard contact information including name, address, email, 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
CONTENT ASSETS TABLE - CABINETSAsset Format Description Associated Assets /
Media (if any)Other Information
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
Contact Info Text, .jpg Standard contact information including name, address, email, contact number
CSS, .jpg, HTML
Background Image .jpg Background image for the page, not too distracting
HTML, 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 .jpg Image of type of projects done .jpg, CSS, HTML General Overview Selection of all projects in Cabinets
Project Information Text 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 Reviews Text Located next to image of project, review by clients
.jpg, CSS, HTML General Overview Selection of all projects in Cabinets
28
CONTENT ASSETS TABLE - REVIEWSAsset Format Description Associated Assets /
Media (if any)Other Information
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
Contact Info Text, .jpg Standard contact information including name, address, email, contact number
CSS, .jpg, HTML
Background Image .jpg Background image for the page, not too distracting
HTML, CSS
Link to Review Form Text Hyperlink Links to PHP form with text boxes at bottom of page
HTML, 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 Form PHP, Text Boxes
Text boxes for User’s Name, Work they had Done, and Review
HTML, CSS
Submit / Clear Form Buttons PHP, .jpg, text Allows for submitting the Form which will email the Stakeholder and Web Designer, or clearing the form of information to start again.
HTML, CSS Upon Submitting, Stockholder and Designer will review and if chosen be able to implement into Reviews Page
29
SUMMARY 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
Daniel’s Custom Woodwork
31
SITE ARCHITECTURE AND MOCK UPS
ARCHITECTURAL MAP
32
WIRE FRAME – HOME PAGE 1
33
WIRE FRAME – REVIEWS PAGE 1
34
WIRE FRAME – HOME PAGE 2
35
WIRE FRAME – REVIEWS PAGE 2
36
MOCK UP – HOME PAGE
37
MOCK UP – REVIEWS PAGE
38
STYLE GUIDE
39
WORKS CITED
DeVries, Erin. 2007. Photograph. n.p. DeVries, Erin. 2013. Photograph. n.p.
40
CONTACT INFORMATION
Erin DeVries User-Centered Information Design |
IMD123 Thursday, 25 April 2013 [email protected]
41