Torch and Anvil Design Framework

Torch & Anvil Goldsmiths

Design Framework for Torch & Anvil Goldsmiths Research and wireframes by SkyelineDesigns Last modified November 15th, 2010 Design rationale version 2.3

Torch and Anvil Design Framework

This page left intentionally blank.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 1

Table of Contents Table of Contents

1

Executive Summary

2

Torch & Anvil Overview Personas

3 4

Empathy map: Susan

5

Empathy map: Doug

6

Customer Journey: Susan

7

Customer Journey: Doug

8

Industry Research Competitive Analysis Industry Analysis Wireframes

9 10 11-17 18-26

Recommendations

27

Change History

28

References

Torch and Anvil Goldsmiths

29-30

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Executive Summary Summary

Torch & Anvil Goldsmiths (�T&A�) is a newly incorporated company operating in Denver, Colorado that offers quality custom and repair work in silver, gold and platinum. T&A wishes to grow their business by expanding their brand presence onto the web - for this reason, SkyelineDesigns is creating a website designed to help generate business by giving customers information and then funneling them to an easy-to-use contact page.

Torch and Anvil Goldsmiths

Page 2

Rationale

Torch and Anvil Goldsmiths is a company in need of a way to better connect with potential clients and other jewelers from both Colorado and surrounding states.

Though there are several jewelry stores in and around Denver, T&A does repair work that retail jewelers cannot; therefore both individuals and retail businesses in need of repairs use T&A Goldsmiths. Some clients send T&A jewelry for repair in the mail. Custom work also comes from both local and inter-state sources.

Because T&A serves both a local population and clients from around the country, we suggest an online website which can showcase samples of work and also serve as a point of contact. SkyelineDesigns will make a basic website with several sections; Main, Services (Custom and Repair), Portfolio, About and Contact. Because SkyelineDesigns is a local company, our designers can work closely and directly with T&A . Because T&A has no dedicated webmaster, SkyelineDesigns will design solutions which offer easy methods to upload images and change information (like a wordpress content management system (CMS) site) and, if needed, assist in uploading and changing the content on a timely basis.

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 3

T&A Business Overview Project Vision Increase visibility Online presence Build brand recognition Pre-educate local customers (custom jewelry) Online point-of-contact with out-of-state clients

Overarching Business Goals Improve bottom line by $500/month in the next 5 months Connect with customers and clients Improve T&A’s accessibility Increase customer referrals Increase brand recognition

“I believe there will be a void in the jewelry industry when the boomers, the folks who now own and run most of the local jewelry shops, retire. Torch and Anvil Goldsmiths are ready to step into that gap.”

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

This page left intentionally blank.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 4

Torch & Anvil Goldsmiths

Personas:

Empathy Maps and Customer Journeys of

“Susan” and “Doug” Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

This page left intentionally blank.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 5

Empathy Map: Susan Customer Persona Susan is a single businesswoman in her early 30’s who lives and works in downtown Denver, Colorado. She inherited a broach from her grandmother and she’d like to repurpose this item into a necklace to give to her mother.

She turns to the internet to find a reputable jeweler who can make her a custom piece of unique jewelry. She’s surfing the Internet from home where it’s quiet.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 6

Empathy Map: Doug Client Persona Doug is a married retail jewelry store owner from Salt Lake City, Utah in his 40’s. He has 3 employees who sell jewelry, but he doesn’t employ anyone on site who can do repair work.

Because Doug doesn’t have a local source for repair, he turns to the internet to find a reputable jeweler who can repair a piece of jewelry that a valued customer brought to him (”repair to the trade”).

He’s looking for someone who is certified by the Jewelers of America (JA Bench Certification) and he’s willing to ship the piece a reasonable distance.

Doug is surfing the Internet from his busy shop, where he can hear customers and his employees talking.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 7

Customer Journey: Susan Susan 32 Account Administrator Lives in Denver, Colorado Susan wants to make a unique gift for her mother using old jewelry that’s been handed down through the family. She wants to repurpose this item into something new and modern.

She Googles “custom jewelry Denver CO” and chooses Torch & Anvil’s site.

She immediately sees the Home page and takes a moment to look at the pictures and the menus in order to understand the page structure.

She clicks the menu for “Services” and sees the page is divided into two further options: “Custom” and “Repair”. She admires the picture of the silver ring and clicks it, leading to “Custom”.

