Daniel’s Custom woodwork - Website Plan

DANIEL’S CUSTOM WOODWORK - WEBSITE PLAN

Erin DeVriesIMD 123 User-Centered Information DesignDr. Hruska

TABLE OF CONTENTSTitle 1

Table of Contents 2Stakeholder 3Users 6Meeting the Objectives 13Functional/ Content Specifications

16

Meeting the Objectives Table

23

Features Tables 24Content Assets Tables 27Summary 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


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


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


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 - CABINETSProject Feature How will the

feature be implemented


Content




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


Left Navigation Bar – Kitchen Cabinets / Workshop / Office

CSS, HTML, .jpg Text, CSS, HTML, .jpg

25

FEATURES TABLE – REVIEWSProject Feature How will the

feature be implemented


Content




Stakeholder Contact Information

Text or .jpg It might distract from the rest of the page


Reviews Text and .jpg User might not care to search through all available reviews for their particular category of project


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


.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


.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


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

mailto:[email protected]

Documents

Daniel’s Custom woodwork - Website Plan