Website Design Document
25
th
Anniversary Website Re-launch
By
MDIA4303 Winter Class 2013
… serving Canada for 25 years
Phone: 250-374-2666; Fax: 250-374-2222
Email:
[email protected]
Website:
www.gemjewellery.com
1.
Creative Brief:
i. Introduction – Project Definition and Objective ii. Requirement Elicitation and Specification:
Client Feedback on website Personality and Target Audience
2.
Scope and Objective:
i. Summaryii. Methodology
3.
Design:
i. Sitemap
ii. Page Content Summary
iii. Header and Footer : Wireframe, Prototypes Components iv. General Technical Specification of web pages
v. Corporate Identity Artefacts vi. Preliminary Prototypes
4.
Appendix (Implementation)
–
Appendix A – Projected Project Time Lines
–
Appendix B – Page Content Work Product and Acknowledgements
Project Definition and Objective
Gems Jewellery (
GJ
) has tasked MDIA4303 Winter Class of 2013
(
Wntr13
), with the redesign of their website to celebrate their
25
th
Anniversary.
Headquartered in Vancouver, GJ has 35 stores located all over
Canada. GJ would like to have 6 key pieces in their collection
show cased on their website at this time.
They would also like to educate their customers about the grade
and cut of diamonds so they can make informed decisions
In addition, GJ would like to feature a key piece of their jewellery
every month on the home page.
Personality of Website
Purpose of Site :
•
Educate Customers;
•
Inform Customers of Product Offerings;
•
Promote and Advertise Products;
•
Drive sales and grow customer base by attracting new customers to stores
•
Leveraging anniversary celebration to drive sales by offering promotions
Impression Website should Convey:
•
Experienced
in our Business Niche
•
Customer Centric
- Focused on Customer needs and Relationship Management
•
Invested
in Empowering and Educating the Customer
by providing easy access to
information about gems
•
Creating an
environment of Trust and Transparency
for Customers
•
Demonstration of
the authenticity of our products
•
Revamped and Classy website to celebrate 25 years
in the jewellery business
•
Inspire Confidence in Suppliers
in our ability to represent and carry their products
Scope and Objectives - Summary
Based on information provided by the client and the research conducted by
the team, the following pages will document our understanding of the scope
and objectives of this project which we will execute with client approval.
Deliverables - This will include the following
•
Design Components
:
–
Site map : Diagram showing the different pages we will be creating and their link relationship
–
Page Content: A brief description of our understanding of the content of the different pages.
As we
create content it will be placed in the Appendix
–
Wireframe/Prototype:
• A wireframe is a neutral design diagram representing the different parts and components of a page
• A prototype provides a more realistic view of the pages – it provides color (content or filler text for perspective) and scale
• Note that for the sake of visualization – we will be working extensively with prototypes so that all designers can create a cohesive look and all team members can have visual feedback
•
Technical specification
:
–
Documenting the colors of different parts of the pages as well as any special features
•
Note that we will develop content (text and graphics) where possible in tandem as well as technical
specification(color and component location)
With client approval we will immediately proceed to the execution phase (i.e. the creation of the
pages) as well as validating and testing.
Methodology
In our implementation, we will adopt the Agile software development
methodology. This is a method based on iterative and incremental
development, where requirements and solutions evolve with each
iteration. The limits on the iteration are similar to that on any other
project: Resources, Quality, Scope and finally Time.
As stated earlier, we shall create prototypes in the design phase of this
project . A
prototype
is an early sample or model built to test a
concept or process or to act as a thing to be replicated or learned
from.
As we begin the implementation( creating the web pages), the
prototypes will continue to evolve hand in hand with the web pages.
The number of iterations performed and the degree to which the
implementations meet prototypes specifications shall be a factor of
project constraints but more specifically time.
Sitemap – Page Relationship
Home
Our
Products
About
Gems
Our
Locations
Contact
Us
Number of Page = 6
Simple website with a flat structure and a two level Hierarchy
Fig A
BACK
Page Content Summary
• Intro Section about GJ ; Section about 25
thAnniversary Celebration
• Section on featured Gem with graphic illustration
• Slideshow of Diamonds
*
Home
• Introductory Paragraph about Products carried by GJ alluding that
there are many more pieces that can be viewed and purchased in
stores around the country
• Graphic and accompanying text of six pieces in GJ collection
Our Products
• Introductory paragraph about the challenge of determining the
value of a Gem and our commitment to empower customers by
providing a guide
• Section on Color, Carat and Clarity;
• Chart on Cut and Grade with Graphics
About Gems
• 35 Cities and Addresses for GJ
Our Locations
• Introductory Paragraph; Contact Form
• Map and All Contact Information
• Completion leads to Thank you page
Contact Us
• Acknowledgement of successful form Submission
Thank You
Fig B - Summary of Page content
Wireframe for Header and Footer
Home | Our Products | About Gems | Contact Us
Content Area
Fig C - Not to Scale
1
3
4
BACK
Text on Logo about 3
rdParty
Organisation and note on affiliation
to– Canadian Jewellers Association
New letter/ Update
section with links to
change content
Social Media Box with link to sites .
Implementation is outside our scope of work 7 8 6 5 9 10
Prototype for Header and Footer
Fig D - Not to Scale
BACK
Text on Logo above 3
rdParty
Organisation and note on affiliation –
Canadian Jewellers Association
BACK
Second Footer Version
Note:
At the time of preparing this document, the two footer
implementations were still being evaluated.
Components of Header and Footer
Component no.
Description
1
Logo and Slogan
2
Slogan
3
Top Menu
4
Content – will vary between the different pages
5
News Updates
6
Logo of 3
rdParty – CJA – to show 3
rdparty affiliation
7
Text explaining CJA’s role in jewellers industry
8
Social Media Box – with logos and links to various sites (out of scope for project)
9
Footer menu
10
Copyright information
11
BACK
Technical Specification
S/No
Item
Value
1
Page Width
1075px (responsive design)
2
Body color
#232324
3
Content Area Color
#FFF
4
Text Color
#707070
Header/Footer
Text:#ffffff; Background: #232324
5
Header Height
215px ; responsive
6
Menu Justification
Right
7
Header Menu states:link hover active selected Text: #ffffff; Text: #??????; background:#?????? Text: #??????; background:#?????? Text: #000000; background:##232324
8
Content Area
This area varies for every page; Prototypes will demonstrateBelow are more technical specification of the website
Corporate Identity Artefacts
S/No
Artefact Name
Value
1
Company Name
Gems Jewelry (American)
Gem Jewellery British
2
Slogan
… Proudly Serving Canada for 25 years
3a
Logo Graphic
Header has to be same color
3b
Logo Description
Image of a solitaire diamond ring with 2
starts near the stone denoting sparkle
3c
Logo Color
The logo lettering and Graphics is in
white on a black background
Below is a table of some of the elements used to provide a corporate identity on the
GJ website
Preliminary Prototypes
BACK
•
At the time of final edit of this project document most
of the prototypes were still a work in progress (wip)
•
While subsections of the prototypes created in the
project can be viewed in the subsequent pages, the final
prototypes have been included in appendix C for
completeness
•
In addition, because this project is executed
long-distance, for effectiveness and because the page
content and design varies between pages, we have not
created wireframes for the page content of the different
pages. We have chosen to go straight to prototypes for
the sake of visualization as stated on the scope and
BACK
Pr
ot
otype
-Gems Jew
elle
ry
Home
P
ag
e
BACK
Pr
ot
otype
- Our Pr
oducts
P
ag
e
BACK
ot
otyp
e
- About
Gems
Pag
e(v
er1)
BACK
Note:
Page content should be reduced significantly during implementation unless we are creating more than one page in this sectionot
otype
–
A
bout
Gems P
ag
e(
ver1)
c
on
t’d
BACK
otype
- About G
em
s
Pag
e
- Final
V
er
sio
n
BACK
ot
otype
- Loc
ati
ons P
ag
e(v
er1)
Note:
In implementation, we may consider using java script to selectively display content.35 cities is a lot of cities to display on one page. The accessibility penalty sees worth it
considering the value added
BACK
Note:
At the time of creating this document, the implementation was undergoing major changes. The final may differ significantly from this prototypeot
otype
- Loc
ati
ons P
ag
e(v
er2)
•
Awaiting Prototype
BACKotype
–
Con
tact
Us P
ag
e(v
er
1)
BACK
otype
–
Con
tact
Us P
ag
e(v
er
2)
Requirement Elicitation 15hrs (5 days) All 11/03 15/03 √ Design Plan 9 hrs. (3 days) Neka 11/03 15/03 15/03 √ Story Board/ Design Document/Specification 2 hrs. (1 day) Neka 13/03 15/03 15/03 √ Prototype /wireframe– Home page Anton/Christine 22/03 23/03 √ Prototype /wireframe– Our Products Danielle/Christine 22/03 23/03 √ Prototype/wireframe – About Gems Danielle/Christine 22/03 23/03 √ Prototype/wireframe – Contact & Location Meghan, Danielle, Christine 18/03 & ? 23/03 √ Graphics for different Sections 2 hrs.(1 day) Source graphics 4 ur page? 18/03 22/03 23/03 √ Agree on All Project Documents 2 hrs.(1 day) All 18/03 23/03 √ Content (Text) Development 12 hrs.( 4days) Neka, Megan,Danielle 13/03 18/03 22/03 √ Execution –Contact/Thank you(html and Css) 15hrs (5 days) Anton, Neka 18/03 22/03 21/03 23/03 √ Other Pages – More CSS and Add content 9 hrs. (3 days) Anton, Christine 20/03 22/03 26/03 Script for Contact Page form and Locations 9 hrs.(3 days) Neka 22/03 23/03 21/03 23/03 √
(Contact)
Validation, Testing, Debugging 4hurs(1 day) Neka, Anton 26/03 26/03 26/03 √
Production/ ftp 1 hur(1 day) Anton 26/03 26/03 26/03
BACK
Table D – Project time line from 11/03 – 26/03
Eliciting Requirements/
Documentation
Implementation Execution Planning Validation / Testing ProductionProject Over-run
Creation - Acknowledgements
Initial content was developed and prototype creators went through several
iterations at great effort. We have to credit Christine with the excellent work
at creating professional prototypes and Meghan for her tenacity especially
with the locations page at the last minute
In the course of implementation, we built on these preliminary documents to
arrive at the final content and design for the pages. All other content is
included as work product in the Appendix B which continues in the next
pages.
We must also acknowledge Danielle who went through a great deal of
research to create the About Gems page although a significant amount of the
content had to be reduced because of the extent of detail she went into.
Suffice to say we are all Diamond experts at this point.
Anton also deserves much adulation for without his skill at translating
prototypes into html and CSS we will not have the pages for this project. He
also took ownership and committed to completing a significant number of
pages in very little time.
Something about the 25
thanniversary
Something about the six key product lines
Signature Piece of the Month
Every month, will show case a
piece of jewellery that exemplifies
the beauty of our diamonds and
the exquisite pieces created by
our crafts men.
This month the signature piece is
the traditional solitaire diamond
which is part of our anniversary…
Gem Jewellery is a renowned Canadian Jewellery Retailer. With our Head quarters in Vancouver, we operate
35 stores all over Canada. We travel around the country and the world to source only the best stones which
we use to create the master pieces that have made us captains of industry for over 25 years.
As we commemorate our 25 years in the Jewellery industry, we want to celebrate our most iconic pieces on
our website. Comeback every month as we celebrate a difference exquisite piece of our art on our home
page.
Signature Piece of the Month – Solitaire Diamond
Classic, simple, timeless perfection. The stunning round 3/8 ct. princess-cut diamond solitaire, with a color ranking of F and clarity of I1, is at the heart of this 14K white gold engagement ring needs no accompaniment.
Because of the popularity of this design, we have the same ring in yellow gold and in 1/2ct as well as a round and square cut diamond. To see this ring in person, please visit one of our
locations in your area The ring comes with a certificate that includes a photo and a description of the diamond. The certificate guarantees quality and can be used for insurance purposes.
You can view some of our products here. Supply may vary at your local store but we hope to show case all
our pieces online, eventually.
Gold Boston Engagement Ring:
Shown in 14 karat yellow gold and platinum. Available in 14k karat white or pink, 18 karat white, pink or yellow gold, and all platinum. Diamonds in setting total 3/8 carat. Center diamond additional. To see this piece in person please visit a location near you.
Diamond Encrusted White Gold Engagement Setting: This
commanding. 14 karat white gold semi mount encircled with 52 diamonds. Total weight exceeding 1/2 carat. To see this piece in person please visit a location near you.
Three Stone Princess Cut Diamond Ring: Shown in 14 karat yellow gold and white gold. Ring shank available in 14 or 18 karat white, pink or yellow gold or platinum . Prongs also available in platinum . Diamonds in setting total 1 1/4 carat. To see this piece in person please visit a location near you.
pink, 18 karat white, pink or yellow gold, and platinum. . To see this piece in person please visit a location near you. To see this piece in person please visit
a location near you.
carat. Center diamond additional. To see this piece in person please visit a
Diamonds are an investment and they are forever. But, not every pretty thing is the real thing. You can take a
little time to learn a little bit more about Diamonds so you can invest wisely and they will truly last forever.
A diamonds value is based on Clarity, Color, Cut and Carat weight.
Carat Weight:
Carat is a unit of measurement for gemstones subdivided into 100points. 5 carats make a gram. The heavier the stone the better.
Clarity:
Clarity is determined by the number, nature, position , size and color of internal inclusions (minerals trapped during formation) and surface blemishes.. Clarity is measured on a scale from pure(flawless) to heavily included (I-3). The more easily seen the imperfections, the less valuable the piece.
Color: Diamond colors is valued by what you can't see. The nearer they approach colorless, the more valuable they are (with the exception of fancy-color diamonds such as pink or blue).
The Color scale begins with the letter D, representing colorless and increasing to Z with the increasing presence of color. Diamonds are color-graded by comparing them to a known color under controlled lighting. These color distinctions are so subtle they are invisible to the untrained eye, but make a big difference in diamond quality and price.
The final determinant of a Diamond is the Cut. A diamond in the rough has inherent weight, clarity and color. The cut of the diamond when looking at a cross- section or side elevation determines how light will travel through the diamond to give it the sparkle and reflective qualities . A perfectly cut diamond reflects all light. A shallow or deep cut diamond does not. Some of the light escapes and the stone is less brilliant. The diagram below illustrates this
Diamonds are an investment and they are forever. But, not every pretty thing is the real thing. You can take a
little time to learn a little bit more about Diamonds so you can invest wisely and they will truly last forever.
Closely related to the cut and purely for commercial purposes is the diamond shape when viewed from the top or ‘table’ as illustrated by the diagram below
The Shape of A Diamond
1. http://www.perrywinkles.com/jewelry/diamond-encrusted-white-gold-semi-mount 2. http://www.perrywinkles.com/jewelry/gold-boston-semi-mount 3. http://www.perrywinkles.com/jewelry/three-stone-princess-cut-diamond-ring 4. http://www.perrywinkles.com/jewelry/two-tone-three-stone-diamond-band 5. http://www.perrywinkles.com/jewelry/princess-cut-diamond-ring-with-baquettes 6. http://www.perrywinkles.com/jewelry/gold-channel-set-semi-mount
7. Diamond Cut Source http://gemjewelry.com/product_pages/diamonds-loose-TR.html
8. Diamond Clarity :http://www.hwgem.com/diascale.htm
9. Diamond Color: http://www.moraysjewelers.com/diamond-color.htm
10. Diamond Cut - http://www.moraysjewelers.com/diamond-cut.htm
11. Inquiry
Please note that I obtained all the information from these links. The 6 rings are
on the first six links. The last for contain info on diamond grade. There are
Appendix C – Full page Prototypes
BACK