Once on the Custom page she reads the short description of what T&A does with regards to making custom pieces of jewelry. She admires the series of pictures underneath this descriptive paragraph - the pictures are labeled with captions that briefly explain the process of making a custom ring. She sees a link to T&A’s portfolio page but Susan’s mind is made up: she wants to Torch and Anvil Goldsmiths

talk to someone at T&A directly. Susan looks around on the page and sees a prominent button which says, “Contact us to get started making your new custom jewelry”. She clicks this button and is lead to a Contact Page.

On the Contact Page, she first notices a prominent phone number and the invitation to call T&A immediately. Under the number is a call to action: “Jewelry is a tangible, unique, and special object who’s creation is best discussed in person. Please call me to set up an appointment to meet with us. During our meeting I will listen to your idea and translate your vision into jewelry. Also during this meeting I can answer your questions and further explain the process of developing your vision into special one of a kind object of beauty.”

Susan notices that T&A is located in Downtown Denver and is pleased because her office is located there also and she can likely meet with T&A over her lunch break.

She picks up her cell phone to call Torch & Anvil Goldsmiths about making a custom piece of jewelry for her mom... and maybe something for herself, too!

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 8

Client Journey: Doug Doug 45-60 Owns a jewelry store Lives in Salt Lake City, Utah Doug runs a retail jewelry store which sells finished jewelry. He needs to find someone to repair his customer’s jewelry (“repair for the trade “) and he’s willing to ship it a reasonable distance. He’s looking for someone who is certified by the Jewelers of America (JA Bench Certification).

He Googles “repair for the trade” or “tradework repair JA Bench Jeweler” and chooses Torch & Anvil’s site.

Doug immediately sees the Home page and takes a moment to look at the pictures and the menus in order to understand the page structure. He also notes that the JA Certification badge is prominently displayed.

Doug clicks the menu for “Services” and sees the page is divided into two further options: “Custom” and “Repair”. He clicks through to the Repair Page.

list of services that T&A offers. He sees a link to T&As portfolio page. He sees the call to action to click through to the contact page on a button labeled: “Email us for pricing and shipping instructions”. Doug clicks through to the Contact Page.

On the Contact Page, Doug first notices a prominent phone number and the invitation to call T&A immediately. Below this he sees an email form as well as a shipping address with a location in Denver, CO. Doug notices that the email form is tagged with the subtitle “Email us for more information or prices, timeline and shipping location.” He fills out the email form and sends clicks the Submit button to send it to T&A. Doug is glad to have found someone to repair his customer’s jewelry and thinks of all the other things that T&A can do for him in the future like set stones and carve waxes. Doug realizes that T&A can help him grow his own business by giving Doug a way to expand his own services.

Once on the Repair Page he reads the short description of what metals T&A works in and a Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 9

Torch & Anvil Goldsmiths

Industry Research: Industry Analysis Competitive Analysis Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

This page left intentionally blank.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 10

Competitive Analysis Retail Jewelry Websites Hyde Park and John Atencio, both larger companies operating local stores, as well as the online retailer Blue Nile have very professional retail online presences.

Gusterman’s, a local company, has an adequate website that leans more toward showcasing the jewelry than selling retail over the web.

Classic Hand Engraving and Victoriana, both small local storefronts, have unprofessional websites which may lean more toward retail in person but lack the infrastructure to do so online.

Metalcyberspace is an artistic forum with some retail opportunities but it is obviously not professionally done.

Pandora, a local store, showcases a lovely flash site but has almost no content in the site itself.

Torch and Anvil Goldsmiths

Professional

Art

Retail

Novice Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 11

Industry Analysis Design Patterns and Current Practices

Vitaly Friedman (editor in chief of Smashing Magazine) Sept 17th 2009 The visual design, structure, layout and navigation of portfolio websites. The design details of sections including the about, clients, services, portfolio, workflow and contact pages.

General Website Recommendations

Light vs Dark 82% of portfolio websites have a light design with neutral calm colors. The backgrounds of these websites may be a light shade of gray or yellow, rather than pure white.

29% of portfolio websites have very vibrant, striking colors on a dark background. Dark websites are much more likely to have big typography and strong visuals.

Number of columns Most portfolio websites consist of multiple, detailed pages, with relatively deep sub-sections.

Minimalist one-page portfolios are rarely encountered. Client and about pages usually have two columns, while front pages often have three to four columns and present the most important sections of the website in a compact overview.

Adaptd website

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Industry Analysis

Page 12

(continued)

General Website Recommendations Intro Block An Intro Block is a short friendly statement about what the agency offers and what advantages a customer will gain by using its services. The block will usually blend vivid imagery with big typography. It conveys both the company’s overall image and the personal tone of the agency’s staff, making it equally professional and friendly. Such blocks usually appear immediately below the logo on the front page.

79% of portfolio websites have some kind of an introductory block in their upper region. We noticed, though, that some portfolios forgo an introductory block in favor of showcasing their recent projects. For such designs, a small “About us” block is placed somewhere else on the page, often below the fold.

Alignment Website layouts were traditionally left-aligned, with either vertical navigation in the left sidebar or horizontal navigation near the head. With growing adoption of wide-screen displays, this has changed. More and more designers are horizontally centering their layouts so that the passive white space around the page balances the layout.

Flash Only 3.7% of portfolio websites used Flash heavily.

(Flash would be expected in a higher proportions in the websites of interactive motion design agencies, Flash design studios or video production studios.

Navigation 80% of portfolios have large horizontal navigation.

Search box In general, if a website contains a lot of information, search functionality would very likely benefit some visitors to the website. As it turns out, very few companies (11%) integrate search functionality into their website (89% do not). Mostly a search field is needed if you have a blog.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Industry Analysis

Page 13

(continued)

General Website Recommendations Contact info The websites we analyzed put contact information in almost every area of the page: top, right, left, bottom, even the middle of the page.

But we also noticed some interesting patterns.

Torch and Anvil Goldsmiths

Other general website information: None of the portfolio websites have an FAQ page.

76.3% of websites have at least one blog and many portfolios have two or more blogs.

14.55% have a newsletter or mailing list.

9% provide a detailed site map.

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Industry Analysis

Page 14

(continued)

Website Page Recommendations About us The about page is used on portfolio websites to present the members of the team, explain the philosophy of the agency and prove the company’s expertise and professionalism. The page gives the design studio a personal touch and — if designed properly — elicits the trust of potential customers.

An about page is clearly a must for portfolios: 89% of those we analyzed included a link to the page in their main navigation. 59.1% of about pages we surveyed have no sub-pages and offer visitors a brief, compact overview.

Photos of team members, their personal information and information about the design process are very common on such pages. The tone of the main copy is usually informal, friendly and sometimes even funny. The most popular wordings for the link to the about page is “About” (43.6%

Torch and Anvil Goldsmiths

Contact page Make sure the customers provides all necessary information by presenting a simple, clean Web form that can accommodate the essential information about their project. You could also provide your phone number, postal address and email address: the more, the better.

9% of websites don’t have a contact page (instead, contact information is included in the footer of each page).

Driving directions (often with an interactive Google map) are given on 45.4% of portfolio websites.

83.6% provide a phone number and email address on the contact page.

76.7% provide a postal address on the contact page.

69% of websites have a contact Web form.

Links to social networking websites such as Facebook, Twitter and LinkedIn are often used (14.5%).

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Industry Analysis

Page 15

(continued)

Website Page Recommendations Client page Many customers seek out a client list, case studies, and testimonials when searching for a company.

Only 47.2% have a client page (either as a standalone page or part of a portfolio page). In most cases, clients are represented by their logos, which are often linked to detailed case studies that discuss the work done by the agency and client testimonials. The most popular wording for the link to this page is “Our clients” (46.1%), “Clients” (39.6%) or “Client list” (15.4%).

Workflow Actually, the workflow page works rather well as a sub-section of the about page, rather than as a standalone page. While 74.5% of websites do not have a workflow page at all, the rest go to rather great lengths to explain to potential customers how their process works and what expectations both parties should have. Giving potential customers a better understanding of how they will be involved throughout the design process is certainly a good idea.

Torch and Anvil Goldsmiths

Squared Eye Client Page

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Industry Analysis

Page 16

(continued)

Website Page Recommendations Services Given that visitors usually come to such websites because they are looking for services, validating their search with clear introductory text on the front page or with a standalone services page is reasonable. Potential clients usually have a pretty good understanding of what they are looking for so putting your major offerings on the services page is a good idea.

67.2% of the portfolios we looked at have a standalone services page of some kind. The rest put their information on the about page or the front page. The services pages sometimes have sub-pages (35.1%), but in most cases the single page is quite long and detailed.

Linking your portfolio page to your services page is definitely a good idea because it bridges theory and practice and shows exactly what your agency is capable of.

The most popular wording for links to such pages is “Services” or “Our Services” (75.7%), followed by “What we do” (10.8%).

Torch and Anvil Goldsmiths

Portfolio Potential customers obviously want to see what a company is capable of. Does its style match theirs? What aesthetic does it communicate for visual design, typography and usability? Do its designs feel intuitive and look pleasant?

In general, be selective with the work you showcase, and let the visitor order and filter the projects by style, industry and year. Also provide some information about the project, or even conduct a detailed case study, with testimonials and insight into your workflow 7.2% of websites don’t have a portfolio at all 12.7% have only logos or screenshots, without any description or case study 16.4% briefly describe each project next to a logo and/or screenshot 63.6% have a very detailed page for every project, including case studies, testimonials, slideshows of screenshots, drafts and sketches

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Industry Analysis

Page 17

(continued)

Website Page Recommendations Summary: 82% of the portfolio websites we analyzed have a light design, with neutral, calm colors, 79% have traditional “block” layouts, with two to three columns clearly separated and a simple, conveniently located navigation menu, 79% of websites have some kind of introductory block in their upper area, 89% have horizontally centered layouts, 80% have large horizontal navigation, 51% have horizontal navigation with right-aligned elements,

89% have the link to the “about us”-page in the main navigation, Only 47.2% have a client page, 67.2% of portfolios have some form of standalone services page, 63.6% have a detailed page for every project, including case studies, testimonials, slideshows with screenshots, drafts and sketches, 74.5% of websites have no workflow page, The contact page should contain driving directions, a phone number, email address, postal address, vCard, social network sites and online form.

89% do not have search functionality, Only 3.7% use Flash heavily throughout the website, A contact link appears in the upper-right corner 71% of the time, and/or in the footer 45.4% of the time,

Torch and Anvil Goldsmiths

“Both individual people and jewelry stores need the kinds of skills that Torch & Anvil has.”

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 18

Torch & Anvil Goldsmiths

Wireframe Documents

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

This page left intentionally blank.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 19

Wireframes Menu along top right

Home Page

Logotype

Torch and Anvil

Home

Services

Contact

About

Portfolio

Rotating picture Intro block Services

Link to Service page Links to interior pages

Link ->

Torch and Anvil Goldsmiths

Link ->

Confidential

Link ->

Link ->

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 20

Wireframes Menu along top right

Services Page

Pictures

Services

Home

Services

Contact

About

Portfolio

Sidebar content 1

Sidebar content 2

Custom

Link to Custom Page

Link to Repair Page

Repair

Sidebar content 3

Sidebar content/links

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 21

Wireframes Menu along top right

Custom Work Page

Process pictures

Custom

Home

Services

Contact

About

Portfolio

Sidebar content 1

Sidebar content 2

text here

Explanation of process

Call to action: Link to Contact Page

Sidebar content 3

Contact Us

Sidebar content/links

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 22

Wireframes Menu along top right

Repair Page

Repair Sidebar content 1

Home

Services

Contact

About

Portfolio

text here

Explanation of process Sidebar content 2

Call to action: Link to Contact Page Sidebar content 3

Contact Us

Sidebar content/links

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 23

Wireframes Menu along top right

Contact Page

Contact Phone contact instructions

Home

Instructions

Services

Contact

About

Portfolio

Contact info

Name

Email form

Email Subject Your Message:

T&A contact info Submit

Call to action: Submit button

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 24

Wireframes Menu along top right

About Page

About T&A

About Sidebar content 1

Home

Services

Contact

About

Portfolio

text here

Sidebar content 2

Sidebar content 3

Sidebar content/links

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 25

Wireframes Menu along top right

Portfolio Page

Picture: POP-UP ON CLICK (see next page) Title

Portfolio

Title details

Home

Title details

Title details

Services

Contact

About

Portfolio

Title details

Caption

Title details

Torch and Anvil Goldsmiths

Title details

Confidential

Title details

Title details

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 26

Wireframes Menu along top right

Portfolio Pop-up

Portfolio Page: (not active)

Picture (large)

Portfolio

Title details

Home

Title details

Services

Contact

Title

About

Portfolio

Title

details

details

Click to close pop-up Close

Title details

Torch and Anvil Goldsmiths

Title details

Confidential

Title details

Title details

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 27

Recommendations SkyelineDesigns recommends: Corporate Identity Corporate identity is a visual system used to identify a company’s goals, values and personality. It should be distinct, unique, solid and memorable while giving a clear message.

Above all, the corporate identity should be used consistently and throughout all of T&A’s interactions. SkyelineDesigns recommends that T&A Goldsmiths invest in research, development and implementation of a consistent corporate brand.

Website Development This basic website is just the beginning. There are many ways to generate customer traffic to T&A through the wise use of a portfolio or even a retail website. There are many components of website design outside the scope of this document which could help T&A generate revenue - widgets, add-ons, Google analytics, search engine optimization, blog pages and providing targeted information are just some of the things available.

SkyelineDesigns recommends that Torch & Anvil revisit the design of this website in six months in order to evaluate what is working, improve the content of the site, and change the graphics to keep the site fresh and attractive to your customers.

Torch and Anvil Goldsmiths

Corporate Branding Branding is distinct from corporate identity in that branding is about the entire customer experience.

Branding creates a distinct image of a product, company, or individual. Branding should identify and distinguish a company, express the core values, hold a promise about performance, bring customer loyalty, and communicate the idea of longevity and dependability. Again, visual consistency is key. Some aspects of branding include a logo, package design, signage (exterior and interior), Point of Purchase (POP) display, merchandise labels, and marketing collateral.

SkyelineDesigns recommends that T&A invest in making a strongly positive customer impression through branding.

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 28

Change History Start project: Oct 28th, 2010 Date of change: Nov 2nd 2010 Change requested by: Michael Salamon Focus change Date of change: Nov 4th 2010 Change requested by: SkyelineDesigns Focus change: Torch and Anvil Goldsmiths point of contact site vs. portfolio site

Date of change: Nov 8th 2010 Change requested by: Torch & Anvil Persona name change, pictures changed.

Date of change: Nov 9th 2010 Change requested by: SkyelineDesigns Pictures taken; site interaction changed Date of change: Nov 10th 2010 Change requested by: Jason Bowers Add features. Add recommendations: tools, blog, Google analytics etc to keep traffic coming back to the website Date of change: Nov 13th 2010 Change requested by: Torch & Anvil Removal of blog page and tools.

Date of change: Nov 14th 2010 Change requested by: Wafa Dahabreh Corrections: grammar, word choice and visual inconsistancies.

Last modified: Nov 15th, 2010

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

Page 29

References Contact List

References

Michael Salamon Project Manager Michael.Salamon@effectiveUI

Portfolio Design Study: Design Patterns and Current Practices Sept 17th 2009 Vitaly Friedman editor in chief of Smashing Magazine

Jason Bowers Consultant Michael.Salamon@effectiveUI SkyelineDesigns Skyelinedesigns@gmail.com Torch & Anvil Goldsmiths JMclandsborough@torch-n-anvil.com Wafa Dahabreh WDahabreh@gmail.com

Five steps to a better design portfolio 9 nov 2006 Jeffrey Veen founder, Small Batch inc / founder, adaptive path 10 Useful Usability Findings and Guidelines 9 nov 2006 Jeffrey Veen founder, Small Batch inc / founder, adaptive path Webdesigner depot http://www.webdesignerdepot.com/2008/12/10characteristics-of-excellent-portfolio-sites/ think vitamin: the web practicioner’s blog http://thinkvitamin.com/design/how-to-design-aportfolio-site/

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

References (continued)

Books

Other

Talent is not Enough: Business Secrets for Designers Shel Perkins 2010 New Riders Publishing Berkley, California

Interactive Wireframes www.skyesant.com/wireframe

The Complete Graphic Designer: A Guide to Understanding Graphics and Visual Communication Ryan Hembree 2008 Rockport Publishers Beverley, Massachusetts

Page 30

Torch & Anvil: Theme frames and website implementation Begun Nov 15th 2010 http://www.torch-n-anvil.com/

About Face 3: The Essentials of Interaction Design Alan Cooper, Robert Reimann, and Dave Cronin 2007 Wiley Publishing Berkley, California

“With the increase of outsourcing, two things are happening. One, many customers are demanding greater personal attention from their local jewelers. And two, our customers are feeling an increasing desire for their jewelry to stand out and be unique. “ Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10

Torch and Anvil Design Framework

This page left intentionally blank.

Torch and Anvil Goldsmiths

Confidential

Last modified: 11-15-10